Issue with image lightbox and enlargement / Jquery Mobile

Posted by Matt on Pro Webmasters See other posts from Pro Webmasters or by Matt
Published on 2012-09-19T16:35:52Z Indexed on 2012/09/19 21:51 UTC
Read the original article Hit count: 246

Filed under:
|

I'm working on a redesign of my weather website using Jquery Mobile.

I have it set up so that you drill down through a series of content containers to get to the weather info (each group of info opens in a dialog display). Everything's worked well, but I've run into an issue with my images.

I have them sized so that they fit a mobile device's screen nicely, but because of that, when you look at them in a desktop browser, you can't really make out what the image is. I've tried several image lightbox / enlargement solutions, but for some reason, none of them have worked. Either nothing happens or the images open in a new window. I thought that this might be caused by Jquery Mobile somehow overwriting the scripts and css of the lightbox / enlargements I've tried. I'm not completely sure though that this is the case, and if it is, how I can get around it to be able to enlarge the images to their original size, preferably onclick.

Here is a working (for the most part - still some kinks to work out) example. If you look under the "Tropical" section at the "Satellite-Derived Products", you'll see what I mean.

http://www.suncoaststormwatch.com/Beta/Index.html

© Pro Webmasters or respective owner

Related posts about jQuery

Related posts about mobile