0

ファンシーボックスの親指を正しく機能させようとしています。

すべての js / css ファイルをインポートしましたが、クリックした画像のみが表示されます (親指もスライドショーもありません)。同じページ内のすべての画像をファンシーボックス (親指付き) に読み込み、各画像のタイトルとして「alt」属性を使用したいと考えています。

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', '');
    }
});
});

解決

$('.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');
}
});
4

1 に答える 1

0 
$('.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');
}
});
于 2012-04-19T11:01:17.007 に答える