[GELÖST] Lightbox mit variablen Dateinamen

Nafets-2014 · 29. Juli 2014

Hallo,

ich möchte die Lightbox 2 (lokeshdhakar.com) integrieren. Die Schwierigkeit liegt darin, dass der Dateiname mittels eines Javascript erzeugt wird (aus Eingabewert in Formular).

Der normale Aufruf (ohne Lightbox) mittels

Code:

<img src="/Artikelbilder/" id="IMAGE_TAG">

zeigt das Bild an. Daher habe ich überlegt, das in den Lightbox-Tag entsprechend einzufügen:

Code:

<a href="/Artikelbilder/" id="IMAGE_TAG" data-lightbox="image-1"> <img src="/Artikelbilder/" id="IMAGE_TAG"></a>

Allerdings wird nun kein Bild mehr angezeigt. Lightbox ohne variablen Dateinamen funktioniert.

Wer weiß Rat? Danke im Voraus.

Beste Grüße
Stefan

kkapsner · 30. Juli 2014

Wie hast du das mit dem variablen Dateinamen genau realisiert?
Hast du einen Testlink, wo wir uns das live ansehen können?

Nafets-2014 · 30. Juli 2014

Hallo,

Testlink ist zur Zeit leider nicht möglich. Zum Testen lasse ich in der Lightbox das gleiche Bild aufrufen.

Hier der Code:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Artikelbilder</title>
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-top:10px;padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#footer{background: #333;color: #FFF}
div#footer p{text-align:center;margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{clear:left;width:100%}
div#footer{clear:left;width:100%}
#Eingabe_Artikel { background-color: #9c6; font-size:1.6em; font-weight: bold; text-align:center; }
</style>
<script type="text/javascript">
window.onload = function() { 
document.getElementById('Eingabe_Artikel').focus(); {
	var img = document.getElementById('IMAGE_TAG');
	img.onerror = function(){
		alert("Für Artikel " + this.src.replace(/^.*\/|\.[^.]+$/g, "") + " ist noch kein Bild vorhanden.");
	}
	document.getElementById('formular').onsubmit = function(e) {
		e = e || window.event;
		if(e.preventDefault) e.preventDefault();
		if(e.returnValue) e.returnValue = false;
		
		img.src = ('Artikelbilder/' + this.Eingabefeld.value.replace('.','_') + '.jpg');
		return false;
	}
  }	
} 
</script>
<!-- Verlinkung für Lightbox - Anfang -->
     <script src="lightbox/js/jquery-1.11.0.min.js"></script>
     <script src="lightbox/js/lightbox.min.js"></script>
     <link href="lightbox/css/lightbox.css" rel="stylesheet" />
<!-- Verlinkung für Lightbox - Ende -->
</head>
<body>
<div id="container">
  <div id="header"><h1><img src="Artikelbilder/logo.gif" alt="logo" width="215" height="71"></h1></div>
  <div id="wrapper">
    <div id="content">
        <p></p>
        <div style="text-align:center;">
	       <form id="formular">
	          <p><b>Artikelnummer:</b> <input name="Eingabefeld"  id="Eingabe_Artikel" type="text" size="24" maxlength="20" />
		      <input type="submit" value="Bild anzeigen" /></p>
	          <p> </p>
	       </form>
           <!-- Funktionierende Bildanzeige - Anfang -->
           <img src="/Artikelbilder/" id="IMAGE_TAG">
           <!-- Funktionierende Bildanzeige - Ende -->
           
           <!-- Nicht Funktionierende Bildanzeige - Anfang -->
             <a href="/Artikelbilder/" id="IMAGE_TAG" data-lightbox="image-1"> <img src="/Artikelbilder/" id="IMAGE_TAG"></a>
            <!-- Nicht Funktionierende Bildanzeige- Ende  -->
         
        </div>
      </div>
 </div>
<div id="footer"><p>TEST</p></div>
</div>
</body>
</html>

Beste Grüße
Stefan

Sempervivum · 30. Juli 2014

Habe den Code nur überflogen, aber auf jeden Fall ist ein Problem, dass deine IDs eindeutig sein müssen. Du hast jedoch für drei Tags dieselbe ID "IMAGE_TAG" vergeben.

Nafets-2014 · 30. Juli 2014

Die ID wird einmal erzeugt und dann wieder verwendet. Insofern ist die ID eindeutig.

miniA4kuser · 30. Juli 2014

