イメージホバーにのみファンシーボックスのタイトルを表示するには

Question

イメージギャラリーにFancybox pluginを使用しています。ユーザーがイメージ上を移動したときにのみイメージタイトルを表示します。私はこれを達成するためにコードのどの部分を変更するのか分かりません。

私は次へa :hover状態を追加することでCSSを編集しようとしました：

.fancybox-title-over-wrap { 
} 

と私もここにCSSの表示設定で遊んで試してみた：

.fancybox-opened .fancybox-title { 
} 

をしかし、私は運がなかった。

実際のJSファイル内で何か変更する必要がありますか？どんな助けも大いに評価されるでしょう！自分のサイトから

Answer 1

オリジナルのjsまたはCSSファイル。独自のカスタムスクリプトを作成し、それを実現するためにいくつかのfancybox APIオプションとメソッドを適用するだけです。 title効果のために、以下のオプションを試し、上記のスクリプトの中に、今

<script type="text/javascript"> 
$(document).ready(function() { 
$(".fancyLink").fancybox(); 
}); // ready 
</script> 

：あなたのようfancybox発射するカスタムスクリプトが必要になり

<a class="fancyLink" href="images/01.jpg" title="lorem ipsum">open image</a> 

このHTMLを持つ例えば

、あなたは欲しい：

<script type="text/javascript"> 
$(document).ready(function() { 
$(".fancyLink").fancybox({ 
    helpers: { 
    title : { 
    type : 'over' 
    } 
    }, 
    afterShow : function() { 
    $(".fancybox-title").hide(); 
    $(".fancybox-wrap").hover(function() { 
    $(".fancybox-title").show(); 
    }, function() { 
    $(".fancybox-title").hide(); 
    }); 
    } 
}); 
}); // ready 
</script> 

あなたは素晴らしいアニメーションを追加することもできますどのようにtitle

<script type="text/javascript"> $(document).ready(function() { $(".fancyLink").fancybox({ helpers: { title : { type : 'over' } }, afterShow : function() { $(".fancybox-title").hide(); $(".fancybox-wrap").hover(function() { $(".fancybox-title").stop(true,true).slideDown(200); }, function() { $(".fancybox-title").stop(true,true).slideUp(200); }); } }); }); // ready </script> 

ようNOTE：これはあなたがAJのJS filldeをfancyboxのv2.xの

Answer 2

：

これは上部のメインページにあることを確認します：

<!-- Add jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 

<!-- Add mousewheel plugin (this is optional) --> 
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> 

<!-- Add fancyBox --> 
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script> 

<!-- Optionaly add button and/or thumbnail helpers --> 
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script> 

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

次にあなたがこれをしたい画像に構文のこのタイプを追加します。

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a> 
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a> 

最後に、少しでもjScriptを使って機能させるようにしてください。それでも問題が解決しない場合は

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox(); 
    }); 
</script> 

そして、ここに参照してください：

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     openEffect : 'none', 
     closeEffect : 'none' 
    }); 
}); 

そして、このように：http://docs.jquery.com/Tutorials:How_jQuery_Works

は説明はあなたが要求したとして、多分JavaScriptでこれを試す見えるようにするには画像の構文：

<a class="fancybox" rel="gallery1" href="http://path-to-image.com/images/photo.jpg" title="Some Description Here."> 
    <img src="http://path-to-image.com/images/photo.jpg" alt="" /> 
</a>