• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie bei Klick auf Bild in Slideshow neues Bild in DIV laden?

Status
Für weitere Antworten geschlossen.
T

tuningflex

Neues Mitglied
Hi,


also ich habe mir eine kleine Slideshow in meine Website eingebaut.
Um genau zu sein diese hier:

iCarousel - Simple news ticker

Die Vorschaubilder habe ich teils schon durch meine eigenen ersetzt und das Teil läuft!

Was habe ich jetzt damit vor!?

Nun ich möchte, dass bei einem Klick auf eines der Vorschaubilder in der Slideshow das jeweilige Bild in einem separaten DIV Tag geladen wird.
Also bei "onklick" auf eines der Bilder öffnet sich dann das "gleiche" Bild natürlich in viel viel höherer Auflösung in einem DIV Tag, den ich via CSS an einer beliebigen Stelle positionieren kann.

Leider gelingt mir das nach vielen Versuchen einfach nicht und ich habe auch noch nicht so viel Ahnung von JS. Aber man lernt hier im Forum schnell dazu :razz:


Hier mal mein Codeauszug:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<link href="index.php-Dateien/template_css.css" rel="stylesheet" type="text/css">
</head>


<script type="text/javascript">

window.addEvent("domready", function() {
    //new Accordion($$(".accordion_toggler"), $$(".accordion_content"));

    dp.SyntaxHighlighter.HighlightAll("usage");

    new iCarousel("example_3_content", {
        idPrevious: "example_3_previous",
        idNext: "example_3_next",
        idToggle: "undefined",
        item: {
            klass: "example_3_item",
            size: 86
        },
        animation: {
            duration: 250,
            amount: 4
        }
    });
});
    
        </script>
    <link href="example3.asp-Dateien/this_002.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
<div id="container_bd">
            
            
  
  
  <dl id="accordionExample" class="accordion">
     
    <dd class="accordion_content">
      <br />
        
      <div id="example_3">
        <ul id="example_3_content">
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/1.jpg" alt="flower 1" width="64" height="64" /></a></li>

          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/2.jpg" alt="flower 2" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/3.jpg" alt="flower 3" width="64" height="64" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/4.jpg" alt="flower 4" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/5.jpg" alt="flower 5" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/6.jpg" alt="flower 6" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/7.jpg" alt="flower 7" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/8.jpg" alt="flower 8" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/9.jpg" alt="flower 9" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/A.jpg" alt="flower A" /></a></li>

    

          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/K.jpg" alt="flower K" /></a></li>
          </ul>
        <div id="example_3_frame">
          <img src="example3.asp-Dateien/ex3_previous.png" alt="move previous" width="20" height="86" id="example_3_previous" />
          <img src="example3.asp-Dateien/ex3_next.png" alt="move next" width="20" height="86" id="example_3_next" />
          </div>
        </div>
      <br />
    </dd>

     
  </dl>
  </form>
            
            
  </div>
      <div id="container_ft">
                
          <ul>
              <li></li>
              <li></li>
          </ul>
      </div>

<div class="containerimage"></div>

</body></html>


Jetzt habe ich z.B. diesen DIV-Tag angelegt:

"<div class="containerimage"></div>"

Ich möchte, dass das Bild hier drin geladen wird, sobald man auf das passende Vorschaubild in der Slideshow klickt!


Ich hoffe das ist nicht allzu schwer, vielen Dank!
 
Du musst zunächst einen Click handler auf alle Links legen.
Dafür hangelst du dich in DOM erst mal runter, bis du weisst dass nur noch Solche Slideshow Links mit den Bildern kommen. Das sollte eindeutig in der Liste example_3_content sein.
Heisst also:
Code: 
var picList = document.getElementById("example_3_content");
// alle Links innerhalb von 
var slideshowLinks = picList.getElementsByTagName("a");
// Nun in einer Schleife alle Links mit einem event belegen
for(var i=0; i < slideshowLinks.length; i++) {
  slideshowLinks[i].onclick = meineFunktion;
}

function meineFunktion() {
  // Diese Funktion wird von dem Eventhandler aufgerufen. Somit bezieht sich this, auf das a Element.
  // Deine Aufgabe ist es nun das Image zu holen und die src auszulesen. Damit kannst du dann in deinem Div ein neues Image erstellen.
}

Ich denke mal die Vorgehensweise ist klar :)
Habe den ersten Schritt in die Richtung getan. Alles weitere liegt an dir ;)
 
Hey super, Danke Gilles!

Ich denke das wird laufen. Hoffe es war nicht zu viel Mühe. Hier kann man echt dazulernen! :)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben