Sweet. The new toggle function works great. Exactly what I was looking for.

As for the gallery issue. What you had suggested was one of the things I had tried but the look of the magnific popup isn't something I'm in love with. However, after painstakingly going into the plugins.css file I was able to override some of the styles to make it look exactly like the cbp lightbox (changing the arrows, getting rid of the magnifying glass, etc).

So everything seems to be working out just great. I haven't tested everything on any actual mobile devices since I only have the test server running on my machine. Hopefully everything runs smoothly when I host it.

Thanks for all your help. If I need anything else, I know where to ask!

Sure, here's a revised version with resize event bind to window and it's bit more elegant and simpler.

function toggleCbp() {
  var link = $('.cbp-item').find('a');
  if ($(window).width() < 992) {
   link.addClass('disabled');
  } else {
   link.removeClass('disabled');
  }
 } toggleCbp();

 $(window).bind('resize', function() {
  toggleCbp();
 });

and in custom.css place the following:

.cbp-item a.disabled {
 pointer-events: none;
}

.cbp-item a.disabled .cbp-caption-activeWrap {
 display: none;
}

All this does is basically just adding a class "disabled" on image link when the window is less then 992px and then the CSS disabled the click event and hides the hover animation.

- The second issue can be resolve by removing "cbp-lightbox" class from all 4 images and adding class "gallery-item".
The images then will be using the same lightbox and will be all in one lightbox gallery no matter that they are not wrapped in the same parent div.

Please find attached new working example.

Cheers!
Lazar

Awesome!

I had something very close but wasn't quite there. I'm hoping to get it to automatically adjust on the window resize just for accessibility sake, however, I'm not quite sure how to accomplish that. Maybe window.matchMedia()? I'm not sure if that will trigger it over and over multiple times though while resizing. It's not a huge deal if I can't get that working as I'm sure users would rarely run into that.

I do have a second question on the same topic of the cbp-lightbox if you don't mind me asking...

Is there any way to get multiple instances of the cbp to work together when triggering the lightbox? I'm not sure if that's the best way to ask to make it make sense so I attached the zip you sent with modifications that match closely to the layout I'm going for.

Basically the large image on top would be the main project image and the others below are additional images that go along with the project. Currently when clicking on the top image it triggers the lightbox but only for that instance of cbp. Likewise when clicking any of the lower images, they trigger the lightbox but only cycles through those three. I'm assuming it runs based on the parent id (js-grid-1 or js-grid-2). Can I get these to work together to where when I click on any of the images the lightbox shows image (# of 4) instead of the current (1 of 1) or (3 of 3)?

I've tried multiple things but no luck so far. Since I need other information between I've had to break up the cbp instances. I found a work around by hiding some <a></a> within each id that mimic the other images but that's obviously not ideal.

Hopefully that makes sense.

I added code to the bottom of scripts.js and then one style at the top of custom.css.

Thanks again!

Hi there,

So glad you're pleased with the template :)

I presume you're thinking of portfolio items / gallery. Their hover animation is triggered by cbp-caption class and lightbox with cbp-lightbox. 

To disable hover animation and lightbox feature on small screens can be done easily with JS, as far as I know the PHP alone cannot detect viewport size or media queries.

With the code below you can detect if the screen is less then 992px in width (change to smaller if you like) then it will remove both caption (hover animation) and lightbox classes from every portfolio item and also prevent the image link click.

// remove hover Caption and Lightbox
 if ($(window).width() < 992) {
  var link = $('.cbp-item').find('a'),
   caption = 'cbp-caption',
   lightbox = 'cbp-lightbox';
  if (link.hasClass(caption) || link.hasClass(lightbox)) {
   link.removeClass(caption).removeClass(lightbox);
   link.on('click', function() {
       return false;
   });
  }
 }

You can paste this code at the bottom of your scripts.js file just before closing jQuery.

Please also find attached working example zip file.

Just to point out the code will work only on smaller screen than 992px so to test on the desktop you can resize the browser window but then you must refresh the page.

Let me know if you have any questions at all.

Cheers!
Lazar

I recently bought the Wander HTML Template from Evnato and have so far been loving it. I've been converting it over to work very nicely with PHP and my databases.

However, I have a question that hopefully has a quick answer.

Is there a way to disable the cbp-lightbox plugin (including the hover animation, etc) once the media width reaches a certain point? For example on a phone's screen the lightbox is really no use since the image already takes up 95% of the screen's width.

I know I could essentially rely on having the code in there twice, one with the lightbox and one without and just use css media tags to toggle the display of each depending on the width. But I feel there should be a better way of doing this.

Thanks in advance!