Forum

jQuery Bildergalerie Probleme

Erstellt von Sling, 11.05.2011.



  1. Sling

    Sling Nicht mehr ganz neu hier

    Dabei seit:
    01.05.2007
    Beiträge:
    140
    Geschlecht:
    männlich
    jQuery Bildergalerie Probleme
    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.

    [​IMG]

    und noch der Aufbau der Tabelle.
    HTML:
    1.  
    2. <table class="Bildergalerie" border="1">
    3.     <tr>
    4.         <td colspan="4">
    5.             <div id="bild">
    6.                 <img src="images/test/bild1.jpg" width="218" height="161">
    7.             </div>
    8.         </td>
    9.     </tr>
    10.     <tr>
    11.         <td class="thumb1"><img src="images/test/bild1.jpg" width="49" height="36"></td>
    12.         <td class="thumb2"><img src="images/test/bild2.jpg" width="49" height="36"></td>
    13.         <td class="thumb"><img src="images/test/bild1.jpg" width="49" height="36"></td>
    14.         <td class="thumb"><img src="images/test/bild2.jpg" width="49" height="36"></td>
    15.     </tr>
    16.  
    Ich hoffe mir kann hier Jemand weiter helfen.

    Danke im Voraus

    Greatz Sling
     
    #1      
  2. Myhar

    Myhar Aktives Mitglied

    Dabei seit:
    01.11.2007
    Beiträge:
    1.855
    Geschlecht:
    männlich
    Ort:
    Ö
    jQuery Bildergalerie Probleme
    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.
     
    #2      
  3. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    jQuery Bildergalerie Probleme
    AW: jQuery Bildergalerie Probleme

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

    So ca:
    Code (Text):
    1.  
    2. $('.thumb').click(function(){
    3.       var newImage = $(this).children('img').attr('src');
    4.       $('#bild img').attr('src', newImage);
    5. });
    6.  
    http://jsfiddle.net/qXjCw/

    // Edit #2: Ob das jetzt schön ist, ist ne andere Sache :)
     
    Zuletzt bearbeitet: 11.05.2011
    #3      
  4. Myhar

    Myhar Aktives Mitglied

    Dabei seit:
    01.11.2007
    Beiträge:
    1.855
    Geschlecht:
    männlich
    Ort:
    Ö
    jQuery Bildergalerie Probleme
    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.
     
    #4      
  5. lauffreak

    lauffreak FotoAnfänger

    Dabei seit:
    03.11.2007
    Beiträge:
    2.209
    Geschlecht:
    weiblich
    Ort:
    Kiel
    Software:
    CS3
    Kameratyp:
    D200
    jQuery Bildergalerie Probleme
    AW: jQuery Bildergalerie Probleme

    Hi

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

    Grüße*lauffreak
     
    #5      
  6. Myhar

    Myhar Aktives Mitglied

    Dabei seit:
    01.11.2007
    Beiträge:
    1.855
    Geschlecht:
    männlich
    Ort:
    Ö
    jQuery Bildergalerie Probleme
    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.
     
    #6      
  7. Sling

    Sling Nicht mehr ganz neu hier

    Dabei seit:
    01.05.2007
    Beiträge:
    140
    Geschlecht:
    männlich
    jQuery Bildergalerie Probleme
    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:
    HTML:
    1.  
    2. $(".thumb2").click(function(){$("#bild1").attr('src', 'images/test/bild2.jpg')});
    3.  
    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
     
    #7      
  8. Myhar

    Myhar Aktives Mitglied

    Dabei seit:
    01.11.2007
    Beiträge:
    1.855
    Geschlecht:
    männlich
    Ort:
    Ö
    jQuery Bildergalerie Probleme
    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.
     
    #8      
  9. Sling

    Sling Nicht mehr ganz neu hier

    Dabei seit:
    01.05.2007
    Beiträge:
    140
    Geschlecht:
    männlich
    jQuery Bildergalerie Probleme
    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.

    HTML:
    1.  
    2. <div class="Partnerbox">
    3.     <div class="bild">
    4.         <img src="images/partner/partner02_KS.jpg" width="183" height="106" alt="Logo Partner 02 KS" />
    5.     </div>
    6.     <div class="link">#hier kommt der Link</div>
    7. </div>
    8.  
    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.

    HTML:
    1.  
    2. $(".Partnerbox").mouseover(function(){
    3.                     $(this).next("img").animate({
    4.                         marginLeft: "150px"
    5.                       }, 1000 );
    6.                 return false;
    7.                 });
    8.  
    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
     
    #9      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×