Dein Problem ist window.onload. Das feuert erst, wenn die Seite komplett geladen ist, also mit allen Bildern, Styles, iframes etc...
<script src="lightbox/js/lightbox.min.js"></script>durchsucht dein DOM (HTML Struktur vom BODY, mal vereinfacht ausgedrückt) aber schon vorher und zu diesem Zeitpunkt wird dein Bild (img) zwar gefunden, aber die Bildwuelle (src) ist ungültig.

Sempervivum · 30. Juli 2014

Die ID wird einmal erzeugt und dann wieder verwendet. Insofern ist die ID eindeutig.

Nein, sie darf nicht wieder verwendet werden. Es ist nicht zulässig, dass mehrere Elemente dieselbe ID haben. Das führt zu Problemen beim Zugriff, das Verhalten ist undefiniert. Auf keinen Fall kannst Du erwarten, dass es auf alle Elemente wirkt, wenn Du auf diese Weise z. B. das Attribut src änderst.

Nafets-2014 · 30. Juli 2014

Und wie löse ich das nun? Da habe ich im Moment gar keine Idee....

miniA4kuser · 30. Juli 2014

Behebe erst einmal dein Problem mit der mehrfach vorkommenden ID und dann sehen wir mal weiter wie genau die Lightbox funktioniert.

Sempervivum · 30. Juli 2014

Einfach jedem Element eine andere ID geben und auf diese zugreifen. Dann musst Du sowohl das src-Attribut im img-Tag als auch das href-Attribut im a-Tag vorbesetzen. Dass es zwei img-Tags gibt, ist ja ohnehin nur für Testzwecke.

Nafets-2014 · 30. Juli 2014

Da weiß ich dann nicht weiter und lasse es bleiben. Mir wird das ganze zu kompliziert. Dennoch danke.

PS:
Falls jemand eine Lösung für mein Problem hat, kann das hier gerne gepostet werden. Ziel ist die Anzeige eines größeren Bildes und da dachte ich mir, das es mit der Lightbox einfach funktionieren würde, was sich aber nun als Denkfehler heruasstellt. Eventuell gibt es da noch einen anderen (einfacheren) Weg?

Sempervivum · 30. Juli 2014

Na, wenn Du dich mit Programmierung beschäftigst, darfst Du aber nicht so schnell aufgeben. Kaum etwas funktioniert auf Anhieb und man muss daran arbeiten. Mal sehen, wenn ich Zeit finde, schreibe ich deinen Code mal um, so dass er funktioniert.

Nafets-2014 · 30. Juli 2014

Hallo Sempervivum,

das ist schon richtig und stört mich grundsätzlich auch nicht. Momentan befasse ich mich jeodhc eher mit PHP und wollte mit Javascript nicht parallel anfangen. Aber an dem geplanten Einsatzort geht es nicht anders und ich hoffte auf eine einfache Lösung, die es nun doch nicht gibt. Falls du Zeit zur Überarbeitung findest wäre das ganz toll. Danke!

Sempervivum · 30. Juli 2014

Schau mal, so funktioniert es:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Artikelbilder</title>
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-top:10px;padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#footer{background: #333;color: #FFF}
div#footer p{text-align:center;margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{clear:left;width:100%}
div#footer{clear:left;width:100%}
#Eingabe_Artikel { background-color: #9c6; font-size:1.6em; font-weight: bold; text-align:center; }
</style>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('Eingabe_Artikel').focus();
        {
            var img = document.getElementById('id-im');
            var a = document.getElementById('id-a');
            img.onerror = function () {
                alert("Für Artikel " + this.src.replace(/^.*\/|\.[^.]+$/g, "") + " ist noch kein Bild vorhanden.");
            }
            document.getElementById('formular').onsubmit = function (e) {
                e = e || window.event;
                if (e.preventDefault) e.preventDefault();
                if (e.returnValue) e.returnValue = false;

                imgurl = ('img/' + this.Eingabefeld.value.replace('.', '_') + '.jpg');
                img.src = imgurl;
                a.href = imgurl;
                return false;
            }
        }
    } 
</script>
<!-- Verlinkung für Lightbox - Anfang -->
     <script src="lightbox/js/jquery-1.11.0.min.js"></script>
     <script src="lightbox/js/lightbox.min.js"></script>
     <link href="lightbox/css/lightbox.css" rel="stylesheet" />
