XF 2.2 Opening an image in lightbox

[Orit]

Hello
Is there a way to make an image in a template open in lightbox, when clicked?

This is my code. It opens the image in a new tab, not in a lightbox:

<a href="{{ link('media/full', $mediaItem) }}" style="cursor: pointer;"
    class="js-lbImage"
    target="_blank"
    data-src="{$mediaItem.lightbox_src}"
    data-type="{$mediaItem.lightbox_type}">               
    <img class="xfmg-image" src="{{ link('media/full', $mediaItem)}}" width="100%" data-zoom-target="1"/>
</a>

Thanks!!

 

[CStrategies]

I would also like to know this.

 

[Seeker-Smith]

There already is a lightbox.

 

[CStrategies]

There already is a lightbox.

Right, but I think OP is asking how to instantiate the built-in lightbox feature on specific images.

I have been working on this today, and so far this is what I have found:

First, you need to load the lightbox script in the template where you want images to appear in a lightbox:

        <xf:css src="lightbox.less" />
        <xf:js prod="xf/lightbox-compiled.js" dev="vendor/fancybox/jquery.fancybox.js, xf/lightbox.js" />

        <xf:if is="!page_param('hasLb')">
            <script class="js-extraPhrases" type="application/json">
            {
                "lightbox_close": "{{ phrase('lightbox_close')|escape('js') }}",
                "lightbox_next": "{{ phrase('lightbox_next')|escape('js') }}",
                "lightbox_previous": "{{ phrase('lightbox_previous')|escape('js') }}",
                "lightbox_error": "{{ phrase('lightbox_error')|escape('js') }}",
                "lightbox_start_slideshow": "{{ phrase('lightbox_start_slideshow')|escape('js') }}",
                "lightbox_stop_slideshow": "{{ phrase('lightbox_stop_slideshow')|escape('js') }}",
                "lightbox_full_screen": "{{ phrase('lightbox_full_screen')|escape('js') }}",
                "lightbox_thumbnails": "{{ phrase('lightbox_thumbnails')|escape('js') }}",
                "lightbox_download": "{{ phrase('lightbox_download')|escape('js') }}",
                "lightbox_share": "{{ phrase('lightbox_share')|escape('js') }}",
                "lightbox_zoom": "{{ phrase('lightbox_zoom')|escape('js') }}",
                "lightbox_new_window": "{{ phrase('lightbox_new_window')|escape('js') }}",
                "lightbox_toggle_sidebar": "{{ phrase('lightbox_toggle_sidebar')|escape('js') }}"
            }
            </script>
        </xf:if>
        <xf:page option="hasLb" value="{{ true }}" />

Then, the images have to be wrapped in an a tag and need the bbImage class. I'm still playing around with this, so anyone else feel free to chime in, but I did get this to work (in this case, it displays the thumbnail image from an attachment and loads the full image in the lightbox):

<a href="{$attachment.direct_url}" target="_blank" class="js-lbImage" data-lb-sidebar-href="" data-lb-caption-extra-html="" data-fancybox="lb-undefined" style="cursor: pointer;" data-caption="">
<img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}"
width="{$attachment.thumbnail_width}" height="{$attachment.thumbnail_height}" class="bbImage" loading="lazy" />
</a>