Materialize: Different thumbnail and enlarged image on lightbox

[akadebnath]

I am using materializecss to create a image-gallery where images of different dimensions will be uploaded. However, to maintain the thumb size I am cropping all the images in 4:3 ratio to display in page. When someone clicks on any thumbnail the main image pops up (lightbox). The popped up image can have any dimension ratio.

So, I need to use 2 images, one for thumbnail version, one for enlarged version. Is it possible with materializecss lightbox?

The gallery page will be something like this:
http://67photos.co.za/gallery.php

[fega]

Please provide a way to reproduce it. like a codepen or a snippet

[tomscholz]

Closed due inactivity. Feel free to reopen it, if it's still necessary.

[bo-oz]

Hi, I think the ask is the same as what I'm looking for. Have a way to let the materialbox() method show a different image from the one in the IMG src attribute. So basically, be able to set a attribute for the image to pull for the materialbox:

<img src="thumb.jpg" data-enlarge-image:"big.jpg" class="materialbox">

And then initiate through:

$(document).ready(function(){
    $('.materialbox').materialbox('large': 'data-enlarge-image');
  });

Don't know how to re-open, but this would be great!

[alsemany]

I had the same issue and I just resolved this by this

$('.boxwithlarge').materialbox({ onOpenStart: function(e){ e.src = e.attributes['data-enlarge-image'].nodeValue; } })

it's working perfect
here https://codepen.io/alsemany/pen/mdVvmzv