JavaScript-basierte Bildergalerie

D

DerTrin

Grünschnabel
Hi,
ich hab über Google diese Bildergalerie hier im Forum gefunden: *Klick*
Da dieses Thema schon geschlossen und etwas älter ist, hab ich jetzt ein Neues aufgemacht.

Das Script funktioniert eigentlich wunderbar, nur wollte ich es noch damit erweitern, dass beim Klick auf das Bild dieses größer wird, bzw in Originalgröße angezeigt wird. Somit muss sich auch noch ein Link ändern.
Ich hab das dann mal so versucht:

Code: 
<html>
<head>
<title>Bilder</title>
<script type="text/javascript">
var arrImg = new Array();
arrImg[0] = new Image();
arrImg[0].src = "Bildlink1.jpg";
arrImg[0].txt = "Beschreibung";
arrImg[0].href = "Bildlink1_groß.jpg";
arrImg[1] = new Image();
arrImg[1].src = "Bildlink2.jpg";
arrImg[1].txt = "Beschreibung";
arrImg[1].href = "Bildlink2_groß.jpg";
arrImg[2] = new Image();
arrImg[2].src = "Bildlink3.jpg";
arrImg[2].txt = "Beschreibung";
arrImg[2].href = "Bildlink3_groß.jpg";

function swapImage(imgName, intImg){
  document.getElementById(imgName+"_img").src = arrImg[intImg].src;
  document.getElementById(imgName+"_text").innerHTML = arrImg[intImg].txt;
  document.getElementById(imgName+"_link").href = arrImg[intImg].href;
}
</script>

<style type="text/css">
<!--
ul {
margin: 10px 0 0 0;
padding: 0;
}

li {
display: inline;
margin: 0 5px 0 0;
}

img {
	border: 2px solid #000;
}
-->
</style>
</head>

<body>
<h3>Galerie</h3>
<div class="imageBox">
  <span></span><a href="Bildlink1_groß.jpg" target="_blank" id="start_link"><img src="Bildlink1.jpg" alt="" id="start_img"></a>
</div>
<div id="start_text">Beschreibung</div>
<div id="galBox">
<ul>
  <li><a href="#" onClick="return swapImage('start', 0);"><img src="Bildlink1_klein.jpg" alt="lade..."></a></li>
  <li><a href="#" onClick="return swapImage('start', 1);"><img src="Bildlink2_klein.jpg" alt="lade..."></a></li>
  <li><a href="#" onClick="return swapImage('start', 2);"><img src="Bildlink3_klein.jpg" alt="lade..."></a></li>
</ul>
</div>
</body>
</html>

Im Firefox funktioniert das auch problemlos, nur im IE 8.0 geht dann gar nichts mehr.
Als Fehler meldet dieser: "Das Objekt unterstützt diese Aktion nicht."

Da ich mich mit JavaScript noch nicht so gut auskenne, finde ich den Fehler einfach nicht.
Ich hoffe mir kann einer helfen.

Gruß Trin
 
Moin,

das, was man mit new Image() erzeugt, ist nicht irgendein abstraktes Objekt, sondern ein Elementknoten <img>
Als solches besitzt dieser alle Eigenschaften eines <img>-Elementes, wozu nicht href und txt gehören(darauf bezieht sich auch die Fehlermeldung des IE). Missbrauche entweder andere reguläre Attribute eines <img> wie etwa title oder alt, oder speichere diese Daten in einer anderen Form innerhalb des Arrays.
 
So, jetzt hab ich schon wieder ein Problem mit der Galerie.
Wollte jetzt noch gerne neben dem Bild einen "Vor" Link einbauen, um zum nächsten bild zu gelangen.
Hab da jetzt mal so angefangen:

PHP: 
<html>
<head>
<title>Bilder</title>
<script type="text/javascript">
var arrImg = new Array();
arrImg[0] = new Image();
arrImg[0].src = "Bildlink1.jpg";
arrImg[0].alt = "Beschreibung";
arrImg[0].title = "Bildlink1_groß.jpg";
arrImg[0].target = "return swapImage('start', 1);";
arrImg[1] = new Image();
arrImg[1].src = "Bildlink2.jpg";
arrImg[1].alt = "Beschreibung";
arrImg[1].title = "Bildlink2_groß.jpg";
arrImg[1].target = "return swapImage('start', 2);";
arrImg[2] = new Image();
arrImg[2].src = "Bildlink3.jpg";
arrImg[2].alt = "Beschreibung";
arrImg[2].title = "Bildlink3_groß.jpg";
arrImg[2].target = "return swapImage('start', 0);";

