Activate lightbox on click to swap image source temporarily

Question

Activate lightbox on click to swap image source temporarily

I have implemented the Materialize CSS "Material Box" lightbox plugin, but I am facing an issue. I want all the thumbnails to be uniform in size, and when clicked, the full photo should be displayed.

Currently, I am using the onclick function to change the image source. However, I am unsure how to revert back to the thumbnail image once the large photo is closed (either by clicking or pressing the escape key).

<div class="col s6 m3">
    <img class="materialboxed responsive-img" src="images/thumb1.jpg" onclick='this.src="images/photo1"'>              
</div>

Here is the Material Box JavaScript code:

      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.materialboxed');
        var options = {}
        var instances = M.Materialbox.init(elems, options);
      });

      // Using jQuery

      $(document).ready(function(){
        $('.materialboxed').materialbox();
      });

You can find more information about Materialize CSS at

I have explored various options, but haven't found a straightforward way to achieve the desired lightbox effect with cropped square thumbnails. Any suggestions or tips would be greatly appreciated!

javascript onclick materialize lightbox

Answer 1

Answer №1

If you're looking for a solution to track the state of an image click, here is one example that may work for you.

$(document).ready(function(){
    $('.image-click').click(function(){
        // Image sources
        const thumbnail = '/images/thumb1.jpg';
        const fullImage = '/images/photo1.jpg';

        // Click state
        let clicked = false;

        $(this).attr('src', clicked ? fullImage : thumbnail);
        clicked = !clicked;
    });
});

Answer 2

If you're looking for a solution to track the state of an image click, here is one example that may work for you.

$(document).ready(function(){
    $('.image-click').click(function(){
        // Image sources
        const thumbnail = '/images/thumb1.jpg';
        const fullImage = '/images/photo1.jpg';

        // Click state
        let clicked = false;

        $(this).attr('src', clicked ? fullImage : thumbnail);
        clicked = !clicked;
    });
});

Answer 3

Answer №2

There's no need to rely on the onclick event in this scenario. Materialize already takes care of binding onclick for those images. It offers native methods that can be used with pure JavaScript (no jQuery) to achieve exactly what you want:

onOpenStart Function null: Callback function called before materialbox is opened.

onCloseEnd Function null: Callback function called after materialbox is closed.

In the example below, let's assume there is a standard materialboxed photo gallery with thumbnails named thumb_whatever.jpg, while also serving the original-sized photo named whatever.jpg in the same directory.

We are dynamically changing the src attribute by removing the thumb_ prefix to display the original image, which will then immediately be lightboxed by Materialize.

After closing the lightbox, we set the src attribute back again without the thumb_ prefix.

This is achieved during the initialization of Materialbox:

// Initializing Materialbox
const mb = document.querySelectorAll('.materialboxed')
M.Materialbox.init(mb, {
  onOpenStart: (el) => {
    var src = el.getAttribute('src') // obtain the src
    var path = src.substring(0,src.lastIndexOf('/')) // extract the path from the src
    var fileName = src.substring(src.lastIndexOf('/')).replace('thumb_','') // get the filename and remove 'thumb_' prefix
    var newSrc = path+fileName // reassemble without the 'thumb_' prefix

    el.setAttribute('src', newSrc)
  },
  onCloseEnd: (el) => {
    var src = el.getAttribute('src') // obtain the src
    var path = src.substring(0,src.lastIndexOf('/')) // extract the path from the src
    var fileName = src.substring(src.lastIndexOf('/')).replace('/', '/thumb_') // get the filename and add 'thumb_' prefix
    var newSrc = path+fileName // reassemble with the 'thumb_' prefix
    
    el.setAttribute('src', newSrc)
  }
})

This approach works flawlessly for me across different platforms.

Answer 4

There's no need to rely on the onclick event in this scenario. Materialize already takes care of binding onclick for those images. It offers native methods that can be used with pure JavaScript (no jQuery) to achieve exactly what you want:

onOpenStart Function null: Callback function called before materialbox is opened.

onCloseEnd Function null: Callback function called after materialbox is closed.

In the example below, let's assume there is a standard materialboxed photo gallery with thumbnails named thumb_whatever.jpg, while also serving the original-sized photo named whatever.jpg in the same directory.

We are dynamically changing the src attribute by removing the thumb_ prefix to display the original image, which will then immediately be lightboxed by Materialize.

After closing the lightbox, we set the src attribute back again without the thumb_ prefix.

This is achieved during the initialization of Materialbox:

// Initializing Materialbox
const mb = document.querySelectorAll('.materialboxed')
M.Materialbox.init(mb, {
  onOpenStart: (el) => {
    var src = el.getAttribute('src') // obtain the src
    var path = src.substring(0,src.lastIndexOf('/')) // extract the path from the src
    var fileName = src.substring(src.lastIndexOf('/')).replace('thumb_','') // get the filename and remove 'thumb_' prefix
    var newSrc = path+fileName // reassemble without the 'thumb_' prefix

    el.setAttribute('src', newSrc)
  },
  onCloseEnd: (el) => {
    var src = el.getAttribute('src') // obtain the src
    var path = src.substring(0,src.lastIndexOf('/')) // extract the path from the src
    var fileName = src.substring(src.lastIndexOf('/')).replace('/', '/thumb_') // get the filename and add 'thumb_' prefix
    var newSrc = path+fileName // reassemble with the 'thumb_' prefix
    
    el.setAttribute('src', newSrc)
  }
})

This approach works flawlessly for me across different platforms.

Activate lightbox on click to swap image source temporarily

Answer №1

Answer №2

Similar questions

Utilizing a variable in a for loop with Django

How can I create spacing between squares in an HTML div element?

The utilization of useState can potentially trigger an endless loop

The Photoswipe default user interface cannot be located

Having difficulty retrieving items from Mongoose-Node database

What is the destination for next() in Express js?

Running cy.task after all test suites can be done by adding the task in a

Halt execution of routes using backbone.js

What is the best way to remove any objects in this array that have empty strings as values?

Keep rolling the dice until you hit the target number

Can you explain the significance of the res.render callback parameter in Express 4.0 for Node.js?

Troubleshooting Angular 2: Instances of Classes Not Being Updated When Retrieving Parameters

mention a numerical value/heading within a JSON list

Headers error encountered during sending request

Error Message "Alexa.create is not a valid function" encountered while using the Alexa HTML Web API on the Echo Show 10

Difficulty encountered while executing JavaScript in Chrome 78 with Python and Selenium, as pages are not switching

The tooltip popup does not appear within the nz-tabs

FullCalendar jQuery caught in an endless loop

Transferring data from AJAX to PHP class methods

I encountered an error message stating "Unexpected token {" while trying to import the module "express-fileupload"