Einfache Bildergalerie - Problem

[toxictoon]

Hi Leute,

hab da ein Problem bei dem Ihr mir vll. weiterhelfen könnt.

Ich bin dabei eine kleine "Galerie" zu erstellen mit einem Hauptbild und 3 weiteren Bildern.

Da die Bilder von einem System durch Variablen erzeugt werden und somit keine fixen Namen haben kann ich das Hauptbild bzw. den dadurch erzeigten Platzhalter wie im folgendem Beispiel nicht mittels rel im Link der Thumbnails ansprechen.

Gibt es eine Möglichkeit das Javascript so umzuschreiben, dass dies nicht auf das Bild anspricht (rel="demo/bild1.jpg" sondern auf das SPAN mit der ID "bildgross" welche das Bild enthält?

 <div class="produktbilder">
     
            <div class="produktbild-gross">
            <span id="bildgross">
            <img src="bild1.jpg" width="800" height="600" alt=""/>
            </span>
            </div>
         
            <div class="produktbild-thumbs">
         
            <a href="#" rel="bild1.jpg" class="thumbnail">
            <img src="bild1.jpg" width="800" height="600" alt=""/>
            </a>
         
            <a href="#" rel="bild2.jpg" class="thumbnail">
            <img src="bild2.jpg" width="800" height="600" alt=""/>
            </a>
         
            <a href="#" rel="bild3.jpg" class="thumbnail">
            <img src="bild3.jpg" width="800" height="600" alt=""/>
            </a>
         
            <a href="#" rel="bild4.jpg" class="thumbnail">
            <img src="bild4.jpg" width="800" height="600" alt=""/>
            </a>

         
            </div>
     
        </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".thumbnail").click(function() {
var image = $(this).attr("rel");
$('#bildgross').hide();
$('#bildgross').fadeIn('slow');
$('#bildgross').html('<img src="' + image + '"/>');
return false;
    });
});
</script>

Wäre für eure Hilfe echt dankbar, da ich nun schon Stunden mittels Google nach einer Lösung gesucht habe aber nicht vorwärts komme :-/

 

[Myhar]

In deinem Javascript bindest du die click-Funktion auf Elemente mit der Klasse sls-thumb. Wo finden sich diese in deinem HTML-Code wieder?

 

[toxictoon]

Hi,
sorry, hab das falsche Codesnippet eigefügt, die Klasse im funktionierenden Demo ist thumbnail (habe ich gerade editiert.

 

[Myhar]

Und was meinst du mit "auf das Span ("bildgross") ansprechen"?
Dort ist ja nur ein Bild drinnen, du hast aber 3 kleine Bilder. Auch sollte das rel-Attribut nicht für einen Link verwendet werden, da ist das data-Attribut besser dafür geeignet.

 

[toxictoon]

Das obige Beispiel funktioniert soweit einwandfrei mit statischen Demo-Bildern.

Da ich aber keine Kontrolle über die Bildnamen haben werde (diese werden durch variablen ersetzt und dann vom System erzeugt) müsste ich dem Thumbnail sagen, erscheine nicht anstatt Bild1.jpg sondern erscheine in span class"bildgross"

Evtl. ist dann der Ansatz komplett verkehrt wie ich es gemacht habe?

 

[DyrusEU]

Wie mache ich einen Thread auf bitte Hilfe ?

 

[Myhar]

Ich verstehe deine Anforderung immer noch nicht. Du musst doch einfach nur deine Variablen statt den bild1.jpg in das (falsche) rel-Attribut schreiben. Oder möchtest du alle Thumbnails auf einmal groß anzeigen?

 

[toxictoon]

kann ich da eine variable ($#Bild.1#$) einfügen in das rel element?

 

[Myhar]

Das ist ein String, du kannst einfügen was du willst und es dann dementsprechend auswerten.