动态滚动条中的fancybox图像和文本 - fancybox image and text inside a dynamic scroller

fancybox image and text inside a dynamic scroller

我在jquery中用一个名为simplyscroll.js的插件制作了一个滚动器。在它内部，我使用数据库滚动运行时加载的许多图像。我想在每个图像上应用一个图像的fancybox，其中包含一些由数据库加载的文本：（我想加载的文本在$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>

有三种可能的方法：

第一个（最简单的）-将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']设置为缩略图（<img>标签）中alt属性的值：

<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>中；打开后将其内容设置为扇盒CCD_ 14：

<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 +