Link - Weiterleitung (<a href="....) unterbinden mit javasctipt

[r3d]

Hallo,

nach längerer und erfolgloser Suche in diversen Foren habe hoffe ich das ihr mir helfen könnt.

Ich bin dabei eine imagegalery zu erstellen. wenn man auf ein thumbnail klickt wird auf der selben Beite das Bild in groß angezeigt, der Alternativtext wird ebenfalls angezeigt, ...
Natürlich soll dann der link auf das große Bild NICHT "verfolgt" werden.

auf diese Weise hats auch schon funktioniert (mit return false)

thumbs[0].onclick = function () {
actBtn(0);
return false;
}
thumbs[1].onclick = function () {
actBtn(1);
return false;
}
...

allerdings will ich natürlich nicht den code für jedes bild extra schreiben.


darum dieser Ansatz mit Umweg über eine weitere Funktion. weiß allerdings nicht wie ich die Weiterleitung hier unterbinden soll.

// alle links
window.thumbs = document.getElementsByTagName("a");

function getBtn (i) {
return function () { actBtn(i) };
}

var imgBtn = new Array();
for (var i = 0; i <= thumbs.length; i++) {
if (thumbs != undefined) {
thumbs.onclick = getBtn(i);
}
}

function actBtn(number) {
window.actnumber = number;
var placeholder = document.getElementById("placeholder");
var text_pic = thumbs[number].lastChild.alt;
// alternativtext anzeiten
var text_pl = document.getElementById("description").textContent = text_pic;
// großes bild anzeigen
placeholder.src = thumbs[number].href;

// remove all ChildNodes
while (note.childNodes.length >= 1) {
note.removeChild(note.firstChild);
}
}
}


ich finde einfach keinen weg :-(

Danke im Voraus
Daniel

 

[ge_fabian]

wieso nimmst du nicht einfach onclick="" bei den Bildern?
Dann brauchst du nicht sooo komplizierte Sachen zu machen ;)

 

[r3d]

weil alle Funktionalitäten unabhängig von der Anzahl der Bilder sein sollen.

vielleicht kannst du mir ja einen Hinweis geben wie ich das angehen sollte.

 

[threadi]

Das was Du beschreibst ähnelt der Funktion der bekannten Lightbox. Die prüft, nachdem die Seite geladen wurde, ob in einem Link das rel-Attribut vorhanden ist und wenn ja, welchen Wert es hat. Wenn es den Wert "lightbox" hat, wird ein onclick-Eventhandler ergänzt, der einfach eine Funktion aufruft die auf das Linkobjekt zugreift.

Wenn man das manuell schreibt, würde es z.B. so aussehen:

<a href="linkziel.html" onclick="return startThumbnail(this);">

Die Funktion startThumbnail() könnte z.B. so aussehen:

function startThumbnail( obj ) {
 if( obj ) {
  alert(obj.href);
 }
 return false;
}

Anstelle des alert's müsstest Du jetzt deine eigene Thumbnail-Funktion einfügen. Wichtig ist lediglich, dass die Funktion startThumbnail() den Return-Wert false erhält denn dadurch wird verhindert, dass ein Browser bei dem JavaScript aktiviert ist das Linkziel direkt aufruft.

 

[Kizetsu]

Einen etwas anderen Lösungsansatz hatte ich bei einer eigenen Bildergallerie verwendet:

Die Links der Bilder und deren Alternativtext hab ich dynamisch aus der Datenbank auslesen lassen per php und per jquery post dann an die Seite liefern lassen. Somit hat er mir, für eine vorgegebene Anzahl an Bildern die Bilder und Links generiert und angezeigt. In den Links der Bilder stand immer die ID des Bildes aus der Datenbank.
Der nächste Schritt war das Abfangen der Links. Ich habe via jquery ein click-event auf alle <a>-tags gemacht die die Klasse "image" hatten.
Das click-event war recht simpel: Das jquery-script hat ein post an die action geschickt mit der id des Bildes. Anschließend hat es ein Modal geladen um das Bild anzuzeigen. In dem Modal gab es einen Div in den das jeweilige Bild in groß angezeigt wurde. Die Action hat ihrerseits das den Inhalt des Div gebaut indem sie die Datenbank nach der ID durchsucht hat und anschließend den zugehörigen Link des Bildes als sourcelink für ein img-tag genutzt. Außerdem hat sie das Bild sowohl vertikal als auch horizontal im div zentriert und die Größe angepasst.

Dadurch, dass sich das Bild in einem Modal öffnet hat man eine schöne Ansicht mit dem angeklickten Bild im Vordergrund und den restlichen Bildern immernoch im Hintergrund. Und solange das Modal geöffnet ist lassen sich die restlichen Bilder nicht anklicken. Ein Klick auf den Bildschirm schloss das Modal wieder und man hatte wieder die normale Übersicht über alle Bilder.

Jquery bietet übrigens eine sehr simple Möglichkeit zu verhindern, dass der Link verfolgt wird:

$("ID_oder_class_des_Elements).click(function(e) {    // Start der Click-Funktion mit deklaration einer Variable "e"
  // Inhalt der Click-Funktion
  e.preventDefault();  // Verhindert dass eine Seite neu geladen wird und somit auch dass ein Link verfolgt wird
};

LG