Produkt Detailseite: Anpassung der Lightbox Grösse für die Produktbilder

Shopware 5 Themes & Design
1

Hallo,

wenn man auf der Produktdetailseite auf das Bild klickt öffnet sich eine Modal Lightbox. Diese Lightbox nimmt standardmässig die volle Bildschirmgrösse ein.
Die ist für den Nutzer allerdings auf dem Desktop verwirrend, weil er denkt, dass er die Produktseite verlassen hat. Daher möchte ich gerne die Grösse der Lightbox verkleinern.

Wie kann ich diese Grösse ändern?
Ideal wäre es wenn die Grösse der Lightbox sich automatisch and die Bildgrösse mit den Thumbnails und den Buttons anpasst.

Wenn man die Lightbox öffnet, sieht man im Sourcecode, dass die Grösse der Lightbox über den Inlinestyle der div Box eingestellt wird (width, height):

Wenn ich hier in den Chrome Developertools manuell die Breite und die Höhe auf 50% einstelle, wird die Lightbox kleiner. In der Datei modal.less steht, dass 
die Inline Styles in jquery.modal.js generiert werden:


The inline styles are generated by the `jquery.modal.js` file.

Aber in jquery.modal.js kann ich keinen Eintrag finden, mit dem man die Grösse der Lightbox verändern kann.

Hat irgendjemand eine Idee, wie das geht?

Danke und viele Grüsse,

Jens
 

P.S.: Ach ja: Ich verwende Shopware 5.1.1 mit dem Responsive Theme
2

Hi,

ich habe jetzt die Lösung (nach viel Detektivarbeit). Die 100% Lightboxbreite und Höhe sind hart in der Datei
jquery.image-gallery.js eincodiert. Man kann die Lightboxgrösse verändern, indem man die Funktion “onClick” in der
“swImagegallery” überschreibt:

$.overridePlugin('swImageGallery', {
  onClick: function (event) {
    var me = this,
        plugin = me.getImageSlider();

    $.modal.open(me.$template || (me.$template = me.createTemplate()), {
        sizing: 'auto',
        width: '800px',
        height: '800px',
        animationSpeed: 350,
        additionalClass: 'image-gallery--modal no--border-radius',
        onClose: me.onCloseModal.bind(me)
    });

    me._on(me.$zoomInBtn, 'click touchstart', $.proxy(me.onZoomIn, me));
    me._on(me.$zoomOutBtn, 'click touchstart', $.proxy(me.onZoomOut, me));
    me._on(me.$zoomResetBtn, 'click touchstart', $.proxy(me.onResetZoom, me));

    picturefill();

    me.$template.swImageSlider({
        dotNavigation: false,
        swipeToSlide: true,
        pinchToZoom: true,
        doubleTap: true,
        maxZoom: me.opts.maxZoom,
        startIndex: plugin ? plugin.getIndex() : 0,
        preventScrolling: true
    });

    me.toggleButtons(me.getImageSlider());

    $.publish('plugin/swImageGallery/onClick', [me, event]);
  }
 });

Man muss nur die “height” und “width” entsprechend anpassen. Ich habe beides auf 800px gesetzt. Im eigenen Theme muss man diesen Code in eine eigene Datei “src/js/jquery.my-image-gallery.js” schreiben und in die Theme.php Datei eintragen:

   protected $javascript = [
        'src/js/jquery.my-image-gallery.js'
    ];

Viel Spass,

Jens

2 „Gefällt mir“
3

Warum so kompliziert?

http://forum.shopware.com/discussion/comment/123494/#Comment_123494

 

1 „Gefällt mir“
4

Danke!

 

Das hatte ich nicht gesehen. In dem Post ging es genau um mein Problem. 

Naja, jetzt habe ich wenigstens verstanden wie in Shopware 5 die Javascripteinbindung funktioniert und wie ich in meinem Theme das Javascript vererben und verändern kann.

 

Ciao,

 

Jens