Search code examples
javascriptjqueryhtmlfancybox

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>

Solution

  • 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
                }
            }
        });