I need to add a lightbox functionality for zooming single images in blocks. I thought to use magento 2 fotorama lightbox that's used for the product gallery. I would show the block in the product page so the js library would be already loaded. Any advice or help? I don't know how to make it. Thanks a lot.


Magento 2 offers a lot of jQuery Widgets out of the box. Magnifier Widget would solve your solution. High level implementation is as follows:

<script type="text/x-magento-init">
  "<element_selector>": {
    "mage/gallery/gallery": {
        "data": [{
            "thumb": "<small_image_url>",
            "img": "<small_image_url>",
            "full": "<small_image_url>",
            "caption": "<message>",
            "isMain": "<true/false>"
        "mixins": ["magnifier/magnify"],
        "magnifierOpts": {
           "enabled": <true/false>,
           "eventType": "<hover/click>",
           "width": <number>,
           "height": <number>,
           "top": <number>,
           "left": <number>,
           "fullscreenzoom": <number>

You can use this code in any template file. Hope this helps.

EDIT : this method does not work due to its dependent on the fotorama gallery, here is a jQuery Fancybox alternative

file: app/code/design/frontend/Vendor/Package/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Text" name="gs.font.awesome.js.include">
                <action method="setText">
                    <argument translate="true" name="text" xsi:type="string">
                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

Then add this markup to your template file, replacing your images, respectively.

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

Fancy Box docs

  • I'll try this out: it seems what I was searching.
    – Dany92
    Jul 24 '18 at 18:43
  • Sorry for the question but wich kind of reference I should use for the <element_selector>? if I'm targeting an image with class imballo-photo, can I use the jQuery selector? Can I place the code in the .phtml file? THANKS
    – Dany92
    Jul 26 '18 at 10:39
  • I've updated my answer. Jul 26 '18 at 17:14
  • Thanks Chris, I didn't want to load additional resources, but thanks for your help. I couldn't found more explanations about the Gallery widget, so I changed the approach and used the modal widget.
    – Dany92
    Jul 29 '18 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.