ottschoottscho MemberComments: 2592 Received thanks: 260 Member since: October 2010 edited September 2015
Hey,

ich möchte die Lightbox für andere Bilder verwenden.
Leider geht es nicht. Warum?
<a href="bild.jpg" title="bild" rel="lightbox">
  <img src="bild.jpg" alt="bild" title="bild" />
</a>
Danke

Comments

  • ottschoottscho MemberComments: 2592 Received thanks: 260 Member since: October 2010
    Mist, ich weiß woran es liegt.
    Und zwar erstelle ich den Code per JavaScript:
    function changeImage() {
    			if ( document.sAddToBasket.sAdd.value ) {
    				document.getElementById('var_image').innerHTML = '<a class="variant" href="path' + 
    				document.sAddToBasket.sAdd.value + '.jpg" title="' + document.sAddToBasket.sAdd.value + '" rel="lightbox"><img src="path' + 
    				document.sAddToBasket.sAdd.value + '.jpg" alt="' + document.sAddToBasket.sAdd.value + '" title="' + document.sAddToBasket.sAdd.value + '" /></a>';
    			} else {
    				document.getElementById('var_image').innerHTML = '';
    			}
    		}
    
    Wenn ich den HTML Code direkt beim Laden der Seite einbauen funktioniert es.
    Hat jmd eine Idee wie ich das lösen kann?
  • Neuland Communication GmbHNeuland Communication GmbH MemberComments: 136 Received thanks: 4 Member since: May 2011
    Würde mich auch interessieren. Gibt es hier bereits eine Lösung?
  • avengeravenger MemberComments: 916 Received thanks: 99 Member since: September 2010
    ottscho wrote:
    Mist, ich weiß woran es liegt.
    Und zwar erstelle ich den Code per JavaScript:
    function changeImage() {
    			if ( document.sAddToBasket.sAdd.value ) {
    				document.getElementById('var_image').innerHTML = '<a class="variant" href="path' + 
    				document.sAddToBasket.sAdd.value + '.jpg" title="' + document.sAddToBasket.sAdd.value + '" rel="lightbox"><img src="path' + 
    				document.sAddToBasket.sAdd.value + '.jpg" alt="' + document.sAddToBasket.sAdd.value + '" title="' + document.sAddToBasket.sAdd.value + '" /></a>';
    			} else {
    				document.getElementById('var_image').innerHTML = '';
    			}
    		}
    
    Wenn ich den HTML Code direkt beim Laden der Seite einbauen funktioniert es.
    Hat jmd eine Idee wie ich das lösen kann?
    Das Problem ist, dass das Lightbox-Modul wohl bei seinem Start die Elemente identifiziert, die seine Dienste in Anspruch nehmen wollen.

    So ein später dynamisch generiertes Element kennt es (beobachtet es) daher nicht.

    Die Lösung könnte sein, ein solches Pseudo-Element statisch anzulegen, und dann nur noch die zu ändernden Parameter dynamisch zu setzen.

    Dann hat Lightbox sich aber schon in die Event-Queue des Elemets eingehängt, und kann darauf reagieren.
  • kaempenkaempen MemberComments: 92 Received thanks: 3 Member since: September 2011
    Guten Morgen zusammen,

    ich hake mich hier mal ein, da ich ebenfalls Bilder aus einer "Content-Seite" per Lightbox öffnen möchte. Hintergrund ist die Erstellung einer kleinen Bildergalerie.

    Gibt es denn wirklich keine "einfache" Möglichkeit, so etwas im Umfeld von Shopware zu realisieren?

    Ich suche wirklich schon lange in Wiki, Forum und Tutorials danach, konnte aber nichts hilfreiches finden.

    Mein letzter Versuch,
    {literal}
    <script type="text/javascript">
    window.onload=function()
    {
     Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
    }
    </script>
    {/literal}
    
    in die index/index.tpl einzubetten und dann per
    <a title="Frosch" rel="lightbox" href="http://dummylink">; <img src="http://dummylink"; alt="" width="200" height="200" /></a>
    
    aufzurufen, ist kläglich gescheitert.

    Es öffnet sich lediglich das verlinkte Bild in voller Pracht auf einer leeren Seite.

    Ich bin wirklich sehr verlegen um diese Lösung! Vielen Dank!

    Liebe Grüße,
    der Kämpen
  • avengeravenger MemberComments: 916 Received thanks: 99 Member since: September 2010
    kaempen wrote:
    Guten Morgen zusammen,

    ich hake mich hier mal ein, da ich ebenfalls Bilder aus einer "Content-Seite" per Lightbox öffnen möchte. Hintergrund ist die Erstellung einer kleinen Bildergalerie.

    Gibt es denn wirklich keine "einfache" Möglichkeit, so etwas im Umfeld von Shopware zu realisieren?

    Ich suche wirklich schon lange in Wiki, Forum und Tutorials danach, konnte aber nichts hilfreiches finden.

    Mein letzter Versuch,
    {literal}
    <script type="text/javascript">
    window.onload=function()
    {
     Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
    }
    </script>
    {/literal}
    
    in die index/index.tpl einzubetten und dann per
    <a title="Frosch" rel="lightbox" href="http://dummylink">; <img src="http://dummylink"; alt="" width="200" height="200" /></a>
    
    aufzurufen, ist kläglich gescheitert.

    Es öffnet sich lediglich das verlinkte Bild in voller Pracht auf einer leeren Seite.

    Ich bin wirklich sehr verlegen um diese Lösung! Vielen Dank!

    Liebe Grüße,
    der Kämpen
    Ottscho hat doch schon beschrieben, wie es geht.....

    <a href="bild.jpg" title="bild" rel="lightbox">
    <img src="bild.jpg" alt="bild" title="bild" />
    </a>

    Sein Problem ist ja nur die dynamische Erstellung dieses Links, der nicht funktioniert, statisch klappt das ja..
  • kaempenkaempen MemberComments: 92 Received thanks: 3 Member since: September 2011
    avenger wrote:
    <a href="bild.jpg" title="bild" rel="lightbox">
    <img src="bild.jpg" alt="bild" title="bild" />
    </a>
    Guten Morgen avenger,

    das habe ich als allererstes versucht. Leider klappt es eben nicht! Wie es nicht funktioniert, kannst Du hier sehen. ;)

    Liebe Grüße,
    der Kämpen
  • avengeravenger MemberComments: 916 Received thanks: 99 Member since: September 2010
    kaempen wrote:
    avenger wrote:
    <a href="bild.jpg" title="bild" rel="lightbox">
    <img src="bild.jpg" alt="bild" title="bild" />
    </a>
    Guten Morgen avenger,

    das habe ich als allererstes versucht. Leider klappt es eben nicht! Wie es nicht funktioniert, kannst Du hier sehen. ;)

    Liebe Grüße,
    der Kämpen
    Im Shop-Javascript wird die Lightbox wie folgt an "a"-Tags gebunden:
    //Lightbox basket
    $('a.zoom_picture[rel^=lightbox]').slimbox();
    
    Ich würde das also wie folgt versuchen
    <a href="bild.jpg" title="bild" class="zoom_picture">
    ......
    
    Thanked by 2kaempen rattatui
  • kaempenkaempen MemberComments: 92 Received thanks: 3 Member since: September 2011
    avenger wrote:
    Ich würde das also wie folgt versuchen
    <a href="bild.jpg" title="bild" class="zoom_picture">
    ......
    
    Versucht.
    Geklappt.
    Begeistert.

    Tausend Dank! Ich gebe Dir heute Früh schon mal einen virtuellen Kaffee auf Deine Hilfsbereitschaft aus :D

    Liebe Grüße,
    der Kämpen
  • rattatuirattatui MemberComments: 480 Received thanks: 34 Member since: December 2010
    Hallo zusammen,

    also wenn ich das bei einer Shopseite (wie "Über uns" oder ähnlich) machen will, gebe ich im HTML Fenster vom Tiny Editor z.B. folgendes ein:
    <a href="http://www.domain.de/uploads/bild.jpg"; title="bild" class="zoom_picture"><img src="http://www.domain.de/uploads/bild_thumbnail.jpg"; alt="bild" width="250" height="167" /></a>
    
    ...geht aber nicht - müsste doch aber, oder? :wtf: Der Browser öffnet dann nur wie bei
    kaempen das große Bild in einem neuen Fenster.
    Wenn ich mir dann im Tiny HTML Fenster das anschaue, hat Tiny beim abspeichern das daraus gemacht:
    <a class="zoom_picture" title="bild" href="http://www.domain.de/uploads/bild.jpg"><img src="http://www.domain.de/uploads/bild_thumbnail.jpg"; alt="bild" width="250" height="167" /></a>
    
    Was kann das sein - mache ich was falsch?

    Grüße
    rattatui
  • kaempenkaempen MemberComments: 92 Received thanks: 3 Member since: September 2011
    Hallo rattatui,

    versuche mal folgenden Code:
    <a rel="lightbox" class="zoom_picture" title="bild" href="http://www.domain.de/uploads/bild.jpg"><img src="http://www.domain.de/uploads/bild_thumbnail.jpg"; alt="bild" width="250" height="167" /></a>
    
    Bei mir funktioniert es nur, wenn ich dem Link rel="lightbox" mitgebe.

    Liebe Grüße,
    der Kämpen
    Thanked by 1rattatui
  • rattatuirattatui MemberComments: 480 Received thanks: 34 Member since: December 2010
    ...datt wars! :D

    vielen Dank an Dich und Avenger nochmals - mein Tag ist gerettet :thumbup:

    Grüße
    rattatui
  • wolfgang007wolfgang007 MemberComments: 60 Received thanks: 4 Member since: May 2015
    Weiß jemand wie das nun im Blog in Shopware 5 funktioniert?
    rel="lightbox[photos]"
    
    bewirkt leider keine Galerie-Funktion...

    Beste Grüße
  • coolbaxcoolbax MemberComments: 90 Received thanks: 31 Member since: February 2015
    Hallo,

    Für Shopware 5 versuche mal folgendes:
    <a data-lightbox="true" href="http://www.mein-shop.de/media/image/image_big.jpg"; title="">
    <img alt="" src="http://www.mein-shop.de/media/image/image_mini.jpg">;
    </a>
    
    Thanked by 1lbshop
  • wolfgang007wolfgang007 MemberComments: 60 Received thanks: 4 Member since: May 2015
    Hallo,

    habe folgenden Code:
    <a class="blog--thumbnail panel has--border is--rounded block zoom_picture" rel="lightbox[photos]" data-lightbox="true" href="../_1280x1280.jpg">
    <img class="blog--thumbnail-image" title="" alt="" srcset="../_200x200.jpg">
    </a>
    
    Das Bild wird richtig in der Lightbox geöffnet - leider ist in der Lightbox kein weiterblättern möglich :-(
  • impulsimpuls MemberComments: 211 Received thanks: 20 Member since: June 2013
    Seid ihr hier schon weitergekommen? Das Blättern der Bilder interessiert mich ebenfalls.
Sign In or Register to comment.