Question

我在jquery中创建了一个名为simplyscroll.js的插件。 Inside It我使用数据库滚动运行时加载的许多图像。我想在每个图像上应用图像的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>

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']存储在<div>标记后面隐藏的<a>中;然后在打开后将其内容设置为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 +

动态卷轴内的fancybox图像和文本

1 个答案: