Produktbild-Lightbox (Photoswipe) auf anderen Seiten verwenden, Wave Theme

[ploxid]

Dass der ‘Popup’-/Zoom-effekt der Produktbilder im Wave Theme mit Photoswipe gemacht wird hab ich herausgefunden, leider aber nicht viel mehr davon verstanden.

Von anderen .tpl hab ich mir die folgenden Importe abgeschaut, aber leider hab ich keine Ahnung, wie man die JS-Initialisierung von Photoswipe korrekt in Oxid macht.

[{include file="page/details/inc/photoswipe.tpl"}]
[{oxscript include="js/libs/photoswipe.min.js" priority=8}]
[{oxscript include="js/libs/photoswipe-ui-default.min.js" priority=8}]

Was muss ich machen, damit ein (oder auch mehrere) nicht-Produktbilder, die ich irgendwo in einem Template darstelle bei Klick so wie die Produktbilder vergrößert dargestellt werden?

[rubbercut]

PhotoSwipe Documentation: Getting Started

[ploxid]

Danke, da war ich natürlich auch schon und hab inzwischen verstanden, dass mir Photoswipe ohne Hilfe, wie ich es in Oxid für andere Bilder nutzen kann, leider zu komplex ist.

Ich hab herausgefunden dass die Initialisierung beim Wave-Theme in foglenden Dateien erfolgt:

out\wave\src\js\javascript.async.js
out\wave\src\js\javascript.js
out\wave\src\js\pages\details.mins.js

aber meine Versuche die Initialisierung für andere Bilder in anderen Templatedateien hinzukriegen sind bisher gescheitert.

[foxido.de]

Zunächst einmal musst das Gerüst für pswp (page/details/inc/photoswipe.tpl) einbinden: s. layout/base.tpl (ca. Z. 222: ist nur für die Klasse “details” vorgesehen und muss für contents erweitert werden )

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>

details.mins.js

dürfte nur für Flow zutreffen. Ich würde mich auf

<script type="text/javascript" src="[https://www.xxx.de/out/wave/src/js/libs/photoswipe.min.js?1617010635](view-source:https://www.xxx.de/out/wave/src/js/libs/photoswipe.min.js?1617010635)"></script> <script type="text/javascript" src="[https://www.xxx.de/out/wave/src/js/libs/photoswipe-ui-default.min.js?1617010635](view-source:https://www.xxx.de/out/wave/src/js/libs/photoswipe-ui-default.min.js?1617010635)"></script>

konzentrieren.