fancy-zoom
fancy-zoom copied to clipboard
Javascript fallback
Hi,
I'm using fancy zoom on a list of items. Therefore, an item box also contains a large image of the item. Unfortunately, sometimes the page is a little slow to load, and all large pictures are displayed (<1s of course, but still visible). If I add a "display:none" to large pics (or surrounding divs), the zoom popup gets moved to the right of the page. I'd also like to have a nice page when javascript is disabled (we never know), so I need this display:none option :( Any idea to to fix this issue ? Thanks !
Ok, to myself :
The item is surrounded with a .zoom div class. Add this to screen.sass (we're using sass of course, aren't you?) : .zoom :display none
In application.js :
$('.zoom').show(); $('.zoomable').fancyZoom({closeOnClick: true});
If javascript is disabled, the large images are not displayed (have to click on item, sounds ok). If enabled, items are displayed then instantly hidden by fancyzoom, not depending on the loading time.
Maybe this should go in the wiki ?
thanks for the lib, I love it !