|
|||
setAttribute verhindert weitere bearbeitung von JS-Code
Hy.
Weil das JQuery-Plugin supersizedjQuery-Plugin "Supersized": Autoskalierender Background mit Slideshow-Option und lightbox nicht miteinander kompatibel sind, habe ich per CSS und dem :focus selbst eins gemacht. Da :focus bei zu wenigen Browser unterstützt wird, habe ich begonnen selbst per js diese funktionalität zu erreichen. Das einzige was nicht funktioniert, ist das zurücksetzten des onclick-Attributs. CSS: Code:
.gallery a, .gallery a img { width:148px; height:114px; display:block; float:left; border:3px solid white; } /* platzhalt per a-tag erstellen (für tests mit js deaktiviert) */ .g_allery a:focus, .g_allery a.thumb { background-image:url(img/wb-lightbox/empty.jpg); background-position:3px 3px; /* hinter dem border hervorziehen */ background-repeat:no-repeat; border-right:0; /* border entfernen damit hintergrundbild nicht abgeschnitten wird */ border-bottom:0; /* und hier */ width:151px; /* +3px, ersetzt border */ height:117px; /* +3px ersetzt border */ } /* grossansicht für bild erstellen (für tests mit js deaktiviert) */ .g_allery a:focus img, .g_allery a:focus img.bigger { border:7px solid white; height:406px; left:50%; margin-left:-425px; margin-top:-400px; position:absolute; top:50%; width:567px; } HTML-Code:
<div class="gallery"> <a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_0.jpg"/></a> <a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_1.jpg"/></a> <a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_2.jpg" /></a> <a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_3.jpg"/></a> <a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_4.jpg"/></a> <a href="#"><img src="img/inhalt-bilder/werbeflaechen/thumb_5.jpg" /></a> </div> Code:
window.onload = function(){ a_tags = document.getElementById('content').getElementsByTagName("A"); for(i=0; i<a_tags.length; i++ ) { if(a_tags[i].firstChild.tagName == 'IMG') { a_tags[i].setAttribute('onclick', 'javascript: thumb(this);'); } } } function thumb(thumbnail) { thumbnail.className = "thumb"; thumbnail.setAttribute('onclick', ''); thumbnail.firstChild.className = "bigger"; thumbnail.firstChild.setAttribute('onclick', 'javascript: goBack(this);'); } function goBack(image) { image.removeAttribute("class"); image.removeAttribute("onclick"); image.parentNode.removeAttribute("class"); // Das will nicht funktionieren: image.parentNode.setAttribute('onclick', 'javascript: thumb(this);'); } Ich komm einfach nicht dahinter wieso das nicht funktionieren soll. Wenn ich bei Code:
image.parentNode.setAttribute('onclick', 'javascript: thumb(this);'); Code:
image.parentNode.setAttribute('onclick', 'wasAuchImmer'); Wäre Euch wahnsinnig dankbar, auch wenn's nur ein Tipp ist. Vielen Dank für Eure Zeit. Peace mudsflapp Geändert von mudsflapp (21.05.2009 um 15:10 Uhr) |
Sponsored Links |
|
|||
Vielen Dank für Deine sehr schnelle Antwort
Leider gehts nicht, habe aber versucht den Code auch an andere Stellen ein zubauen: wie z.B. hier: Code:
for(i=0; i<a_tags.length; i++ ) { if(a_tags[i].firstChild.tagName == 'IMG') { a_tags[i].onclick = function() { thumb(this); }; } } Habe eine möglichkeit gefunden.. Seite neu laden.. Code:
function goBack(image) { location.reload(); } |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
HTML mit PHP Code aus Datenbank auslesen + ausführen | Garlandt | Serveradministration und serverseitige Scripte | 14 | 01.05.2011 13:45 |
Wie Code effektiv in XHTML ausgeben? | Schelm.isch | (X)HTML | 8 | 30.11.2008 16:17 |
Wort in Javascript Code einfügen; dann Javascript Code ausgeben | Sp33dy G0nz4l3s | Javascript & Ajax | 1 | 23.05.2008 10:37 |
XHTML und CSS Code auszeichnen | Lloyd Larkin | Barrierefreiheit | 11 | 20.07.2006 08:51 |