1

FancyBox Image Gallery を機能させるために何時間も試みていますが、代わりに画像ファイルが FancyBox レイヤーではなくブラウザーで開きます。サイトで別の Fancybox 要素を使用していますが、完全に機能しています。誰でも助けることができますか？

ヘッダー コード:

<link media="screen" href="jquery.fancybox.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.2.js">
<script type="text/javascript" src="jquery.hcsticky-min.js">
<script type="text/javascript" src="superfish.js">
<script type="text/javascript" src="jquery.flexslider-min.js">
<script src="jquery.fancybox.pack.js" type="text/javascript">

私が試したいくつかのことだけ：

$(document).ready(function() {
         // Photo Gallery
         $('a.photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });

});

$(document).ready(function() {
         // Photo Gallery
         $('photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });

});

$(document).ready(function() {
         // Photo Gallery
         $('a.photogallery').fancybox();

});

$(document).ready(function() {
         // Photo Gallery
         $('.photogallery').click(function() {
         $('photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });
         }
});

HTML ギャラリー (class="fancybox photogallery" を試し、class と rel タグに異なる値も試しました):

<div class="photos">
            <a title="" href="/files/thumb/f66cf2bba997313/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/f66cf2bba997313/180/180/fit"></a>
            <a title="" href="/files/thumb/36d8b240686ea33/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/36d8b240686ea33/180/180/fit"></a>
            <a title="" href="/files/thumb/e0986f42bd03cf4/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/e0986f42bd03cf4/180/180/fit"></a>
            <a title="" href="/files/thumb/1160ee763726480/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/1160ee763726480/180/180/fit"></a>
</div>

他の要素は完全に機能します:

         // Brochure Request Overlay
         $('.brochure-request').fancybox({
                   padding: 0,
                   width: 800,
                   height: 400,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no'
         });

<a class="brochure-request fancybox.iframe btn orange-btn" href="/en/brochures">Brochure</a>

何か案は？前もって感謝します！

フィリップ

4

1 に答える 1

3

あなたの試みにはいくつか問題がありますが、 $('a.photogallery').fancybox(); 働くべきだった。

これが私がやったことです：

$(function() {
    $('a.photogallery').fancybox({
                   type: 'image',
                   padding: 0,
                   scrolling: 'no',
                   helpers : {
                        overlay: {
                           css: {'background-color': '#000'},
                           opacity: 0.3
                        },
                        title : { type : 'inside' }
                   }
         });
});

そしてフィドル： http://jsfiddle.net/fstreamz/2qcUs/1/

注: フィドルのリソースとして 2.0.4 を使用しています。

私はあなたの js/css パスをチェックし、エラーのコンソールだけでなく、あなたが想定しているものすべてが含まれていることを確認します。次に、href にある画像パスが実際の画像にリダイレクトされていないことを確認します。

アップデート

これらの href には画像拡張子がありません。type: 'image' を渡すことができるので、それらが画像であることを認識できます。それらは拡張子がないため、Fancybox はおそらくそれらをどう処理すればよいかわかりません。config/fiddle を type:'image' で更新しました

于 2013-07-19T05:51:01.430 に答える