kostenloser Webspace werbefrei: lima-city


Bildergalerie mit wischendem Übergang

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    squid

    Kostenloser Webspace von squid

    squid hat kostenlosen Webspace.

    Hi
    ich habe eine Bildergalerie, die jeweils nach 6 sekunden durch aktualisierung zum nächten Bild übergeht.
    Der Name des aktuellen Bildes wird via PHP über GET übertragen, dadurch kommt allerdings der Nachteil, dass die Seite langsamer lädt und das der Übergang etwas rau ist.
    Jetzt will ich die Galerie mit Javascript machen, habe aber kaum eine Ahnung von js. Gibt es irgendwo ein fertiges Script, ein Tutorial oder etwas ähnliches?

    LG
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. kostenlose-javascripts

    Kostenloser Webspace von kostenlose-javascripts

    kostenlose-javascripts hat kostenlosen Webspace.

  4. Für dich wäre auch jQuery nicht falsch,
    damit lassen sich solche Sachen einfach erstellen.
  5. Autor dieses Themas

    squid

    Kostenloser Webspace von squid

    squid hat kostenlosen Webspace.

    Ich habs mit jQuery (von http://flowplayer.org/tools/) gemacht. Ich habe das ganze mit dem minimal setup for scrollable neu geschrieben und dann mit einem Navigator plugin erweitert. Rausgekommen ist folgender Code:

    <head>
    <link rel="stylesheet" type="text/css" href="layout/bar.css" />
    <link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/css/scrollable-navigator.css" />
    
    
    
    
    <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js" language="JavaScript" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
    // execute your scripts when the DOM is ready. this is mostly a good habit
    $(function() {
    
    	// initialize scrollable
    	$("#browsable").scrollable().navigator();
    
    });
    </script>
    
    
    
    </head>
    
    
    
    
    
    
    
    
    
    
    
    <body>
    
    <!-- wrapper for navigator elements -->
    <div class="navi"></div>
    
    
    
    
    
    <div id="navi">
    <!-- "previous page" action -->
    <a class="prev browse left">Links</a>
    
    <!-- root element for scrollable -->
    <div class="scrollable" id=browsable>
    
       <!-- root element for the items -->
       <div class="items">
    
          <div>
             <img src="img/preview1/0.png">
          </div>
          <div>
             <img src="img/preview1/1.png">
          </div>
          <div>
             <img src="img/preview1/2.png">
          </div>
          <div>
             <img src="img/preview1/3.png">
          </div>
          <div>
             <img src="img/preview1/4.png">
          </div>
          <div>
             <img src="img/preview1/5.png">
          </div>
          <div>
             <img src="img/preview1/6.png">
          </div>
          <div>
             <img src="img/preview1/7.png">
          </div>
    
    
       </div>
    
    </div>
    </div>
    <!-- "next page" action -->
    <a class="next browse right">Rechts</a>
    <br clear="all" />
    
    
    </div>
    </body>



    Tja, die rechts und links Buttons funktionieren einwandfrei, das Problem liegt bei dem Navigator (einfach ein paar Knöpfe, von denen jeder zur entsprechenden Seite verlinkt). Dazu gibt es das leere div mit der Klasse "navi". Es sollte eigentlich von dem JScode gefüllt werden, was aber anscheinend nicht geschieht.

    Kann mir jemand helfen?
    LG


    Edit:
    Ich warte...
    Trotzdem danke für eure "zahlreichen und hilfreichen" Antworten.


    Edit 2:
    Ich habs geschafft da ganze mit einem anderen Script zu machen.

    JS:
    var fader;
                window.onload = init;
                function init(){
                    fader = new Fade('imgContainer', {
                        imgs: ['img/preview1/0.png', 'img/preview1/1.png', 'img/preview1/2.png', 'img/preview1/3.png', 'img/preview1/4.png', 'img/preview1/5.png', 'img/preview1/6.png', 'img/preview1/7.png']
                    });
                }


    HTML:
    <div class="navi">
    <a href="javascript:fader.go(1);" />
    <a href="javascript:fader.go(2);" />
    <a href="javascript:fader.go(3);" />
    <a href="javascript:fader.go(4);" />
    <a href="javascript:fader.go(5);" />
    <a href="javascript:fader.go(6);" />
    <a href="javascript:fader.go(7);" />
    <a href="javascript:fader.go(8);" />
    </div>
    
    <div id="imgContainer"></div>


    Bei den Links werden jeweils kleine Punkte angezeigt. Sie sollen sich jetzt umfärben, wenn man auf dieser Seite ist, indem sich die ID ändert. Weiß jemand, wie? Also irgendwie mit einer if-Struktur, und wenn z.B. die var fader 2 ist, soll der zweite Link die ID active erhalten.
    LG


    Beitrag zuletzt geändert: 20.6.2011 13:07:12 von squid
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!