Conditional Javascript for Media Queries

[thegingerkid]

I have a portfolio with js-based photo galleries (slideshow with prev/next controls) and am wondering if there is a simple way to do either of these things:

 

- Force the gallery images to display in line rather than as a slideshow when the viewing window below a specific width, as is done here: http://wells-demo.squarespace.com/ (view it at normal maximum size on a computer and then shrink the window or view on mobile to see what I mean)

 

- Set the gallery to autoplay ONLY on mobile devices, and leave it on manual for laptops and desktops.

 

I've attached the CSS and js for the gallery modules. Is that okay? It seems like a lot of code to paste directly into the post but please let me know if I should do that instead.

 

Just a note, there is an additional separate folder for the module itself but I don't think it's needed, since virtually all of the customization I did for this module was with the css and js files from the main site template folder, and that's where the media queries and autoplay code are located.

 

If anyone knows how to achieve either or both of the above options, I would very much appreciate the help!

gallery-css.txt

gallery-javascript.txt

gallery-javascript-min.txt

Edited March 4, 2016 by thegingerkid

[davej]

I don't think it would be too difficult to accomplish with media queries. If the width is less than some amount simply hide the slideshow div and display all the images.Since the slideshow div is hidden the Javascript click event won't fire.

[thegingerkid]

Thanks but I'm new to media queries and spent ages getting the rest of the responsive deisgn to work as it does now. Is there any chance you could tell me exactly how to do that (remove the slideshow and force all images for that gallery to display in line)? I've tried a few things but am definitely doing something wrong.

[davej]

Well, you haven't provided your html so it isn't easy to guess what you are doing. The basic idea is to hide or show the slideshow, and you can use media queries to do that, but you'll also need to have the individual images on the page in a vertical arrangement so that they can also be hidden or unhidden.

@media screen and (max-width: 640px){

/* CSS to display vertical image collection and hide slideshow div */ 

}

@media screen and (min-width: 641px){

/* CSS to display slideshow div and hide vertical image collection */ 

}