Bernd: Javascript Gallery mit Prev / Next Button

Beitrag lesen

SELF-Forum

Javascript Gallery mit Prev / Next Button

Bernd
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln