CODEWITHSUNDEEP
jqueryresponsive-designviewportimage-gallery
nickpish
nickpish

Reputation: 847

dynamically modifying/disabling javascript based on viewport size

I'm using the galleriffic jQuery image gallery plugin within a responsive site design which can be viewed here. As you can see by resizing the browser window, I've created various states for iPad, portrait & landscape--which still displays the full image gallery, i.e. thumbnails and adjacent full-size images-- and finally the for the iPhone, which displays only thumbnails.

My problem is that with the iPhone layout, the thumbnails are still linking to the main gallery container-- which I have hidden-- whereas I'd like them to link simply to larger JPEGs to open separately, i.e. as if the galleriffic script were disabled entirely. The script is dynamically removing a "noscript" class attached to "ul.thumbs"-- so the gallery will degrade gracefully without javascript-- and I thought by trying to re-add the class via jQuery addclass I could effectively disable galleriffic from initializing, but that didn't work.

Ultimately, I'm hoping to find the most elegant solution possible for changing/disabling the galleriffic script's modification of the thumbnail links only when the viewport is 480 px or less-- is this possible?

Thanks for any guidance here.

Upvotes: 1

Views: 4149

Answers (3)

Carlos Cabo
Carlos Cabo

Reputation: 741

I had a similar problem with some carousels that must be created on mobile, but destroyed in desktop... and I did not likde the solution of being checking window width in pixels, so I created a small function to "listen" when the mediaquery state changes.

You can define your own code in every state ("on entering mobile resolution", "on leaving desktop")...

Hope could be useful for someone else ;)
https://github.com/carloscabo/MQBE

Upvotes: 0

Ed Kirk
Ed Kirk

Reputation: 583

You're better off using a CSS media query based detection to trigger your js functions, with some browsers the media query width differs from the width reported in js.

And yes people DO now resize their windows reasonably often... when ever someone rotates their iphone/android it's a window resize event.

See this related question which includes some basic code: How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

Upvotes: 1

ahren
ahren

Reputation: 16959

Inside your document.ready() (or alternative), do a conditional check.

if($(window).width() > 480){
//create gallery
}

Keep in mind this won't work for people who resize their browsers on the fly - which is pretty much nobody except for web developers.

Upvotes: 4

Related Questions