• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

stellar.js - Grafiken in einem Slide sollen stillstehen

G

gruenstich64

New member
stellar.js

Hallo zusammen,

(EDIT: Neue Frage weiter unten :moody: )

ich baue eine Parallax Scrolling Website mit stellar.js.
Es wird mehrere Slider geben, auf denen Grafiken beim Scrollen durch die Gegend fliegen - klappt auch super.
Aber es soll auch einen Slider geben, auf dem sich die Grafiken beim Scrollen nicht mitbewegen. Das habe ich auch schon gemacht, indem ich data-stellar-background-ratio auf "1" setze. Aber wenn ich das mache, scheinen alle Positionsangaben im CSS ignoriert zu werden und die Grafiken sind total falsch positioniert (immerhin scrollen sie nicht mit....). Wenn man im Browser auf "Element untersuchen" geht, stehen dort Styleangaben, die ich nirgends definiert habe.

Leider finde ich mich im Javascript-Code noch nicht gut genug zurecht, um dort eine Fehlerquelle auszumachen. Ich habe den betreffenden Teil des Codes mit allen Scripten verpackt und es wäre echt toll, wenn jemand (der stellar.js vielleicht auch gut kennt) mal drauf schauen könnte.
Es geht um Slider 1 mit den Türen, die sollten eigentlich alle so auf dem Hintergrundbild positioniert sein, dass sie optisch mit dem Boden des Raum abschließen und die Fenster verdecken. Da es Anker-Links sind, kann ich sie leider nicht direkt mit dem Hintergrund als Gesamtgrafik einfügen.

Achso, das sollte ich vielleicht dazu sagen: Die verpackte Version ist auf eine max. Browserhöhe von 900px angepasst, es wird später noch andere Versionen geben. Aber es kann natürlich sein dass das auf eurem Bildschirm ziemlich anders dargestellt wird.

https://www.dropbox.com/s/u0329cjque5a0kk/stellar js website.zip

Liebe Grüße,
gruenstich
 
Zuletzt bearbeitet:
Äh... du musst den <img> schon ein position: absolute; geben...

PS: Umlaute in Dateinamen, die du irgendwann mal ins Netz stellen willst, sind keine gute Idee.
 
Ja :p
Vielleicht darf ich dann auch direkt noch eine Frage hinterher schieben...
Ich mach das ja noch nicht so lange und helfe mir größtenteils durch googlen - Javascript eigenständig schreiben schaffe ich noch nicht, aber das kommt sicher noch :) Leider bin ich gerade etwas im Zeitdruck, weil ich diese Website für eine Prüfung fertig bekommen muss und bin deswegen mal so frei und frage nach einem Code-Vorschlag...

Und zwar möchte ich erreichen, dass wenn man auf eines der fliegenden Images klickt, dass sich das komplette div (z.B. id="slide2") nach links schiebt und gleichzeitig von rechts ein komplett neues div (gleiche Maße) ins Sichtfeld kommt. Diese neue div braucht keine Parallax-Funktionen. Ebenso sollte man aus dem neuen div onclick wieder in der gleichen Weise zurück zum ursprünglichen div kommen. Ich habe einige Ansätze bei google gefunden, aber nichts, was das richtig erfüllt hätte :-/
Freue mich sehr über Hilfe!

Hier noch mal der Link zum Website-Schnipsel: https://www.dropbox.com/s/u0329cjque5a0kk/stellar js website.zip


EDIT:
Ich habe dieses Beispiel gefunden: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_147
Das sieht mir ziemlich nach dem aus, was ich suche. Aber der Code funktioniert nicht mal wenn ich ihn 1:1 übernehme (habe darauf geachtet die richtigen Bibliotheken einzubinden) -.-

EDIT 2:
Jetzt habe ich mir dieses Plugin geladen http://srobbin.com/jquery-plugins/pageslide/ - es schien unheimlich simpel.
Leider passiert onclick einfach gar nichts, vielleicht weiß jemand wie ich das in meinen Code richtig einbinde?
 
Zuletzt bearbeitet:
HTML: 
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
    <div class="wrapper">
    		
		<a href="#slide1"><img src="images/Rooms/Room1/tuer.png" data-stellar-ratio="1.5"></a>
		<img src="images/Rooms/Room1/sofa.png" data-stellar-ratio="2">
        <img src="images/Rooms/Room1/gitarre.png" data-stellar-ratio="1.5">
        <img src="images/Rooms/Room1/schild.png" data-stellar-ratio="2">
        <a href="#modal" class="second"><img src="images/Rooms/Room1/vinyl1.png" data-stellar-ratio="1.5"></a>
		<img src="images/Rooms/Room1/vinyl2.png" data-stellar-ratio="2">
       	
        <div id="modal">
            <h2>Modal</h2>
            <p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p>
            <p><a href="javascript:$.pageslide.close()">Close</a></p>
        </div>
       
        </div>
        
		<a class="button" data-slide="3" title=""></a>

	</div><!--End Slide 2-->

