toggle geht nicht wieder zurück

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • toggle geht nicht wieder zurück

    hallo,

    ich steh gerade auf dem schlauch. ich möchte ein paar bilder für meine kleine bildergalerie mit hilfe von javascript erscheinen und verschwinden lassen. mit dem erscheinen klappt es soweit ganz gut, nur mit dem verschwinden nicht. das script dazu hatte ich gefunden und etwas umgeschrieben.

    beim anklicken des thumbnails wird ein bild von -4000px auf 0px geholt (es erscheint). beim nochmaligen klicken "verschwindet" es wieder auf -4000px.
    jetzt würde ich aber gern, dass wenn ich auf den nächste thumbnail klicke, das dann das vorher erschiene blid wieder auf -4000px verschoben wird, was so erst einmal nict tut, sondern erst auf klick.
    ich hatte schon versucht ein zweites "toggleDiv1" zu erstellen, welches sagt, gehe auf -4000px, leider funktioniert die verbindung nicht.
    es müsste bei jeden klick auf ein bild automatisch alle anderen bilder wieder auf -400px verschoben werden.
    ich bekomme es einfach nicht hin... :(

    habt ihr vielleicht einen vorschlag?

    Quellcode

    1. <script type="text/javascript">
    2. function toggleDiv( elemID )
    3. {
    4. var elem = document.getElementById( elemID );
    5. if( elem.style.position != 'absolute' )
    6. {
    7. elem.style.position = 'absolute';
    8. elem.style.left = '-4000px';
    9. }
    10. else
    11. {
    12. elem.style.position = 'relative';
    13. elem.style.left = '0px';
    14. }
    15. }
    16. </script>
    Alles anzeigen



    Quellcode

    1. <!-- thumbnail -->
    2. <a href="javascript:toggleDiv('toShow01');" title="Test"><img src="thumb_Test_01.jpg" width="180" alt="Hochzeit" border="0" /></a><p>
    3. <a href="javascript:toggleDiv('toShow02');" title="Test"><img src="thumb_Test_01.jpg" width="180" alt="Hochzeit" border="0" /></a><p>
    4. <a href="javascript:toggleDiv('toShow03');" title="Test"><img src="thumb_Test_01.jpg" width="180" alt="Hochzeit" border="0" /></a><p>
    6. <!-- bild immer ander selben stelle platziert -->
    7. <div id="Bild"><div style="position:relative; left: -4000px;" id="toShow01" class="Bild01"><img src="test_01.jpg" height="519px" alt="Hochzeit" /></div></div>
    8. <div id="Bild"><div style="position:relative; left: -4000px;" id="toShow02" class="Bild01"><img src="test_01.jpg" height="519px" alt="Hochzeit" /></div></div>
    9. <div id="Bild"><div style="position:relative; left: -4000px;" id="toShow03" class="Bild01"><img src="test_01.jpg" height="519px" alt="Hochzeit" /></div></div>

  • Ruf doch eine Methode auf da wenn du auf das andere Bild klickst ein existeriendes auf -4000 setzt das angeklickte auf 0. sprich du sett dir sozusagen irgendwo einen merker und wenn ein bild via klicken auf das 0-Bild verkleinert wird, dann setzt du ihn False, wenn eins geöffnet wird also auf das 0-Bild vergrößert wird setzt du den Merker auf True.

    Wäre mal so meine Idee.

    mfg maxbrauner
    Rechtschreibfehler sind ein Gimmick meiner TAstatur

  • ja genau so was suche ich, kenne mich aber mit javascript nicht wirklich gut aus.
    das ganze ist für eine hochzeitseite meines kumpels...

    im prinzip müsste ich das ganz wohl nur umdrehen (siehe script) und einen andere zuordnung vergeben z.b. statt "toggleDiv" "toggleDiv1" oder so was.
    das ganze dann mit dem bild verbunden:

    Quellcode

    1. <a href="javascript:toggleDiv1('toShow01a');" title="Test"><img src="thumb_Test_01.jpg" width="180" alt="Hochzeit" border="0" /></a><p>
    3. <div id="Bild"><div style="position:relative; left: 0px;" id="toShow01a" class="Bild01"><img src="test_01.jpg" height="519px" alt="Hochzeit" /></div></div>


    liege ich richtig?

    aber wie muss ichs dem button sagen "öffne bild1, schließe aber gleichzeitig "bild2, ..3, ..4" usw."?

    Quellcode

    1. <script type="text/javascript">
    2. function toggleDiv( elemID )
    3. {
    4. var elem = document.getElementById( elemID );
    5. if( elem.style.position != 'absolute' )
    6. {
    7. elem.style.position = 'absolute';
    8. elem.style.left = '0px';
    9. }
    10. else
    11. {
    12. elem.style.position = 'relative';
    13. elem.style.left = '-4000px';
    14. }
    15. }
    16. </script>
    Alles anzeigen

  • ja, neeee. Ganz einfach.
    Hier die Komplettösung. Es geht davon aus, dass folgende Divs existieren: <div id="elem1">, <div id="elem2">, <div id="elem3">.

    Quellcode

    1. function toggleDiv( elemID ) {
    2. var l = ['elem1', 'elem2', 'elem3'];
    3. for(var i=0; i<l.length; i++) {
    4. document.getElementById(l[i]).style.display = elemID == l[i] ? 'block' : 'none';
    5. }
    6. }

  • hey danke.
    ich habe jetzt folgendes einegeben:

    Quellcode

    1. <script type="text/javascript">
    2. function toggleDivOL( elemID )
    3. {
    4. var elem = document.getElementById( elemID );
    5. if( elem.style.position != 'absolute' )
    6. {
    7. elem.style.position = 'absolute';
    8. elem.style.left = '0px';
    9. }
    10. else
    11. {
    12. elem.style.position = 'relative';
    13. elem.style.left = '-4000px';
    14. }
    15. }
    16. </script>
    19. <script type="text/javascript">
    21. function toggleDiv( elemID ) {
    22. var l = ['toShow01', 'toShow02', 'toShow03', 'toShow04', 'toShow05', 'toShow06', 'toShow07', 'toShow08', 'toShow09', 'toShow10', 'toShow11', 'toShow12', 'toShow13', 'toShow14', 'toShow15', 'toShow16'];
    23. for(var i=0; i<l.length; i++) {
    24. document.getElementById(l[i]).style.display = elemID == l[i] ? 'block' : 'none';
    25. }
    26. }
    28. </script>
    Alles anzeigen


    Quellcode

    1. <a href="javascript:toggleDivOL('toShow01');" title="Hochzeit"><img src="Hochzeit/thumb_Hochzeit_01.jpg" width="180" alt="Hochzeit" border="0" /></a><p>


    'toShow01', toShow02',... ist dabei die elemnet id der einzelnen bilder. leider klappt es noch nicht. muss was falsch gemacht haben.
    müsste es nicht 'var elem =' und nicht 'var l=' heißen (funktioniert aber auch nicht)?

  • ich hatte gestern versucht den Fehler zu finden, leider ohne Erfolg. :(
    Momentan wird die richtige Position meines Scroller erst nach dem Neuladen der Website angezeigt. Das Verschwinden funktioniert gar nicht mehr. :(

    Scheinbar ist wirklich irgendwo ein <div> nicht geschlossen worden. die .html hatte ich mit der "Web Developer Toolbar" von Firefox validieren lassen.
    Insgesamt 40 Fehler kamen dadurch zum Vorschein. Bei den ersten war nicht klar warum sie überhaupt angezeit wurden, ich denke aber das es was mit dem <div> zu tun hat. Der Rest der Fehler basierte meiner Meinung nach auf dem ersten.
    Ab Zeile 203 wird auch im Dreamweaver im Code alles Blau angezeit, was ebenfalls auf einen Fehler hindeutet. Ich finde aber irgendwie nichts was aus meiner Sicht falsch wäre.

    Köntet ihr einmal im Quelltext nachschauen, ob ihr etwas findet? Wahrscheinlich ist es wirklich nur ein <div>.
    Hier ist die Seite: laco1.lima-city.de

  • hallo das toggle problem habe ich jetzt anders gelöst

    Quellcode

    1. <script type="text/javascript">
    2. <!--
    3. // Image-Preloader
    4. image1 = new Image();
    5. image1.src = "fotos/hochzeit_01.jpg";
    6. image2 = new Image();
    7. image2.src = "fotos/hochzeit_02.jpg";
    8. image3 = new Image();
    9. image3.src = "fotos/hochzeit_03.jpg";
    10. image4 = new Image();
    11. image4.src = "fotos/hochzeit_04.jpg";
    12. image5 = new Image();
    13. image5.src = "fotos/hochzeit_05.jpg";
    14. image6 = new Image();
    15. image6.src = "fotos/hochzeit_06.jpg";
    16. image7 = new Image();
    17. image7.src = "fotos/hochzeit_07.jpg";
    19. // swapImage
    20. function swapImage(imgName,swapImg)
    21. {
    22. document.images[imgName].src=swapImg;
    23. }
    26. <ul>
    27. <li><a href="#" onclick="swapImage('start','fotos/hochzeit_01.jpg')"><img src="fotos/hochzeit_01.jpg" width="180" alt="load Hochzeit_01" /></a></li>
    28. <li><a href="#" onclick="swapImage('start','fotos/hochzeit_02.jpg')"><img src="fotos/hochzeit_02.jpg" width="180" alt="load Hochzeit_02" /></a></li>
    29. <li><a href="#" onclick="swapImage('start','fotos/hochzeit_03.jpg')"><img src="fotos/hochzeit_03.jpg" width="180" alt="load Hochzeit_03" /></a></li>
    30. <li><a href="#" onclick="swapImage('start','fotos/hochzeit_04.jpg')"><img src="fotos/hochzeit_04.jpg" width="180" alt="load Hochzeit_04" /></a></li>
    31. <li><a href="#" onclick="swapImage('start','fotos/hochzeit_05.jpg')"><img src="fotos/hochzeit_05.jpg" width="180" alt="load Hochzeit_05" /></a></li>
    32. <li><a href="#" onclick="swapImage('start','fotos/hochzeit_06.jpg')"><img src="fotos/hochzeit_06.jpg" width="180" alt="load Hochzeit_06" /></a></li>
    33. <li><a href="#" onclick="swapImage('start','fotos/hochzeit_07.jpg')"><img src="fotos/hochzeit_07.jpg" width="180" alt="load Hochzeit_07" /></a></li>
    34. </ul>
    Alles anzeigen



    jetzt ist aber ein neues problem entstanden, auf verschieden browsern wird die scrolleiste anfangs in der oberen rechten ecke angezeigt. dazu gehören:
    netscape 9.0b3
    safari 4.04
    opera 10.10
    IE kann ich leider nur den 5.2 antesten, ist aber nicht wirklich sinnvoll

    lädt man die seite neu (apfel R), wird die scrollleiste ordentlich angezeigt: hier

    gibt es eine möglichkeit dies zu verhindern?