Probleme nach nPage-Update

CSS, Java Script u.s.w

Moderator: HTML-Laie

Antworten
Benutzeravatar
Ratoncito
Webmaster
Webmaster
Beiträge: 109
Registriert: So 24. Nov 2013, 09:59
Mein Vorname: Wolfgang

Probleme nach nPage-Update

Beitrag von Ratoncito »

Hallo zusammen,

nach dem letzten Update von nPage bleibt der Hintergrund auf meinen Seiten weiß, früher wurde hier ein Hintergrundbild über den gesamten Bildschirm aufgespannt. Das funktioniert nun nicht mehr. Zur Ursache und Abhilfe gab es von nPage folgende Antwort:

@Ratoncito:
Wir haben uns Ihr Problem bzgl. dem Hintergrundbild angesehen und leider ist es zur Problembehebung notwendig, dass Sie Änderungen am Code Ihrer Seite vornehmen.

Das Problem entsteht dadurch, dass wir in der Vergangenheit kein jQuery auf den Userseiten systemseitig genutzt und ausgeliefert haben. Seit der Systemaktualisierung vergangene Nacht ist das allerdings der Fall.

Wir liefern nun also, wie auch im Quellcode ersichtlich, (derzeit) Version 1.10.2 von jQuery mit aus. Sie binden Ihrerseits selbst nochmal jQuery 1.7.1 ein, was natürlich einen Konflikt verursacht und damit zu dem beschribenen Fehler führt.

Sie haben nun 2 Möglichkeiten:

1.) Sie aktualisieren Ihr JS, sodass diese ebenfalls mit jQuery 1.10.2 kompatibel sind und nutzen somit das jQuery, das wir unsererseits ausliefern.

2.) Sie binden zusätzlich zu unserem jQuery 1.10.2 weiterhin 1.8.3 ein, nutzen allerdings die noConflict()-Methode von jQuery, vgl. javascript - Can I use multiple versions of jQuery on the same page? - Stack Overflow . Damit ist es möglich beide Versionen parallel einzubinden, allerdings sind hier ggf. weiterreichende Codeänderungen notwendig (insbesondere auch bei den Plugins).

Das ist ja alles ganz nett, aber was da nun gemacht werden muss ist mir ein großes Rätsel.
Hat jemand von Euch Ahnung was da angepasst werden muss?

Hier der Code:

Code: Alles auswählen

