VisualLightBox einbinden - kann jemand helfen

alextappert schrieb am 23.12.2015 um 12:26 Uhr

Ich möchte gerne die Visual Light Box einbinden. Eigentlich soweit alles ok, aber ich will ein eigenes Bild mit direktem link auf die Galerie (Lightbox) setzen.

In der Beschreibung der Visual Light Box wäre es der zweite Weg:

2. You can start VisualLightBox gallery onClick from link/image.

http://visuallightbox.com/rq/show-one-thumbnail-in-lightbox-generator-9J.html

Irgendwie bekomme ich das nicht hin. Kann da jemand hilfestellung bieten?

 

Ich nutze Webdesigner 11 Premium.

 

Vielen Dank für Eure Unterstützung!

 

 

Kommentare

BeRo schrieb am 23.12.2015 um 17:06 Uhr

[...] Irgendwie bekomme ich das nicht hin. [...]

Im "Hellsehen" bin ich zwar über die Anfängerprobleme schon weg, es gelingt mir aber trotzdem nicht, Dein Problem zu "sehen".

Vielleicht kannst Du (ausnahmsweise) Dein Problem so beschreiben, dass auch ohne hellseherische Fähigkeiten erkennbar wird, wo Du nicht weiterkommst.

Versuch's mal

Zuletzt geändert von BeRo am 23.12.2015, 17:06, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

alextappert schrieb am 23.12.2015 um 17:40 Uhr

Also...

ich fange mal an...

Wenn ich die Lightbox einbinde, muss ich ja normalerbweise folgende Scripte einbinden:

 

Platzhalter:

<head>
...
  <!-- Start Visual LightBox.com HEAD section -->
   .....
  <!-- End Visual LightBox.com HEAD section -->
...
</head>

<body>
...
  <!-- Start Visual LightBox.com BODY section -->
  .....
  <!-- End Visual LightBox.com BODY section -->
...
</body>

 

Anschließend sehe ich auf der Seite die Daten, siehe Beispiel:

siehe Beispiel: http://vintagevegas.de/themen.htm#xl_th_multimedia

Da habe ich drei Galerien, die ich mit nur einem Vorschaubild angelegt habe.

 

In der Beschreibung von VisualLightBox bieten Sie ja aber auch die Möglichkeit, eben ein eigenes Vorschaubild zu nehmen und das direkt auf die Lightbox zu verlinken...

 

Ich bin jetzt überfragt, laut Beschreibung:

a) wo packe ich diesen Code hin?

<script type="text/javascript">
   var started;
   function showLightBox()
  {
    if (started) return;
    started = setTimeout(function(){
        Lightbox.start(document.getElementById('firstImage'));
        started;
    },500);
  }
  function stopShowLightBox(){
    if (started) {
        clearTimeout(started)
        started = 0;
    }
  }
</script>

 

...denn wenn ich diesen beim Bild (Platzhalter) einfüge, ist mein eigenes Bild ja ersetzt. Frage also, ob ich dieses Script im Body der gesamten Website einbinden soll. Und muss ich das normale Script für Body und Head dann weglassen?

 

<head>
...
  <!-- Start Visual LightBox.com HEAD section -->
   .....
  <!-- End Visual LightBox.com HEAD section -->
...
</head>

<body>
...
  <!-- Start Visual LightBox.com BODY section -->
  .....
  <!-- End Visual LightBox.com BODY section -->
...
</body>

 

b) und wo binde ich dieses Script ein...?

<img src="data/thumbnails/purple1.jpg.png" onMouseOver="javascript:showLightBox()" onMouseOut="javascript:stopShowLightBox()" style="cursor: pointer;">

oder alternativ

<a href = "javascript:showLightBox()" onMouseOut="javascript:stopShowLightBox()" style="cursor: pointer;">Click to start Lightbox gallery</a>

 

Da finde ich über das Öffnen des Linkeditors keine Möglichkeit.

 

 

Hab ich mich einigermaßen verständlich ausgedrückt. Sorry. bin Grafiker, taste mich gerade an das alles heran ;-)

 

BeRo schrieb am 23.12.2015 um 23:08 Uhr

[...] a) wo packe ich diesen Code hin? [...]

Der gehört zusätzlich in den HTML Head der Seite, die die Slideshow zeigen soll. Es muss kein anderer Code gelöscht werden.

[...] b) und wo binde ich dieses Script ein...? [...]

Garnicht

[...] oder alternativ <a href = "javascript:showLightBox()" [...]

Davon benötigst Du nur den JS Funktionsaufruf javascript:showLightBox()

Diesen Funktionsaufruf benutzt Du als Link, den Du einem beliebigen Objekt zuweisen kannst. In Deinem Fall ist  das dann ein individuelles Bild, das Du anstelle des ursprünglichen Thumbnail Bilds verwenden kannst.

So muss der Link dann aussehen:

Und so kann das Ergebnis dann aussehen...

Viel Erfolg und ein paar schöne Feiertage

Zuletzt geändert von BeRo am 23.12.2015, 23:12, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