Question

I’m trying to get the fancybox thumbs to work properly.

I’ve imported all the js / css file but it only shows the picture I’ve clicked on (with no thums and no slide show). I want every picture in the same page to load into the fancybox (w/thumbs) and the “alt” attribute as title on each picture.

HTML:

 .....
<a class="fancybox-thumb" rel="fancybox-thumb" href="/test.jpg">
   <img src="test.jpg" alt="text showing">
</a> 
 .....
 ......
<a class="fancybox-thumb" rel="fancybox-thumb" href="/awesome.jpg">
   <img src="awesome.jpg" alt="Awesome">
</a> 

Javascript

$('.fancybox-thumb').each(function () {
$(this).attr('rel', 'fancybox-thumb').fancybox({
    helpers: {
        type: 'image',
        openEffect : 'none',
        closeEffect : 'none',
        title : {
            type: 'inside'
        },
        overlay : {
            opacity: 0.8,
            css: {
                'background-color' : '#000'
            }
        },
        thumbs : {
            width: 50,
            height: 50
        }
    },
    beforeLoad: function () {
        this.title = $(this.element).find('img').attr('alt');
        this.href = $(this.element).find('img').attr('src').replace('_thumb', '');
    }
});
});

SOLUTION

$('.fancybox-thumb').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: true,
nextClick: false,
helpers: {
    thumbs: {
        width: 50,
        height: 50
    },
    title : {
        type: 'inside'
    }
},
beforeLoad: function () {
    this.title = $(this.element).find('img').attr('alt');
}
});

Answer 1

$('.fancybox-thumb').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: true,
nextClick: false,
helpers: {
    thumbs: {
        width: 50,
        height: 50
    },
    title : {
        type: 'inside'
    }
},
beforeLoad: function () {
    this.title = $(this.element).find('img').attr('alt');
}
});