Javascript Gallery mit Prev / Next Button

[Bernd]

Hi,

ich möchte gern eine Art Gallery erzeugen, die aus drei div Containern besteht. Der linke div-Container beinhaltet den "<<" previous-Button, der rechte div-Container den ">>" next-Button und der div-Container "mitte" beinhaltet mehrere div-Container, die jeweils ein Bild und einen Text beinhalten.

Der mittlere div-Container hat u.a. die css-Eigenschaft overflow-y:hidden. Soweit wird auch alles bereits richtig dargestellt.

Jetzt möchte ich gern, dass beim ">>" Drücken die Images + Texte dargestellt werden, die bis jetzt nicht sichtbar sind; allerdings auch nur soviele, wie im div-Container "mitte" Platz finden (es dürfen keine Images abgeschnitten dargestellt werden).

  
<script type="text/javascript">  
function next(){  
var boxes = document.getElementsByClassName("imagecontainer");  
  
<!--  
  
wie kann ich per for-Schleife durch die im div-Container befindlichen Bilder durchlaufen und überprüfen ob diese sichtbar sind oder nicht.  
  
var shown=0;  
for(var i=0; i<boxes.length; i++)  
{  
   if(boxes[i].style.display != "none)  
   {  
      //erstes bild, welches dargestellt wird  
      //-> weitersuchen bis das erste bild auftaucht welches nicht  
      //mehr dargestellt wird  
  
      shown=1;  
   }  
   if(shown)  
   {  
     if(boxes[i].style.display == "none")  
     {  
       break;  
     }  
   }  
}  
  
boxes[i].style.display = "block";  
  
/*  
Frage: wie weiß ich, wieviele Bilder in meinem div-"mitte" dargestellt werden können?  
*/  
  
-->  
  
}  
</script>  
  

  
<div id = "links">  
<button type="button" class="button" onclick="prev()"><<</button>  
</div>  
<div id = "rechts">  
<button type="button" class="button" onclick="next()">>></button>  
</div>  
  
<div id = "mitte">  
  
<!-- #### erstes bild mit text --->  
<div class="imagecontainer" >  
<div>  
<img src="button2.png" alt="firstbutton" 				height="50" width="50">  
<span>firstbutton</span>  
</div>  
</div>  
  
<!-- #### zweites bild mit text -->  
<div class="imagecontainer" >  
<div>  
<img src="button2.png" alt="firstbutton" 				height="50" width="50">  
<span>secbutton</span>  
</div>  
</div>  
  
<!-- usw... -->  
  
</div>  
  

Ich hoffe ihr könnt mir weiterhelfen und wisst was ich gern machen würde.

Im Prinzip soll es danach so ähnlich wie auf dieser Webseite aussehen - nur das große Bild über der Leiste habe ich nicht.

http://www.ajaxshake.com/demo/EN/450/5de44b53/animated-javascript-slideshow-gallery-animatedjsslideshow.html

LG
Bernd

[ms88aut]

Hi,
ich hab sonen prototypen erst vor kurzem gebaut - ich paste dir hier einfach mal was ich geschrieben hab vielleicht hilft es dir weiter:

oben sind die divs (ein div außen beschränkt die sichtfläche zb 1000px und overflow: hidden, dann ein div drinnen mit der breite der summe der bilder).

Beim klicken auf den Link wird die Funktin move() aufgerufen welche dann die Bilder nach links schiebt und über DOM das linke Bild welches aus der Sichtfläche verschwindet entfernt und am Ende auf der rechten Seite wieder einfügt (wie Kreisel/Endlosschleife).

hier der Link:

http://pasteit.com/19309

lg