Nur einmaliger Aufruf möglich


#1
Liebe Experten!
Ich habe ein Javascript, um eine Dialogbox zu öffnen (in meinem Fall sind es Bilder). Für das erste Bild habe ich alles nach meinen Vorstellungen eingestellt und es passt perfekt. Klicke ich nun auf ein 2. oder 3. Bild habe ich keine Reaktion. Als Java-Nichtexperte suche ich Eure Hilfe! Schönen Dank im Voraus!
Link zu meiner Testdatei: www.ibra.at/brita/shop/index.php
Hier das Script:
<script type="text/javascript">
'use strict';
document.addEventListener("DOMContentLoaded", function () {

//Polyfill für dialog-Element
document.querySelector('#open-dialog').addEventListener('click', toggleDialog);

function toggleDialog(){
var dialog = document.querySelector('dialog'),
closeButton= document.getElementById('close-dialog');

if (!dialog.hasAttribute('open')) {
// show the dialog
dialog.setAttribute('open','open');
// after displaying the dialog, focus the closeButton inside it
closeButton.focus();
closeButton.addEventListener('click', toggleDialog);
// EventListener für ESC-Taste
document.addEventListener('keydown', function(event) {
if (event.keyCode == 27) {
toggleDialog();
}
}, true);
// only hide the background *after* you've moved focus out of the content that will be "hidden"
var div = document.createElement('div');
div.id = 'backdrop';
document.body.appendChild(div);
}
else {
dialog.removeAttribute('open');
var div = document.querySelector('#backdrop');
div.parentNode.removeChild(div);
lastFocus.focus();
}
}
});
</script>
 

basti1012

Erfahrenes Mitglied
#2
Du benutzt die id "open-dialog" mehr als einmal. Das geht natürlich nicht. Wen dann mußt du jeden Button eine eigene Id geben , oder du rufst das über ClassName aus
 
#3
Du benutzt die id "open-dialog" mehr als einmal. Das geht natürlich nicht. Wen dann mußt du jeden Button eine eigene Id geben , oder du rufst das über ClassName aus
Danke für die rasche Antwort!
Das ganze über "ClassName" aufzurufen, übersteigt meine Kenntnisse komplett! Ich habe das Script über selfwiki gefunden und nur angepasst. JavaScript ist an mir die letzten (40) Jahre :) leider vorbeigegangen! Vielleicht könntest Du mir ein Schnipsel senden, dass ich einbauen könnte! Schönen Dank!!!
 

basti1012

Erfahrenes Mitglied
#4
Schön.Das einfach in Class ändern geht gar nicht so einfach. So wie ich das machen würde geht es so nicht .Ich ändere das gleich mal wie ich machen würde. Du benutzt ja auch für jedes Bild einen eigenen <dialog>.
Weil einfach id in class ändern functioniert nicht so schnell wie man das sonst kennt. Melde mich so um 3 uhr nochmal wenn ich wieder zuhause bin
 

Sempervivum

Erfahrenes Mitglied
#5
Dieses Skript eignet sich offenbar nicht, um mehrere Bilder anzuzeigen. Statt es mühsam zu erweitern, empfehle ich, ein bewährtes Lightbox-Skript zu verwenden:
https://fancyapps.com/fancybox/3/
Unter "Quick start" ist genau beschrieben, wie man es einbindet. Wenn Du den Code dort benutzt, brauchst Du es nicht herunter zu laden.
 
#8
Lightbox 2 bereits installiert / Menübutton mach ich über die bestehende Dialogbox; ich lese ca. 250 Artikel aus der DB aus, damit erachte ich die Lightbox für sinnvoll!
LG Sigi
 

basti1012

Erfahrenes Mitglied
#10
Dieses Skript eignet sich offenbar nicht, um mehrere Bilder anzuzeigen. Statt es mühsam zu erweitern, empfehle ich, ein bewährtes Lightbox-Skript zu verwenden:
Das kann ich nur bestätigen. Und wie ich lese seid ihr bereits dabei das zu benutzen. Ist auch besser so.
Aber ich habe das trotzdem mal geändert ,damit du siehst wie ich das gemacht hätte mit den dialog.
Ich hätte zwar das html auch noch anders gemacht ,aber das wollte ich jetzt bei dir nicht ändern.
https://codepen.io/basti1012/pen/zmZmpQ?editors=1010
Es gibt bestimmt noch bessere Lösungen,aber das ist halt mein weg.

Normalerweiße hätte ich noch jquery benutzt weil es einige Sachen doch noch vereinfachert.
Ok . Dann viel erfolg noch chau.
 

Neue Beiträge