动态滚动条中的fancybox图像和文本

Question

我在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>

Answer 1

有三种可能的方法可以做到这一点：

首先 （最简单的方法）-将< 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>

您无需对脚本进行任何修改。 请注意 ，使用此选项时，将鼠标悬停在title将显示为tooltip 。

第二 -将$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>

然后将API选项'titleFromAlt':true到脚本中：

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

第三 -根据文本的数量，您可能希望将$img['txt']存储在<a>标记之后的隐藏<div> ； 然后将其内容设置为fancybox 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 +