JQ Pfad

[michey]

Hallo

Versuche eine Cycle Gallery mit einem Vorschaubild zu erweitern, das auf click+hover der Navigationsbuttons erscheinen soll.
Online Beispiel ist hier.
Mit meinem Script gelingt es mir aber nur immer das erste Vorschaubild anzuzeigen/zu holen.
Wahrscheinlich müsste ich die Kindeskinder des div gallery in Schleife durchlaufen können um das entsprechende Vorschaubild anzuzeigen.
Aber wie mache ich das bloss?

Das Ganze sieht bisher so aus:

PHP-Code:

$('#pager a').click(function(evt) {
        
        //path to new preview
       var imgPath = $('#gallery a').attr('href');
                
        //get reference to old preview
       var oldPrev = $('#preview img'); 
    
        //create HTML for new image
       var  newPrev = $('<img src="' + imgPath +'">');
                          
        //make new image invisible
       newPrev.hide();             
                          
        //add to the #photo div
        $('#preview').prepend(newPrev);                                       
                      
       //fade in new image
        newPrev.fadeIn(850);             
            
       //fade out old Prev and remove from DOM                
        oldPrev.fadeOut(850,function(){
        $(this).remove();
                         });
         
    }); // end click 


HTML:

PHP-Code:

<div id="gallery">
    <div><a href="images/mid/blue.jpg"></a><img src="images/large/blue.jpg" width="400" height="300" alt="Blue"><p class="credit">Photo by Alin Nan</p></div>
    <div><a href="images/mid/yellow.jpg"></a><img src="images/large/milk.jpg" width="275" height="432" alt="Milk Fruit Explosion"><p class="credit">Photo by David Kitchenham</p></div>
    <div><a href="images/mid/green.jpg"></a><img src="images/large/fan.jpg" width="300" height="400" alt="Fan"><p class="credit">Photo by Jeltovski</p></div>
    <div><a href="images/mid/orange.jpg"></a><img src="images/large/red.jpg" width="400" height="300" alt="Red"><p class="credit">Photos by Alin Nan</p></div>
    <div><a href="images/mid/purple.jpg"></a><img src="images/large/weight.jpg" width="275" height="414" alt="Pink weight"><p class="credit">Photo by David Pattee</p></div>
  </div>
<div id="preview"></div> 


Damit bekomme ich aber halt immer nur das hier=><a href="images/mid/blue.jpg"></a>, was das besagte erste Vorschaubild ist.

Wäre nett wenn mir jemand dabei helfen könnte.
Vielen Dank im Voraus.

[Nicmare]

Irgendwie habe ich noch nicht ganz gecheckt was du machen willst. Wenn man mit der Maus über die Navi fährt, soll im kleinen Div das Bild als Vorschau angezeigt werden? Weil bei deinem Beispiellink scheint das garnicht zu funktionieren?!

[michey]

Hi

Habe es erstmal nur mit einer click-Funktion versucht, aber es geht vor allem darum mal überhaupt die entsprechenden Vorschaubilder korrekt angezeigt zu bekommen, das erste natürlich schon beim Laden der Seite und nicht erst beim einem Mouseevent.

[michey]

PHP-Code:

$('#gallery a').each(function() {
             imgPath = $(this).attr('href');
        }); 


das scheint immerhin die Bilder zu durchlaufen, es zeigt jetzt nämlich das letzte Bild der Reihe an.
Aber eben auch immer nur das...
Also immer noch das gleiche Problem, wie komme ich zum Bild das dem jeweils ausgewählten Button entspricht?

[Nicmare]

em, wozu jetztt eigentlich each?
mach doch einfach

PHP-Code:

$('#gallery a').click(function(e) { 
    e.preventDefault();
    var previmg = $(this).next();
    $("#preview").html(previmg)
}); 


[michey]

Das mit each war ein Versuch die Bilder zu durchlaufen.
Der click erfolgt nicht auf "gallery a" sondern auf "pager a"(Buttons).
Das ist ja bei meinem derzeitigen Wissenstand das verzwickte.

[Nicmare]

guck dir mal das jquery cycle plugin an. da gibt es diverse demonstrationen wie man es einsetzen kann. eines meiner lieblingsplugins für jquery

[michey]

Das ist ja das Cycle Plugin, was ich hier benutze.
Wollte eben nur die Version mit den Navibuttons um ein Vorschaubild erweitern.
Habe noch ein paar Ideen wie es gehen könnte.
Vielen Dank für die 'Anteilnahme' melde dann ein evtl. Erfolgserlebnis.