jquery - Fancybox list of pictures not showing up in Internet Explorer -
i using fancybox image gallery. having serious difficulty getting work in internet explorer. every other browser have tried works - besides internet explorer.
the problem:
every time reload page, some of pictures show, , others not. it's random few pictures, not same ones repeatedly.
i tried solution posted this similar question, didn't fix issue.
this code i'm using - in particular sticking out?
<script type='text/javascript'> $(document).ready(function(){ $('ul.imagegallery img').resizecrop({ width: 146, height: 146, vertical:"top" }); $('a[href$='.jpg'],a[href$='.png'],a[href$='.gif']').attr('rel', 'gallery'); $('.fancybox').fancybox({ beforeload: function() { this.title = $(this.element).attr('caption'); }, preveffect : 'none', nexteffect : 'none', helpers : { title : { type: 'inside' } }, margin : [20, 80, 20, 80] }); }); </script> here fiddle if want see page. looks fine on fiddle, not work in internet explorer.
after lot of looking @ this, believe have deciphered answer.
$('a[href$='.jpg'],a[href$='.png'],a[href$='.gif']').attr('rel', 'gallery'); line unnecessary.
$('ul.imagegallery img').resizecrop({ width: 146, height: 146, vertical:"top" }); this best left out, , supplemented css saying:
<style type="text/css"> .imagegallery img { width: 146px; height: 146px; } </style> from that, document ready should this:
$(document).ready(function(){ $("a.fancybox").fancybox({ beforeload: function() { this.title = $(this.element).attr('caption'); }, preveffect : 'none', nexteffect : 'none', helpers : { title : { type: 'inside' } }, margin : [20, 80, 20, 80] }); });
Comments
Post a Comment