Issue with image lightbox and enlargement / Jquery Mobile
- by Matt
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