// ----------------------------------------------------------------------------
// Vegas - jQuery plugin
// Add awesome fullscreen backgrounds to your webpages.
// v 1.3.1
// Dual licensed under the MIT and GPL licenses.
// http://vegas.jaysalvat.com/
// ----------------------------------------------------------------------------
// Copyright (C) 2012 Jay Salvat
// http://jaysalvat.com/
// ----------------------------------------------------------------------------
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files ( the "Software" ), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
// ----------------------------------------------------------------------------
( function( $ ){
    var $background = $( '<img />' ).addClass( 'vegas-background' ),
        $overlay    = $( '<div />' ).addClass( 'vegas-overlay' ),
        $loading    = $( '<div />' ).addClass( 'vegas-loading' ),
        $current    = $(),
        paused = null,
        backgrounds = [],
        step = 0,
        delay = 5000,
        walk = function() {},
        timer,
        methods = {

        // Init plugin
        init : function( settings ) {
            var options = {
                src: getBackground(),
                align: 'center',
                valign: 'center',
                fade: 0,
                loading: true,
                load: function() {},
                complete: function() {}
            }
            $.extend( options, $.vegas.defaults.background, settings );

            if ( options.loading ) {
                loading();
            }

            var $new = $background.clone();
            $new.css( {
                'position': 'fixed',
                'left': '0px',
                'top': '0px'
            })
            .bind('load', function() {
                if ( $new == $current ) {
                    return;
                }

                $( window ).bind( 'load resize.vegas', function( e ) {
                    resize( $new, options );
                });

                if ( $current.is( 'img' ) ) {

                    $current.stop();

                    $new.hide()
                        .insertAfter( $current )
                        .fadeIn( options.fade, function() {
                            $('.vegas-background')
                                .not(this)
                                    .remove();
                            $( 'body' ).trigger( 'vegascomplete', [ this, step - 1 ] );
                            options.complete.apply( $new, [ step - 1 ] );
                        });
                } else {
                    $new.hide()
                        .prependTo( 'body' )
                        .fadeIn( options.fade, function() {
                            $( 'body' ).trigger( 'vegascomplete', [ this, step - 1 ] );
                            options.complete.apply( this, [ step - 1 ] );
                        });
                }

                $current = $new;

                resize( $current, options );

                if ( options.loading ) {
                    loaded();
                }

                $( 'body' ).trigger( 'vegasload', [ $current.get(0), step - 1 ] );
                options.load.apply( $current.get(0), [ step - 1 ] );

                if ( step ) {
                    $( 'body' ).trigger( 'vegaswalk', [ $current.get(0), step - 1 ] );
                    options.walk.apply( $current.get(0), [ step - 1 ] );
                }
            })
            .attr( 'src', options.src );

            return $.vegas;
        },

        // Destroy background and/or overlay
        destroy: function( what ) {
            if ( !what || what == 'background') {
                $( '.vegas-background, .vegas-loading' ).remove();
                $( window ).unbind( 'resize.vegas' );
                $current = $();
            }

            if ( what == 'overlay') {
                $( '.vegas-overlay' ).remove();
            }

            return $.vegas;
        },

        // Display the pattern overlay
        overlay: function( settings ) {
            var options = {
                src: null,
                opacity: null
            };
            $.extend( options, $.vegas.defaults.overlay, settings );

            $overlay.remove();

            $overlay
                .css( {
                    'margin': '0',
                    'padding': '0',
                    'position': 'fixed',
                    'left': '0px',
                    'top': '0px',
                    'width': '100%',
                    'height': '100%'
            });

            if ( options.src ) {
                $overlay.css( 'backgroundImage', 'url(' + options.src + ')' );
            }

            if ( options.opacity ) {
                $overlay.css( 'opacity', options.opacity );
            }

            $overlay.prependTo( 'body' );

            return $.vegas;
        },

        // Start/restart slideshow
        slideshow: function( settings, keepPause ) {
            var options = {
                step: step,
                delay: delay,
                preload: false,
                backgrounds: backgrounds,
                walk: walk
            };

            $.extend( options, $.vegas.defaults.slideshow, settings );

            if ( options.backgrounds != backgrounds ) {
                if ( !settings.step ) {
                    options.step = 0;
                }

                if ( !settings.walk ) {
                    options.walk = function() {};
                }

                if ( options.preload ) {
                    $.vegas( 'preload', options.backgrounds );
                }
            }

            backgrounds = options.backgrounds;
            delay = options.delay;
            step = options.step;
            walk = options.walk;

            clearInterval( timer );

            if ( !backgrounds.length ) {
                return $.vegas;
            }

            var doSlideshow = function() {
                if ( step < 0 ) {
                    step = backgrounds.length - 1;
                }

                if ( step >= backgrounds.length || !backgrounds[ step - 1 ] ) {
                    step = 0;
                }

                var settings = backgrounds[ step++ ];
                settings.walk = options.walk;

                if ( typeof( settings.fade ) == 'undefined' ) {
                    settings.fade = options.fade;
                }

                if ( settings.fade > options.delay ) {
                    settings.fade = options.delay;
                }

                $.vegas( settings );
            }
            doSlideshow();

            if ( !keepPause ) {
                paused = false;

                $( 'body' ).trigger( 'vegasstart', [ $current.get(0), step - 1 ] );
            }

            if ( !paused ) {
                timer = setInterval( doSlideshow, options.delay );
            }

            return $.vegas;
        },

        // Jump to the next background in the current slideshow
        next: function() {
            var from = step;

            if ( step ) {
                $.vegas( 'slideshow', { step: step }, true );

                $( 'body' ).trigger( 'vegasnext', [ $current.get(0), step - 1, from - 1 ] );
            }

            return $.vegas;
        },

        // Jump to the previous background in the current slideshow
        previous: function() {
            var from = step;

            if ( step ) {
                $.vegas( 'slideshow', { step: step - 2 }, true );

                $( 'body' ).trigger( 'vegasprevious', [ $current.get(0), step - 1, from - 1 ] );
            }

            return $.vegas;
        },

        // Jump to a specific background in the current slideshow
        jump: function( s ) {
            var from = step;

            if ( step ) {
                $.vegas( 'slideshow', { step: s }, true );

                $( 'body' ).trigger( 'vegasjump', [ $current.get(0), step - 1, from - 1 ] );
            }

            return $.vegas;
        },

        // Stop slideshow
        stop: function() {
            var from = step;
            step = 0;
            paused = null;
            clearInterval( timer );

            $( 'body' ).trigger( 'vegasstop', [ $current.get(0), from - 1 ] );

            return $.vegas;
        },

        // Pause slideShow
        pause: function() {
            paused = true;
            clearInterval( timer );

            $( 'body' ).trigger( 'vegaspause', [ $current.get(0), step - 1 ] );

            return $.vegas;
        },

        // Get some useful values or objects
        get: function( what ) {
            if ( what == null || what == 'background' ) {
                return $current.get(0);
            }

            if ( what == 'overlay' ) {
                return $overlay.get(0);
            }

            if ( what == 'step' ) {
                return step - 1;
            }

            if ( what == 'paused' ) {
                return paused;
            }
        },

        // Preload an array of backgrounds
        preload: function( backgrounds ) {
            var cache = [];
            for( var i in backgrounds ) {
                if ( backgrounds[ i ].src ) {
                    var cacheImage = document.createElement('img');
                    cacheImage.src = backgrounds[ i ].src;
                    cache.push(cacheImage);
                }
            }

            return $.vegas;
        }
    }

    // Resize the background
    function resize( $img, settings ) {
        var options =  {
            align: 'center',
            valign: 'center'
        }
        $.extend( options, settings );

        if( $img.height() == 0 ) {
            console.log('pecouille');
            $img.load( function(){
                resize( $(this), settings );
            } );
            return;
        }

        var ww = $( window ).width(),
            wh = $( window ).height(),
            iw = $img.width(),
            ih = $img.height(),
            rw = wh / ww,
            ri = ih / iw,
            newWidth, newHeight,
            newLeft, newTop,
            properties;

        if ( rw > ri ) {
            newWidth = wh / ri;
            newHeight = wh;
        } else {
            newWidth = ww;
            newHeight = ww * ri;
        }

        properties = {
            'width': newWidth + 'px',
            'height': newHeight + 'px',
            'top': 'auto',
            'bottom': 'auto',
            'left': 'auto',
            'right': 'auto'
        }

        if ( !isNaN( parseInt( options.valign ) ) ) {
            properties[ 'top' ] = ( 0 - ( newHeight - wh ) / 100 * parseInt( options.valign ) ) + 'px';
        } else if ( options.valign == 'top' ) {
            properties[ 'top' ] = 0;
        } else if ( options.valign == 'bottom' ) {
            properties[ 'bottom' ] = 0;
        } else {
            properties[ 'top' ] = ( wh - newHeight ) / 2;
        }

        if ( !isNaN( parseInt( options.align ) ) ) {
            properties[ 'left' ] = ( 0 - ( newWidth - ww ) / 100 * parseInt( options.align ) ) + 'px';
        } else if ( options.align == 'left' ) {
            properties[ 'left' ] = 0;
        } else if ( options.align == 'right' ) {
            properties[ 'right' ] = 0;
        } else {
            properties[ 'left' ] = ( ww - newWidth ) / 2 ;
        }

        $img.css( properties );
    }

    // Display the loading indicator
    function loading() {
        $loading.prependTo( 'body' ).fadeIn();
    }

    // Hide the loading indicator
    function loaded() {
        $loading.fadeOut( 'fast', function() {
            $( this ).remove();
        });
    }

    // Get the background image from the body
    function getBackground() {
        if ( $( 'body' ).css( 'backgroundImage' ) ) {
            return $( 'body' ).css( 'backgroundImage' ).replace( /url\("?(.*?)"?\)/i, '$1' );
        }
    }

    // The plugin
    $.vegas = function( method ) {
        if ( methods[ method ] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
        } else if ( typeof method === 'object' || !method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist' );
        }
    };

    // Global parameters
    $.vegas.defaults = {
        background: {
            // src:         string
            // align:       string/int
            // valign:      string/int
            // fade:        int
            // loading      bool
            // load:        function
            // complete:    function
        },
        slideshow: {
            // fade:        null
            // step:        int
            // delay:       int
            // backgrounds: array
            // preload:     bool
            // walk:        function
        },
        overlay: {
            // src:         string
            // opacity:     float
        }
    }
})( jQuery );
Ich hoffe, dass es hier einen Experten gibt

