Produktbilder in einer Lightbox auf Shopseiten darstellen

[dobra]

Hallo Dani,

das passt schon so mit den Links
Du schreibst das

Code: [Auswählen]

<a href="../__BILDZOOM1__" rel="lightbox[roadtrip]">Bild #1</a>
<a href="../__BILDZOOM2__" rel="lightbox[roadtrip]">Bild #2</a>
<a href="../__BILDZOOM3__" rel="lightbox[roadtrip]">Bild #3</a>an die Stelle wo der Link angezeigt werden soll.
Klickt man auf einen der Links (egal welchen) kann man dann alle Bilder in der Lightbox weiterblättern.

Guck mal da (ist zwar hier die Produktseite - funktioniert aber genauso)
auf irgendein "zoom"-Icon klicken und dann kannst Du mit "weiter" oder "zurück" alle Bilder in der Box anschauen.

P.S.: diese Links sind einfaches HTML die Du wie jeden anderen Link an beliebiger Stelle in der Vorlage einbauen kannst
(müssen auch nicht alle beisammen stehen - s. dem Einbau im loopitem-Bereich)
statt dem Textlink "Bild #1" kannst Du auch beliebige Icons oder Thumbnails verwenden

P.PS.:  Dein erstes Bild ist dann   ../__BILDZOOM__ wenn Du dann noch BILDZOOM1, BILDZOOM2 und BILDZOOM3 angelegt hast

[schoenebeine.ch]

Vielleicht zur besseren Verständlichkeit, hier der HTML Code aus meiner Seite:

<a href="../__BILDZOOM__" rel="lightbox[roadtrip]"><img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" />&nbsp;&nbsp;Zoom</a>


Wenn ich nun alle Links unten einbaue, dann habe ich ja "Bild #1, Bild#2 usw." angezeigt auf der Seite, dass ist es ja aber nicht, es soll nur 1 Zoom Link angezeigt werden.

Dani

[dobra]

Dann musst Du die anderen ausblenden

<a href="../__BILDZOOM__" rel="lightbox[roadtrip]"><img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" />&nbsp;&nbsp;Zoom</a>
<div style="display: none;"><a href="../__BILDZOOM1__" rel="lightbox[roadtrip]">&nbsp;</a><a href="../__BILDZOOM2__" rel="lightbox[roadtrip]">&nbsp;</a><a href="../__BILDZOOM3__" rel="lightbox[roadtrip]">&nbsp;</a></div>

ander Möglichkeit wäre z.B.:

Ansichten: 1 2 3 4
(das 1 2 usw event. durch kleine Vorschaubilder ersetzen)

[schoenebeine.ch]

Habe das ganze nun wie folgt eingebaut:

<a href="../__BILDZOOM__" rel="lightbox[roadtrip]"><img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" />&nbsp;&nbsp;Zoom</a>
                                    <div style="display: none;">
                                    <a href="../__BILDZOOM1__" rel="lightbox[roadtrip]">&nbsp;</a>
                                    <a href="../__BILDZOOM2__" rel="lightbox[roadtrip]">&nbsp;</a>
                                    <a href="../__BILDZOOM3__" rel="lightbox[roadtrip]">&nbsp;</a></div></div>

Es ist nun tatsächlich nur noch ein Link vorhanden, funktioniert immer noch, aber die Grafiken weiter und zurück werden nicht angezeigt. Somit wird mir nur ein Bild angezeigt, obwohl ganz unten im Bild steht "1 Bild von 4".

Dani

[schoenebeine.ch]

Es geht, es geht!!!!!!!!!!!!!

Hatte bei der "lightbox.css" noch einen falschen Pfad drinnen bei diesen vor und zurück Grafiken!
Ich hoffe jetzt tut alles wie es sollte.

Besten Dank dobra, einmal mehr!!! :-D

Grüessli
Dani

[metallic]

Hallo,

erstmal vielen Dank für die Lightbox, sie ist uns sehr nützlich.
Leider funktionniert sie mit Mozilla Firefox nicht, obwohl mit Internet Explorer alles super läuft.
Wenn man auf dem Bild klickt, bekommt man das Bild in einem neuen Fenster...

Ich habe die Einstellungen von meinem Browser geprüft: Pop-Up Fenster sind aktiviert, sowie JS-Skript und JS.

Habt ihr eine Idee, warum es nicht funktionniert?

Vielen Dank im Voraus!

[admin]

Hallo,

das hat nichts mit IE oder FF zu tun. Es liegt daran, dass Sie die Scripte nicht richt richtig eingebunden haben, bzw. auf lokale Dateien verweisen.

Da steht z.B.

Code: [Auswählen]

<script type="text/javascript" src="file:///X:/vac-shop/vac-shop.com%20aktuell/js/lightbox.js"></script>

Da muss eineURL hin, die auf die lighbox.js auf Ihrem Server verweist.

Gruß hop