Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

Disable javascript lightbox when in smaller viewports

Hi everyone.

As an exercise, I created a lightbox for a photo gallery using jquery. I followed along with the "Create a simle lightbox" course in Jquery Basics section.

What I'd like to do is "switch off" or disable the script when screen width is very small. I intend to just display the images in a single column and the lightbox will be redundant.

is there a way I could do this? I tried searching for this on the webs but I found mixed results.

If anyone can help, I'd really appreciate it! Thanks! -S

benfarnham
benfarnham
17,073 Points

You could do few different things. One option would be to set a conditional statement testing the window width and then place your code inside of the statement. Maybe something like, 

$(document).ready(function(){
  if($(window).width() < 768 ) {
    //insert your lightbox code here
  }
});

If you are worried about someone resizing the browser and maintaining consistency, you could call the '.resize()' method in jQuery. Using:

$(window).on('resize', function(){
  // You can use the if statement from before here as well
});

It can also be written like:

$(window).resize(function(){

});

1 Answer

Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points
Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

Amazing. You are a wizard. The first solution worked perfectly! I'm happy to have learned this method, too. Thanks!

benfarnham
benfarnham
17,073 Points

Happy to help. :)