Bei Klick auf vinyl1.png sollte div "modal" (das ist jetzt noch das aus dem Template) einsliden.


In der Javascriptfehler-Konsole steht nichts drin, kein einziges Zeichen - ich nehme an, das sollte nicht so sein.
Die Scripte sind aber alle im Head-Bereich verlinkt.
 
OMG - hab' jetzt erst gesehen, dass die href="javascript:..." verwenden... mach' das nicht, sondern so:
Code: 
<p><a onclick="$.pageslide.close()">Close</a></p>

Wo und wie initialisierst du denn das Plugin?
 
Zuletzt bearbeitet:
AW: stellar.js

gruenstich64, dein ursprünglicher Beitrag 7 wurde nicht freigeschaltet, übersehen. Hab ihn jetzt gelöscht, weil der Beitrag danach ziemlich genau gleich war und der war - wir müssen noch finden, warum das manchmal so ist - direkt freigeschaltet.
 
Code: 
<p><a onclick="$.pageslide.close()">Close</a></p>
Das ist noch das, was im Template stand, das wollte ich auch nicht verwenden.

Wo und wie initialisierst du denn das Plugin?
Zum Vergrößern anklicken....
Ich habe nur die beiden Biblitheken aus dem Plugin eingebunden (jQuery natürlich auch). Dann habe ich nur versucht den Code aus der Demo in meinen einzupassen...

Hier der ganze Code aus dem Plugin - wie gesagt, ich bin da noch nicht so fit drin...

