Lightbox

New Member
2 0 0

I am using the theme New Standard and I would like to remove the lightbox. I don't like how you can't just click through the pictures, it has to pop out first. Does anybody know how to do this? I would hate to have to switch over to a whole new theme, but it does make it difficult for my customers to shop with the lightbox blocking their options.

 

Thanks!

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 64

Hi Emma,

Britton here with the Shopify support team.

If you are talking about removing the lightbox effect from blog images and the like you can do that by commenting out this block of code inside of the shop.js file:

standard.lightbox = function () {
  if ($.isFunction($.fn.colorbox)) {
    // For all images added with the RTE that aren't linking to a page,
    // when we are looking at a blog post.
    $('.template-article .rte img').not('a > img').each(function() {
      // Matching images that aren't already shown in their original size.
      var re = /(_small)|(_compact)|(_medium)|(_large)|(_grande)/;
      var src = $(this).attr('src');
      if (re.test(src)) {
        // Determining the URL to the original image.
        var href = src.replace(re, '');
        // Activating lightbox.
        $(this).wrap('<a></a>')
          .parent()
          .attr('href', href)
          .addClass('lightbox')
          .colorbox({
            maxWidth:"95%",
            maxHeight:"95%",
            scalePhotos:true});
        }
    });
    $('.lightbox').colorbox({
      maxWidth:"95%",
      maxHeight:"95%",
      scalePhotos:true});
    $('.inline').colorbox({
      maxWidth:"95%",
      maxHeight:"95%",
      inline:true});
  }
}

to comment it out, start it with /* and end it with */. For me, that code block started on line 331 and ended on line 362. That should make all of the images that used to be lightboxes change into regular, unclickable images. Make sure you back up your theme by duplicating it though before making any code changes. Particluarly to the javascript files as the theme doesn't back up old versions of those.

I hope that helps!

-Britton

Britton Shopify Guru
0 Likes
New Member
2 0 0

Hi! I am trying to remove the "Pop-up" images from my product page. I would just like to be able to click through the images on the orignal page without them popping up. You can see an example here. http://emma-lyn.myshopify.com/collections/medium-clutch-wristlet/products/the-north-shore-everyday?v...

0 Likes
Shopify Partner
26 0 0

Is there an update to how to do this as shop.js no longer exists?

0 Likes