jQuery Bildergalerie Probleme

[Sling]

Hey Leute ich habe folgendes vor,

man stelle ich seine Tabelle vor ober wir ein Bild angezeigt und darunter 8 kleine Vorschaubilder wenn ich nun eines dieser Thumbs an klicke soll da dem entsprechende große Bild im oberen Bereich angezeigt werden. Das ganz soll mit jQuery gemacht werden nur leider habe ich keien Ahnung wie ich das anstelle. Da auf der Seite mehrere solcher tabellen sein sollen und ich so wenig wie möglich script schreiben will um die seite gut in der Wartung zu halten.

Ich hoffe dieses bild lässt die Funktionsweisse etwas deutlicher erscheinen.



und noch der Aufbau der Tabelle.

<table class="Bildergalerie" border="1">
    <tr>
        <td colspan="4">
            <div id="bild">
                <img src="images/test/bild1.jpg" width="218" height="161">
            </div>
        </td>
    </tr>
    <tr>
        <td class="thumb1"><img src="images/test/bild1.jpg" width="49" height="36"></td>
        <td class="thumb2"><img src="images/test/bild2.jpg" width="49" height="36"></td>
        <td class="thumb"><img src="images/test/bild1.jpg" width="49" height="36"></td>
        <td class="thumb"><img src="images/test/bild2.jpg" width="49" height="36"></td>
    </tr>
</table>

Ich hoffe mir kann hier Jemand weiter helfen.

Danke im Voraus

Greatz Sling

 

[Myhar]

AW: jQuery Bildergalerie Probleme

Sorry, ein fertiges Skript schreibe ich dir sicher nicht...
Denkanstoß:
Du brauchst ein onclick Event in jQuery für die Bilder... Dann kannst du mittels parent().parent().previous().firstChild().firstChild().firstChild() [oder so ähnlich, aber die Befehle kann man schnell auf der jQuery HP nachsehen] das große Bild in der Tabelle ansprechen.
Eine andere Möglichkeit wäre, dass du jeder Tabelle eine andere ID gibst und dann anhand der das Bild veränderst.
Du siehst, es gibt also mehrere Möglichkeiten das zu realisieren... Welche für dich die angenehmste ist, musst du selbst entscheiden ;-)

L. G.

 

[fexx]

AW: jQuery Bildergalerie Probleme

Geht doch auch einfacher, wenn du das <img> im #bild <div> direkt ansprichst und einfach die src wechselst.

So ca:

$('.thumb').click(function(){
      var newImage = $(this).children('img').attr('src');
      $('#bild img').attr('src', newImage);
});

http://jsfiddle.net/qXjCw/

// Edit #2: Ob das jetzt schön ist, ist ne andere Sache

 

[Myhar]

AW: jQuery Bildergalerie Probleme

Deine Lösung ist schön und gut und auch vollkommen richtig für den von ihm geposteten Code. Jedoch hat er davon gesprochen, mehrere Tabellen auf einer Seite einzubauen, da kann man keine hardcodierte ID verwenden (Diese darf ja schließlich nur einmal pro Seite vorkommen)
Das heißt, er muss sich die Ziel-ID irgendwoher holen...

L. G.

 

[lauffreak]

AW: jQuery Bildergalerie Probleme

Hi

Schau mal bei Stu Nicholls rein- da gibt es solche Lösungen mit reinem CSS

Grüße*lauffreak

 

[Myhar]

AW: jQuery Bildergalerie Probleme

Ich würde von der reinen CSS Lösung abraten, da diese mit CSS3 funktionieren und somit nicht in IE<9 nutzbar sind. Wenn diese Besuchergruppe jedoch ausgeschlossen werden kann, dann kann man das natürlich so umsetzen.

 

[Sling]

AW: jQuery Bildergalerie Probleme

Ich danke euch erstmal für eure Rattschläge.

Ich habe mir jetzt folgende Lösung überlegt und habe dabei aber immer noch ein Problem. Ich würde es folgender maßen lösen.

Table anlegen mit einer ID z.B. Bildergalerie1 die "td" elemente in dieser Tabele würden dann classen bekommen .thumb1 - .thumb8. Dann würde ich immer nur beim onclick die sr austauschen.

Quasi so:

$(".thumb2").click(function(){$("#bild1").attr('src', 'images/test/bild2.jpg')});

Mein Problem dabei ist jetzt wie spreche ich die Klasse thumb1 in der tabelle mit der ID Bildergalerie1an im jQuery.

Ich habe es mit .next() und mit $("#Bildergalerie > tr > td.thumb1") versucht aber das Element regaiert dann nicht mehr auf den Klick.

WIe komme sage ich also nun wenn klick auf thumb1 in id Bildergaleri1 dann tausche die src.

Greatz Sling

 

[Myhar]

AW: jQuery Bildergalerie Probleme

Du hast kein div mit der ID Bildergalerie, also kann das doch gar nicht funktionieren.
Eine Frage zu deiner Lösung, wie machst du das im JS wenn du mehrere Tabellen hast? Willst du da abhängig von den Tabellen die Funktion aufrufen?
Da würde es sich anbieten, zuerst die Anzahl der Elemente rauszulesen und dann mit einer for() oder while() Schleife die einzelnen Elemente abzuarbeiten.

L. G.

 

[Sling]

AW: jQuery Bildergalerie Probleme

SO ich danke euch erst mal für eure Hilfe ihr habt mir den richtigen Anstoss geben können. SOmit habe ich das ganze jetzt mit einer Whileschleife gelöst die hochzählt wieviele gallerien es gibt und dann hänge ich den zähler immer an die ID's. Die Lösung werde ich heir noch Posten.

Nun habe ich ein anderes Problem ich stehe irgend wie mit der Vererbung auf Kriegsfuss glaube ich.

<div class="Partnerbox">
    <div class="bild">
        <img src="images/partner/partner02_KS.jpg" width="183" height="106" alt="Logo Partner 02 KS" />
    </div>
    <div class="link">#hier kommt der Link</div>
</div>

Das ist ein Logo wenn ich nun dort drüber fahre soll sich die Klasse "bild" nach links verschieben und beim Mouseout wieder zurück.

$(".Partnerbox").mouseover(function(){
                    $(this).next("img").animate({
                        marginLeft: "150px"
                      }, 1000 );
                return false;
                });

Ich habe jetzt dieses Code aber es funktioniert einfach nicht wieso? Eigentlich will ich mit dem Code sagen wenn Maus die Partnerbox betritt. Dann soll in diesem element "this" das nächste ".next" bild "img" einen -15opx animierten Margin nach links bekommen. WIe drücke ich das richtig aus? Irgendwas scheint ja falsch zu sein.

Mit besten Dank

Greatz Sling