<!-- Verlinkung für Lightbox - Ende -->
</head>
<body>
<div id="container">
  <div id="header"><h1><img src="Artikelbilder/logo.gif" alt="logo" width="215" height="71"></h1></div>
  <div id="wrapper">
    <div id="content">
        <p></p>
        <div style="text-align:center;">
	       <form id="formular">
	          <p><b>Artikelnummer:</b> <input name="Eingabefeld"  id="Eingabe_Artikel" type="text" size="24" maxlength="20" />
		      <input type="submit" value="Bild anzeigen" /></p>
	          <p> </p>
	       </form>
           <!-- Lightbox statisch - Anfang -->
           <a href="img/s_001.jpg" data-lightbox="image-1"><img src="img/s_001.jpg" height="100"></a>
           <!-- Lightbox statisch - Ende -->
           
           <!-- Lightbox dynamisch - Anfang -->
             <a href="/Artikelbilder/" id="id-a" data-lightbox="image-2"> <img src="/Artikelbilder/" id="id-im" height="100"></a>
            <!-- Lightbox dynamisch Bildanzeige- Ende  -->
         
        </div>
      </div>
 </div>
<div id="footer"><p>TEST</p></div>
</div>
</body>
</html>

lAufwand ca. 1 Tasse Kaffee. Du musst nur noch den Bilderpfad bei imgurl ändern.
Der Einwand von miniA4kuser wg. onload hat sich nicht bestätigt, obwohl ich selber glaubte, dass es so ist, wie er schreibt. Aber anscheinend registriert die Lightbox am Anfang nur das Click-Event und ermittelt dann den Wert des href-Tags erst beim Klick.
Es hätte meine Motivation gefördert, wenn ich den Sinn gesehen hätte. So erscheint es sehr benutzerunfreundlich, wenn er eine Bildadresse kennen und in das Eingabefeld eintragen muss. Wäre da nicht eine Auswahlliste besser?

Nafets-2014 · 30. Juli 2014

Hallo Sempervivum,

hier kommt erst einmal die Tasse Kaffee,

die hast du dir echt verdient. Das Script funktioniert super. Herzlichen Dank dafür.

Den Anwendungszweck möchte ich dir nicht vorenthalten: Da das Warenwirtschaftssystem in meiner Firma keine Möglichkeit zur Bilderanzeige bietet, habe ich dieses kleine Bilderansichtprogramm via Webbrowser in der Anwendung (Freizeitentwicklung / ein Bild sagt mehr als eine Beschreibung und hilft auch bei der Identifikation des Bauteils). Nun kam der Wunsch nach der Möglichkeit zur Vergrößerung auf und dafür finde ich die Lightbox toll (was nun doch komplizierter war, als gedacht). Es gibt dann noch eine Anbindung an das Warenwirtschaftssystem mit Lagerdaten und Preisen mittels Iframe , so dass meine Kollegen / Kolleginnen entsprechende Informationen zusätzlich zum Warenwirtschaftssystem verfügbar haben. Von daher wäre eine Auswahlliste (ca. 7000 aktive Artikel) nicht so sinnvoll.

Nochmals herzlichen Dank für die Unterstützung. Ich denke, dass ich mich mit Javascript doch noch eingehender beschäftigen werde; da sind spannende Sachen möglich.

Beste Grüße
Stefan

- - - Aktualisiert - - -

Wie setze ich diese Diskussion auf erledigt?

Sempervivum · 30. Juli 2014

Freut mich, wenn es funktioniert und dir hilft.
Vielen Dank für die Erklärung. Habe aber kaum etwas verstanden, liest sich kompliziert. Wenn Du mit so etwa umgehen kann, dürfte es kein Problem sein, JS zu lernen.
Wenn es 7000 Artikel sind, ist eine Auswahlliste tatsächlich nicht praktikabel.
Ich fand das mit der Lightbox allerdings nicht so kompliziert. Brauchte ja nur ein paar Zeilen zu ändern und dann funktionierte es. Ist allerdings auch nicht das erste Mal, dass ich eine Lightbox anwende, ich benutze andere selbst auf meiner Homepage.

mikdoe · 31. Juli 2014

Nafets-2014 schrieb:
Wie setze ich diese Diskussion auf erledigt?

Kannst du selbst nicht, glaube ich.

Der Kaffee ist sehr nett!! Ich möchte auch einen.

[GELÖST] Lightbox mit variablen Dateinamen

Nafets-2014

New member

kkapsner

Super Moderator

Nafets-2014

New member

Sempervivum

Banned

Nafets-2014

New member

miniA4kuser

Lounge-Member

Sempervivum

Banned

Nafets-2014

New member

miniA4kuser

Lounge-Member

Sempervivum

Banned

Nafets-2014

New member

Sempervivum

Banned

Nafets-2014

New member

Sempervivum

Banned

Nafets-2014

New member

Sempervivum

Banned

mikdoe

Moderator