JQuery Slideshow

[phzu]

Hallo!

Ich bin heute schon mehere Stunden lang damit beschäftigt um mit JQuery eine simple Slideshow zu realisieren.

Prinzipiell soll sie wie diese funktionieren...

The Artwork of Jim Gunardson

Allerdings will ich immer nur ein einzelnes Bild (ohne Text, Infos,...) darstellen und auch keine vergrößerte Vorschau bei einem Klick auf das Bild.

Bin bisher soweit, dass ich Bilder nach rechts und links schieben kann, dazu gibt es auch viele Tutorials und Beispiele. Was ich aber will ist, dass es nach dem letzten Bild nicht einfach kein weiter mehr gibt, sondern wieder mit dem Ersten beginnt.

Ich will auch keine zusätzlichen Anzeigen auf welchem Bild ich mich befinde. (Punkte, Zahlen,....)

Kann mir jemand weiterhelfen?
Wäre auch über einen Lösungsansatz sehr erfreut!

lg Philip

 

[Sempervivum]

Hallo Philip,
es gibt so viele vorgefertigte Slider und Slideshows, dass sich das Selberprogrammieren i. allg. nicht lohnt. Schau dir z. B. mal diesen an:
jQuery content slider carousel image slideshow | bxSlider
Hier gibt es noch eine große Sammlung, wo man sich allerdings erstmal durchwühlen muss:
70+ Awesome jQuery Slider Plugins
Viele Grüße - Ulrich

 

[Tronjer]

Dafür sollte es fertige Plugins für jQuery geben. Ansonsten wäre der Lösungsansatz für eine solche "Endlosschleife", die Bilder in ein Array zu schreiben und den Iterator wieder zurückzusetzen, wenn das letzte Element im Array erreicht ist.

Pseudocode:

var bilder = []

for (i = 0; i <= bilder.length; i++)  {
    // tu etwas

    if (i == bilder.length) {
        i = 0;
    }
}

 

[phzu]

Ja ich weiß eh dass sich selberprogrammieren bei solchen Sachen nicht wirklich lohnt. :)

Aber ich will ja nicht nur zum Ergebnis kommen, sondern dabei auch was lernen. Darum mache ich solche kleinen Sachen gerne selbst...

Habe jetzt gerade (aus 3 verschiedenen Slideshows) was zusammengebastelt. Ich habe einfach per JQuery am anfang und am Ende das entsprechende Bild im HTML Code anghängt (geklont). Somit sind also das erste und letzte Bild doppelt. Nachdem jetzt zum letzten Bild gewechselt wurde, setze ich den Zähler auf null.

Prinzipiell eh wie in Tronjer's Pseudocode.

Vielen Dank für die Anregungen!

P.S. Ist das eine korrekte Ausführung, oder sollte man es so nicht machen? Habe nämlich bedenken dass es zu Problemen führen kann wenn das Body-Element z.B. 6000px breit wird....

 

[phzu]

Ich bin mit meinem Code auf ein Problem gestossen...

Jetzt wird wie gewollt die Position wieder auf 0 gesetzt sobald ich das Bild am Ende erreicht habe (selbes wie das erste Bild).
Wie kann ich allerdings vermeiden, dass beim nächsten bewegen auf die Position 0 gescrollt wird?

EDIT: Habe das Problem noch loesen koennen!

Mein HTML-Code:

<div id="content">
    <ul class="slides">
     <?php
           $dir = 'images/';
           // open specified directory
           $dirHandle = opendir($dir);
           $count = -1;
           $returnstr = "";
           while ($file = readdir($dirHandle)) {
              if(!is_dir($file) && strpos($file, '.jpg')>0) {
                 $count++;
                 echo "<li><img class=\"slide\" src=\"http://www.html.de/images/".$file."\" /></li>";
              }
           } 
           echo $returnstr;
           closedir($dirHandle);
        ?>
    </ul>
</div>
<div class="control" id="next"></div>

Mein JQuery:

$(document).ready(function(){
    var currentPosition = 0;
    var slideWidth = 860;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    $("section#slideshow ul").css('width',slideWidth*numberOfSlides);

    $("section#slideshow ul").prepend($("ul li:last-child").clone().css("margin-left","-"+ slideWidth +"px"));
    $("section#slideshow div#content ul").append($("ul li:nth-child(2)").clone());
    $("section#slideshow div#content ul").css('width',(numberOfSlides+2)*slideWidth);    

    $('.control').bind('click', function(){
        currentPosition = ($(this).attr('id')=='next')
        ? currentPosition+1 : currentPosition-1;
        $('ul').animate({'marginLeft' : slideWidth*(-currentPosition)});
        if(currentPosition == -1){
            currentPosition = 1;
        }
        if(currentPosition == numberOfSlides+1)
        {
            currentPosition = 0;
        }
    });
});

Ich hoffe meine Frage versteht irgendjemand ;)