# Lightbox Artikel-Listing

**URL:** <https://forum.shopware.com/t/lightbox-artikel-listing/54854>\
**Category:** Programmierung\
**Created:** [29. August 2018 um 08:17 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854 "2018-08-29T08:17:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pfeifakopf](https://avatars.discourse-cdn.com/v4/letter/p/8e7dd6/32.png) [@Pfeifakopf](https://forum.shopware.com/u/Pfeifakopf)\
**Post date:** [29. August 2018 um 08:17 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854/1 "2018-08-29T08:17:23Z")

</div>

Hallo zusammen,

ich habe zur Vergrößerung des Bildes im Listing einen Link eingefügt, der die Lightbox öffnet. Beim normalen Laden der Seite funktioniert er auch problemlos. Wenn allerdings neue Artikel via Ajax nachgeladen werden funktioniert der Link nicht mehr. Ich denke, es liegt daran, weil das javascript der Lightbox zur beim Laden der Seite greift. Hat jemand eine Idee, wie ich das Problem lösen kann? Vielen Dank!

Eingebauter Link:

&nbsp;

---

<div class="post-metadata">

**Author:** ![wontfix](https://avatars.discourse-cdn.com/v4/letter/w/b19c9b/32.png) [@wontfix](https://forum.shopware.com/u/wontfix)\
**Post date:** [29. August 2018 um 09:54 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854/2 "2018-08-29T09:54:20Z")

</div>

ich vermute hier wird die lightbox jquery plugin an die html elemente gebunden [shopware/jquery.shopware-responsive.js at aac0e5c964ac58b33cb95a6583285df2042d2ade · shopware/shopware · GitHub](https://github.com/shopware/shopware/blob/aac0e5c964ac58b33cb95a6583285df2042d2ade/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js#L160) (und ich vermute es wird nur einmal ausgeführt, nach laden der seite)

also nehme ich an du musst diese nochmal selber machen…

_ps. „jquery plugins an ajax elemente verbinden“ klingt nach ne feature was jeder will, also müsste dafür eigentlich ne einfache lösung geben._

_pps. hmm, wenn ich richtig innere, wenn man artikel varianten wechselt, wird die neue halbe seite auch über ajax geladen, und alle javascript dinger funktionieren weiterhin/wieder. wie ist das gelöst?_

---

<div class="post-metadata">

**Author:** ![Pfeifakopf](https://avatars.discourse-cdn.com/v4/letter/p/8e7dd6/32.png) [@Pfeifakopf](https://forum.shopware.com/u/Pfeifakopf)\
**Post date:** [29. August 2018 um 10:53 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854/3 "2018-08-29T10:53:01Z")

</div>

Bei den im ursprünglichen Seitenaufruf enthaltenen Artikeln funktioniert die Lightbox auch nach dem Laden via Ajax, lediglich bei den neu hinzugefügten Artikeln funktioniert die Lightbox nicht. Habe versucht die Lightbox nochmals einzubauen, zum Beispiel in&nbsp;jquery.infinite-scrolling.js , allerdings erfolglos.

---

<div class="post-metadata">

**Author:** ![wontfix](https://avatars.discourse-cdn.com/v4/letter/w/b19c9b/32.png) [@wontfix](https://forum.shopware.com/u/wontfix)\
**Post date:** [29. August 2018 um 11:57 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854/4 "2018-08-29T11:57:58Z")

</div>

der javascript (zum einbinden der jquery plugin an html element) muss in der ajax antwort drin sein, und hoffen das diese javascript auch ausgeführt wird.

zbs. versuche es in die template zu addieren.

ps. ich hoffe immernoch das jemand der besser damit auskennt die einfacherer lösung postet.

---

<div class="post-metadata">

**Author:** ![Pfeifakopf](https://avatars.discourse-cdn.com/v4/letter/p/8e7dd6/32.png) [@Pfeifakopf](https://forum.shopware.com/u/Pfeifakopf)\
**Post date:** [30. August 2018 um 10:16 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854/5 "2018-08-30T10:16:55Z")

</div>

Kann sonst keiner weiterhelfen?  
Hatte noch versucht das einzubauen, leider ohne Auswirkung.

```
StateManager.addPlugin('*[data-image-gallery="true"]', 'swImageGallery');

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Pfeifakopf](https://avatars.discourse-cdn.com/v4/letter/p/8e7dd6/32.png) [@Pfeifakopf](https://forum.shopware.com/u/Pfeifakopf)\
**Post date:** [31. August 2018 um 17:47 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854/6 "2018-08-31T17:47:28Z")

</div>

@wontfix‍ vielen Dank für dein Feedback. So, habe endlich die Lösung gefunden.

In der ajax\_listing.tpl folgenden Code packen und es klappt:

```
      $('*[data-lightbox="true"]').on('click.lightbox', function (event) {
          var $el = $(this),
              target = ($el.is('[data-lightbox-target]')) ? $el.attr('data-lightbox-target') : $el.attr('href');

          event.preventDefault();

          if (target.length) {
              $.lightbox.open(target);
          }
      });

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![wontfix](https://avatars.discourse-cdn.com/v4/letter/w/b19c9b/32.png) [@wontfix](https://forum.shopware.com/u/wontfix)\
**Post date:** [3. September 2018 um 09:33 UTC](https://forum.shopware.com/t/lightbox-artikel-listing/54854/7 "2018-09-03T09:33:55Z")

</div>

nur so am rande, hab gefunden wie die artikel varianten ajax wechsel, die jquery plugins nochmal lädt.

es lädt manche plugins manuell noch mal in die statemanager (und dadurch wird wohl automagisch diese plugins in&nbsp;die&nbsp;html elemente verbunden): [shopware/jquery.ajax-variant.js at 5.4 · shopware/shopware · GitHub](https://github.com/shopware/shopware/blob/5.4/themes/Frontend/Responsive/frontend/_public/src/js/jquery.ajax-variant.js#L139)

```
StateManager.addPlugin('*[data-image-slider="true"]', 'swImageSlider')
            .addPlugin('.product--image-zoom', 'swImageZoom', 'xl')
            .addPlugin('*[data-image-gallery="true"]', 'swImageGallery')
            .addPlugin('*[data-add-article="true"]', 'swAddArticle')
            .addPlugin('*[data-modalbox="true"]', 'swModalbox');

```

und andere plugins sollten wohl ähnliches machen mit event ‘plugin/swAjaxVariant/onRequestData’: [shopware/jquery.ajax-variant.js at 5.4 · shopware/shopware · GitHub](https://github.com/shopware/shopware/blob/5.4/themes/Frontend/Responsive/frontend/_public/src/js/jquery.ajax-variant.js#L150)

```
// Plugin developers should subscribe to this event to update their plugins accordingly
$.publish('plugin/swAjaxVariant/onRequestData', [me, response, values, stateObj.location]);

```

und nein, all diese ist kein nutzen für das problem in diese post, wollte es nur mal aufschreiben. (oder, hat der ajax ding in dieser post auch so eine feature?)

ps. hab oberes gefunden weil ich folgendes in eine 3rdparty theme fixen musste: wenn die template für oben genannte ajax antwort keine id=“footer–js-inline” in der script tag hat, wird diese javascript nicht ausgeführt… (bzw. wird die javascript garnicht in die&nbsp;seite addiert?)
