punkie punkie - 6 months ago 30
Javascript Question

Hide other images while running fancybox-thumb

I want to hide a large number of images on the html page. While using fancybox-thumbnail to show there are other images to view. Goal is to have the page look clean and not cluttered with a bunch of images. But it's not working, not sure if it's something conflicting or does this idea not work and I HAVE to show the other images on the page.

HEAD Tags:

<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>


BODY Tags:

<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/3pk.jpg">
<div class="imgconcept"></div></a>
<div class="hidden">
<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/clcfashnb.jpg"><img src="images/art/clcfashnb.jpg" alt="" /></a>
</div>

Answer

EDIT:

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>

<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />

<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers : {
        title   : {
            type: 'outside'
        },
        thumbs  : {
            width   : 50,
            height  : 50
        }
    }
});
});
</script>

DEMO

The problem was actually straight forward. You were missing two vital libraries for the thumbnails to work.

jquery.fancybox-thumbs.js

jquery.fancybox-thumbs.css

That's all there was to it.

Your code was good.

$(".fancybox-thumb").fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        helpers: {
            title: {
                type: 'outside'
            },
            thumbs: {
                width: 50,
                height: 50
            }
        }
    });