Code: 
;(function($){
    // Convenience vars for accessing elements
    var $body = $('body'),
        $pageslide = $('#pageslide');
    
    var _sliding = false,   // Mutex to assist closing only once
        _lastCaller;        // Used to keep track of last element to trigger pageslide
    
	// If the pageslide element doesn't exist, create it
    if( $pageslide.length == 0 ) {
         $pageslide = $('<div />').attr( 'id', 'pageslide' )
                                  .css( 'display', 'none' )
                                  .appendTo( $('body') );
    }
    
    /*
     * Private methods 
     */
    function _load( url, useIframe ) {
        // Are we loading an element from the page or a URL?
        if ( url.indexOf("#") === 0 ) {                
            // Load a page element                
            $(url).clone(true).appendTo( $pageslide.empty() ).show();
        } else {
            // Load a URL. Into an iframe?
            if( useIframe ) {
                var iframe = $("<iframe />").attr({
                                                src: url,
                                                frameborder: 0,
                                                hspace: 0
                                            })
                                            .css({
                                                width: "100%",
                                                height: "100%"
                                            });
                
                $pageslide.html( iframe );
            } else {
                $pageslide.load( url );
            }
            
            $pageslide.data( 'localEl', false );
            
        }
    }
    
    // Function that controls opening of the pageslide
    function _start( direction, speed ) {
        var slideWidth = $pageslide.outerWidth( true ),
            bodyAnimateIn = {},
            slideAnimateIn = {};
        
        // If the slide is open or opening, just ignore the call
        if( $pageslide.is(':visible') || _sliding ) return;	        
        _sliding = true;
                                                                    
        switch( direction ) {
            case 'left':
                $pageslide.css({ left: 'auto', right: '-' + slideWidth + 'px' });
                bodyAnimateIn['margin-left'] = '-=' + slideWidth;
                slideAnimateIn['right'] = '+=' + slideWidth;
                break;
            default:
                $pageslide.css({ left: '-' + slideWidth + 'px', right: 'auto' });
                bodyAnimateIn['margin-left'] = '+=' + slideWidth;
                slideAnimateIn['left'] = '+=' + slideWidth;
                break;
        }
                    
        // Animate the slide, and attach this slide's settings to the element
        $body.animate(bodyAnimateIn, speed);
        $pageslide.show()
                  .animate(slideAnimateIn, speed, function() {
                      _sliding = false;
                  });
    }
      
    /*
     * Declaration 
     */
    $.fn.pageslide = function(options) {
        var $elements = this;
        
        // On click
        $elements.click( function(e) {
            var $self = $(this),
                settings = $.extend({ href: $self.attr('href') }, options);
            
            // Prevent the default behavior and stop propagation
            e.preventDefault();
            e.stopPropagation();
            
            if ( $pageslide.is(':visible') && $self[0] == _lastCaller ) {
                // If we clicked the same element twice, toggle closed
                $.pageslide.close();
            } else {                 
                // Open
                $.pageslide( settings );

                // Record the last element to trigger pageslide
                _lastCaller = $self[0];
            }       
        });                   
	};
	
	/*
     * Default settings 
     */
    $.fn.pageslide.defaults = {
        speed:      200,        // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
        direction:  'right',    // Accepts 'left' or 'right'
        modal:      false,      // If set to true, you must explicitly close pageslide using $.pageslide.close();
        iframe:     true,       // By default, linked pages are loaded into an iframe. Set this to false if you don't want an iframe.
        href:       null        // Override the source of the content. Optional in most cases, but required when opening pageslide programmatically.
    };
	
	/*
     * Public methods 
     */
	
	// Open the pageslide
	$.pageslide = function( options ) {	    
	    // Extend the settings with those the user has provided
        var settings = $.extend({}, $.fn.pageslide.defaults, options);
	    
	    // Are we trying to open in different direction?
        if( $pageslide.is(':visible') && $pageslide.data( 'direction' ) != settings.direction) {
            $.pageslide.close(function(){
                _load( settings.href, settings.iframe );
                _start( settings.direction, settings.speed );
            });
        } else {                
            _load( settings.href, settings.iframe );
            if( $pageslide.is(':hidden') ) {
                _start( settings.direction, settings.speed );
            }
        }
        
        $pageslide.data( settings );
	}
	
	// Close the pageslide
	$.pageslide.close = function( callback ) {
        var $pageslide = $('#pageslide'),
            slideWidth = $pageslide.outerWidth( true ),
            speed = $pageslide.data( 'speed' ),
            bodyAnimateIn = {},
            slideAnimateIn = {}
            	        
        // If the slide isn't open, just ignore the call
        if( $pageslide.is(':hidden') || _sliding ) return;	        
        _sliding = true;
        
        switch( $pageslide.data( 'direction' ) ) {
            case 'left':
                bodyAnimateIn['margin-left'] = '+=' + slideWidth;
                slideAnimateIn['right'] = '-=' + slideWidth;
                break;
            default:
                bodyAnimateIn['margin-left'] = '-=' + slideWidth;
                slideAnimateIn['left'] = '-=' + slideWidth;
                break;
        }
        
        $pageslide.animate(slideAnimateIn, speed);
        $body.animate(bodyAnimateIn, speed, function() {
            $pageslide.hide();
            _sliding = false;
            if( typeof callback != 'undefined' ) callback();
        });
    }
	
	/* Events */
	
	// Don't let clicks to the pageslide close the window
    $pageslide.click(function(e) {
        e.stopPropagation();
    });

	// Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal
	$(document).bind('click keyup', function(e) {
	    // If this is a keyup event, let's see if it's an ESC key
        if( e.type == "keyup" && e.keyCode != 27) return;
	    
	    // Make sure it's visible, and we're not modal	    
	    if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {	        
	        $.pageslide.close();
	    }
	});
	
})(jQuery);
 
Du musst das Plugin schon initialisieren. So wie in den ersten beiden Demos auf der Projektseite.

PS:
gruenstich64 schrieb:
Das ist noch das, was im Template stand, das wollte ich auch nicht verwenden.
Zum Vergrößern anklicken....
Ich glaub' du hast mich falsch verstanden. Du sollst besser das mit dem "onclick" machen. Noch besser wäre natürlich, wenn du den Eventlistener nicht im HTML, sondern im JS setzen würdest.
 
kkapsner schrieb:
Du musst das Plugin schon initialisieren. So wie in den ersten beiden Demos auf der Projektseite.
Zum Vergrößern anklicken....

Wird es nicht hier aufgerufen?
Code: 
<script>
        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
        $(".second").pageslide({ direction: "left", modal: true });
    </script>

Entschuldigung, wie gesagt, ich bin da nicht so firm drin und ich brauche eigentlich heute noch eine schnelle Lösung für mein Problem :(
 
Na, du musst die deine <a>s über einen Selektor ansprechen (könnte über "#slide2 a[href^=#]" funktionieren) und dann das Plugin aufrufen:
Code: 
$("#slide2 a[href^=#]").pageslide({ direction: "left", modal: true });
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben