Aktives Bild markieren

[Saturnus]

Hallo

Ich hab eine Bildergalerie mit Thumbnails und einer Grossansicht. Als Navigation kann man entweder auf die Thumbnails klicken oder auf den Vor-und Zurück- Button.

Klickt man auf ein Thumbnail wird dieses markiert:

<script type="text/javascript">                
               var ImageSelector = function() {
                  var imgs = null;
                  var selImg = null;
                  
                  return {
                     addImages: function(container) {
                        imgs = container.getElementsByTagName("img");
                        for(var i = 0, len = imgs.length; i < len; i++) {
                           var img = imgs[i];
                           img.className = "thumbs";
                           img.onclick = function()  {
                              if(selImg)   {
                                 selImg.className = "thumbs";
                              }
                              this.className = "thumbsSel";
                              selImg = this;
                           };
                        }
                     }
                  };
               }();
              
              </script>

<script type="text/javascript">
               
                  var div = document.getElementById("layerShowThumbs");
                  ImageSelector.addImages(div);
              
              </script>

Für die Vor-und Zurück - Navigation nutze ich das:

<script type="text/javascript">
/*JS für Bild Vor- und Zurück - Navigation*/
var bildIndex  = 0;
bilder   = new Array;
bildname = new Array;
<?php 
$i = 0;

while($pics = mysql_fetch_object($resultJS))
{
?>
bilder[<?php echo $i;?>] = "news/upload/bilder/<?php echo $pics->bild;?>";
bildname[<?php echo $i;?>] = "<?php echo $pics->bildtitel;?>";
<?php
++$i;
}
?>
	
	function vor()
	{
	bildIndex++;
	if (bildIndex == bilder.length) bildIndex = 0; 		
	document.getElementById("bild1").src = bilder[bildIndex]; 
    Bildname=bildname[bildIndex];
    document.getElementById('bild_titel').innerHTML=Bildname;
	}
		
	function zurueck()
	{
	bildIndex--;
	if (bildIndex < 0) bildIndex = bilder.length-1;
	document.getElementById("bild1").src = bilder[bildIndex];
	Bildname=bildname[bildIndex];
    document.getElementById('bild_titel').innerHTML=Bildname;
	}
		
</script>

Zur besseren Orientierung sollte das jeweilige Thumbnail, das in der Grossansicht erscheint nun auch da markiert sein.
Steh da grad auf dem Schlauch..
Jemand ein Tipp für mich?

 

[THEJS]

Hey!

Ich versteh deine eigentliche Frage nicht.

greez
THEJS

 

[Saturnus]

Es gibt in WWW ja viele Bildergalerien. Bsp:
In der Mitte ist die Grossansicht und oben oder unten sind die Thumbnails angeordnet. Zusätzlich gibt es links und rechts davon ein "weiter", resp. "zurück" Button. Wenn nun mit diesen vor- und zurück - Buttons navigiert wird, soll das betroffene Thumbnail-Bild jeweils markiert sein (z.B. umrandet).
Ich hoffe, es ist jetzt verständlicher..

Ich suche nach einer Möglichkeit, meinen Code entsprechend zu ergänzen und komm da grad nicht weiter..

Ein Bespiel gibts hier:
http://www.ajaxschmiede.de/demos/slideshow/
Klick auf weiter dann "schwebt" der Rahmen immer zum entsprechenden Thumnail.
Mir würde es genügen, wenn das Bild einfach einen Rahmen bekommt.

 

[THEJS]

Hey!

Sorry, für die späte Antwort:

function vor()
{
    document.getElementById('thumb_' + bildIndex).style.border = "0px";
    bildIndex++;
    document.getElementById('thumb_' + bildIndex).style.border = "1px solid #000";
    ...
}
        
function zurueck()
{
    document.getElementById('thumb_' + bildIndex).style.border = "0px";
    bildIndex--;
    document.getElementById('thumb_' + bildIndex).style.border = "1px solid #000";
    if (bildIndex < 0) bildIndex = bilder.length-1;
    ...
}

Habs nicht getestet, sollte aber funktionieren, wenn du den Thumbnails diese IDs gibst, bzw wenn die schon eine ID haben, im Code ersetzen.

greez
THEJS

 

[Saturnus]

Kein Problem...Danke für die Antwort und deine Hilfe!