function swapImage(imgName, intImg){
  document.getElementById(imgName+"_img").src = arrImg[intImg].src;
  document.getElementById(imgName+"_text").innerHTML = arrImg[intImg].alt;
  document.getElementById(imgName+"_link").href = arrImg[intImg].title;
  document.getElementById(imgName+"_vor").onClick = arrImg[intImg].target;
}
</script>
</head>

<body>
<h3>Galerie</h3>
<div class="imageBox">
  <a href="Bildlink1_groß.jpg" target="_blank" id="start_link"><img src="Bildlink1.jpg" alt="" id="start_img"></a>
  <a href="#" onClick="return swapImage('start', 1);"  id="start_vor">Vor</a>
</div>
<div id="start_text">Beschreibung</div>
<div id="galBox">
<ul>
  <li><a href="#" onClick="return swapImage('start', 0);"><img src="Bildlink1_klein.jpg" alt="lade..."></a></li>
  <li><a href="#" onClick="return swapImage('start', 1);"><img src="Bildlink2_klein.jpg" alt="lade..."></a></li>
  <li><a href="#" onClick="return swapImage('start', 2);"><img src="Bildlink3_klein.jpg" alt="lade..."></a></li>
</ul>
</div>
</body>
</html>

Versteh nicht so recht, warum das nicht klappt.
Wenn ich mir mit
alert(document.getElementById(imgName+"_vor").onclick);
den onclick wert danach anzeigen lasse, dann stimmt der auch, aber es passiert nichts.

Ist warscheinlich wieder irgendein syntax fehler oder ich hab wieder was verbotenes gemacht ;)

Danke schon mal
 
Zuletzt bearbeitet:
Mit setAttribute() sollte es funktionieren:
Also:

PHP: 
function swapImage(imgName, intImg) {
  document.getElementById(imgName+"_img").src = arrImg[intImg].src;
  document.getElementById(imgName+"_text").innerHTML = arrImg[intImg].alt;
  document.getElementById(imgName+"_link").href = arrImg[intImg].title;
  document.getElementById(imgName+"_vor").setAttribute("onClick", "return swapImage('"+imgName+"', "+(intImg+1)+");");
}

Wichtig ist auch, dass du intImg um eins erhöst, denn du willst ja das nächste Bild zeigen, und nicht das, was schon groß gezeigt wird!

Gruß
Toffi
 
Vielen Dank für die Hilfe, bin erstaunt, wie einfach das doch geht.
Jedoch funktioniert das nur beim Firefox und Safari (da hab ichs grad getestet).
Beim IE 8.0 übernimmt er die neuen Attribute nicht und es kommt somit immer das gleiche Bild.
 
Hi,

ich würde es über ein Objekt organisieren, dass ich dem Attribut target zuweise. Dieses enthält zum einen das Praefix in der Eigenschaft pre, zum anderen den Folgeindex in next.

Der onclick-Event wird über eine anonyme Funktion zugewiesen.

Code: 
var arrImg = new Array();
arrImg[0] = new Image();
arrImg[0].src = "bild1.jpg";
arrImg[0].txt = "Beschreibung";
arrImg[0].href_ = "bild1.jpg";
arrImg[0].target = {pre: 'start', next: 1};

arrImg[1] = new Image();
arrImg[1].src = "bild2.jpg";
arrImg[1].txt = "Beschreibung";
arrImg[1].href_ = "bild2.jpg";
arrImg[1].target = {pre: 'start', next: 2};

arrImg[2] = new Image();
arrImg[2].src = "bild3.jpg";
arrImg[2].txt = "Beschreibung";
arrImg[2].href_ = "bild3.jpg";
arrImg[2].target = {pre: 'start', next: 0};

function swapImage(imgName, intImg){
  document.getElementById(imgName+"_img").src = arrImg[intImg].src;
  document.getElementById(imgName+"_text").innerHTML = arrImg[intImg].txt;
  document.getElementById(imgName+"_link").href = arrImg[intImg].href_;

  document.getElementById(imgName+"_img").onclick = function(evt){
    // Verhindern, dass Link ausgelöst wird
    if(window.event)
      window.event.cancelBubble = true;
    else if (evt)
      evt.stopPropagation();

    // Funktion aufrufen
    return swapImage(arrImg[intImg].target.pre, arrImg[intImg].target.next);;
  }

  return false;
}

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück