0

jqueryのsimplyscroll.jsというプラグインで作成されたスクローラーがあります。その中で、データベースを使用して実行時にロードされた多くの画像をスクロールします。すべての画像に、データベースによってロードされたテキストを含む画像のファンシーボックスを適用したいと思います:(ロードしたいテキストは内部にあります$img['txt']）コード：

<ul id="scroller2">
<?php
   $qry_img= $db->query("SELECT * FROM image_prodotti;");
   while( $img = $qry_img->fetch_array() ){
    echo '<li class="new"><a href="img/prodotti/caricati/'.$img['url'].'" class="fancy"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></a></li>';
 ?>          
</ul>

<script type="text/javascript">
$(document).ready(function(){
    $("a.fancy").fancybox({
        'transitionIn'  :   'fade',
        'transitionOut' :   'fade',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true
    });
});
</script>
4

1 に答える 1

0

それを行うには3つの可能な方法があります：

最初（最も簡単で最も単純）-タグにtitle属性を追加し、その値として設定します。<a>$img['txt']

<ul id="scroller2">
<?php
   $qry_img= $db->query("SELECT * FROM image_prodotti;");
   while( $img = $qry_img->fetch_array() ){
    echo '<li class="new"><a href="img/prodotti/caricati/'.$img['url'].'" title="'.$img['txt'].'" class="fancy"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></a></li>';
 ?>          
</ul>

スクリプトに変更を加える必要はありません。このオプションを使用すると、サムネイルにカーソルを合わせたときにが表示されることに注意してください。titletooltip

2番目-サムネイル（タグ）$img['txt']の属性の値として設定します：alt<img>

<ul id="scroller2">
<?php
   $qry_img= $db->query("SELECT * FROM image_prodotti;");
   while( $img = $qry_img->fetch_array() ){
    echo '<li class="new"><a href="img/prodotti/caricati/'.$img['url'].'" class="fancy"><img src="img/prodotti/caricati/'.$img['url'].'" alt="'.$img['txt'].'" /></a></li>';
 ?>          
</ul>

'titleFromAlt':true次に、APIオプションをスクリプトに追加します。

$(document).ready(function(){
  $("a.fancy").fancybox({
    'transitionIn'  :   'fade',
    'transitionOut' :   'fade',
    'speedIn'       :   600, 
    'speedOut'      :   200, 
    'overlayShow'   :   true,
    'titleFromAlt'  :   true // NEW
  }); // fancybox
}); // ready

3番目-テキストの量によっては、タグの直後に$img['txt']非表示で保存することをお勧めします。次に、コンテンツを開いたら、そのコンテンツをファンシーボックスとして設定します。<div><a>title

<ul id="scroller2">
<?php
   $qry_img= $db->query("SELECT * FROM image_prodotti;");
   while( $img = $qry_img->fetch_array() ){
    echo '<li class="new"><a href="img/prodotti/caricati/'.$img['url'].'" class="fancy"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></a><div style="display: none;">'.$img['txt'].'</div></li>';
 ?>          
</ul>

次に、このスクリプトを使用して、非表示のコンテンツをフェッチします<div>。

$(document).ready(function(){
  $("a.fancy").fancybox({
    'transitionIn'  :  'fade',
    'transitionOut' :  'fade',
    'speedIn'       :   600, 
    'speedOut'      :   200, 
    'overlayShow'   :   true,
    'titlePosition' :  'over', // NEW
    'onStart'       :   function(currentArray,currentIndex){
       var obj = currentArray[ currentIndex ];
       this.title = $(obj).next('div').html();
    }
  }); // fancybox
}); // ready

注：これはfancybox v1.3.2 +

于 2012-07-11T08:01:59.557 に答える