I read some thread in here, but I haven't found a good solution for gallery item. I am not expery in jQuery so please bear with me here. I have code to display one image outside iframe. But my goal is to add left/right arrow to scroll through my gallery.
I have this script
<script type="text/javascript">
$(document).ready(function () {
$('.fancybox').click(function (e) {
e.preventDefault();
parent.$.fancybox({
type : "image", // force type of content to image
href: this.href,
title: this.title,
helpers: {
title: { type: 'inside' },
overlay: {
opacity: 0.3
} // overlay
//, buttons: {}
} // helpers
}); // fancybox
}); // click
});
</script>
and my HTML code is
<a rel="gallery" class="fancybox" href="images/01.jpg" title="aaasdasdasd"><img alt="" src="thumbnails/01.jpg"/></a>
<a rel="gallery" class="fancybox" href="images/02.jpg" title="bbsdfsdfsdfdsf"><img alt="" src="thumbnails/02.jpg"/></a>
FancyBox pop up works. But I would like to add arrows to scroll along my "gallery item". I tried adding gallery code .attr('rel', 'gallery') right above parent.$.fancybox({
but the popup just disappear.
Adding openEffect : 'none', closeEffect : 'none', nextEffect : 'none', prevEffect : 'none', padding : 0, margin : [20, 60, 20, 60] // Increase left/right margin
also make the popup disappear.
Is it possible to do that?