Saludos - Wolfgang
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Probleme nach nPage-Update

Beitrag von Jasko »

Hier es gibt für dieses Javascript eine neuere Version die mit jQuery 1.10.2 funktiniert.

Link: http://vegas.jaysalvat.com/
Benutzeravatar
Ratoncito
Webmaster
Webmaster
Beiträge: 109
Registriert: So 24. Nov 2013, 09:59
Mein Vorname: Wolfgang

Re: Probleme nach nPage-Update

Beitrag von Ratoncito »

Hallo Jasko,

vielen Dank für den Tipp. :DA

Die Dateien habe ich heruntergeladen und eingebaut, aber das Hintergrundbild ist immer noch nicht zu sehen. :(

Habe ich da etwas falsch gemacht, oder wo steckt der Fehler?

Getestet habe ich es auf der Seite:
http://unser-gartenteich.npage.de/gartenteich.html

Saludos - Wolfgang
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Probleme nach nPage-Update

Beitrag von Jasko »

Was der genaue Grund dafür ist weiss ich jetzt nicht, müsste selbst ausprovieren nach dem Moto Try and Error. Natürlich wäre es von Vorteil wenn man das ganze erst mal auf einer neutralen Seite ausprobiert ohne die Einbindungen von nPage.
Benutzeravatar
Ratoncito
Webmaster
Webmaster
Beiträge: 109
Registriert: So 24. Nov 2013, 09:59
Mein Vorname: Wolfgang

Re: Probleme nach nPage-Update

Beitrag von Ratoncito »

Hallo zusammen,

ich bin ganz schön angefressen!

Zum Update bei nPage habe ich nochmal dies geschrieben:
Hallo bolivien,

vielen Dank für Deine Hilfe. Habe Deine Anweisungen umgesetzt, aber ohne Erfolg. Ich habe dass Hintergrundbild nun als Notlösung als img eingefügt. Sieht aber fürchterlich aus!

Eigentlich würde es mich mal interessieren, ob ich der Einzige mit Problemen bei Plugins bin.

@Support

Den Fehler von goefi-chiangmai hatte ich im Beitrag 203 schon beschrieben. Das ist wirklich lästig.

Dann hatte ich noch geschrieben:
Nun habe ich noch mit Erschrecken festgestellt, dass auch der auf der Mexiko-HP eingesetzte Nivo-Slider und auf einer noch im Aufbau befindlichen weiteren HP das CloudCarousel für die Fotopräsentation nicht mehr funktionieren.
Es kann doch nicht sein, dass durch ein Update von nPage alle mit viel Aufwand und Mühe eingebauten Plugins nicht mehr funktionieren.

Bitte schaut Euch das noch mal an und findet eine Lösung, denn ich bin mit meinen geringen Kenntnissen in Javascript total überfordert.


Dann würde mich auch noch dieses interessieren:
Mal angenommen, ich würde die mit riesigem zeitlichen Aufwand eingefügten Plugins wieder zum Funktionieren bringen(wohl nur mit fremder Hilfe, denn meine bescheidenen Kenntnisse reichen nicht aus), was passiert beim nächsten Update?

Ist dann wieder alles hin?

Das würde ja bedeuten, dass man eigentlich keine Plugins mehr verwenden kann.

Sie schrieben:
Das Problem entsteht dadurch, dass wir in der Vergangenheit kein jQuery auf den Userseiten systemseitig genutzt und ausgeliefert haben. Seit der Systemaktualisierung vergangene Nacht ist das allerdings der Fall.

Ich bin kein Entwickler und kenne die Hintergründe nicht, aber kann man das nicht anders lösen?

Ich hoffe immer noch, dass meine vielen Stunden, die ich in diese Plugins investiert habe, nicht umsonst waren, und das jemand eine Lösung für diese Probleme findet.

Vielen Dank

Allen ein schönes Wochenende - Wolfgang


Die lapidare Antwort:

@Ratoncito: Nein, es gibt leider keine andere Möglichkeit, da wir für die Zukunft jQuery als Entwicklungsbasis benötigen und uns darauf verlassen müssen, dass es a) stets geladen ist und b) in der richtigen Version. Außerdem sollten Sie natürlich in der Lage sein Plugins / Zusatzelemente, die Sie in Ihre Seite einfügen, auch selbstständig zu aktualisieren, ansonsten wäre es evtl. sinnvoller diese wieder zu entfernen.

Meine Gedanken möchte ich hier besser nicht schreiben.
Warum benutzen die nicht ihr ach so tolles nPage-Script mit dem ich nichts anfangen kann?

Habt Ihr eigentlich keine Probleme mit Euren Javascripts?

Noch ein schönes Wochenende (meins hat´s ganz schön verhagelt) - Wolfgang
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 16 Gäste