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

我在jquery中使用了一个名为simplyscroll.js的插件制作了一个滚动条。在它里面，我使用数据库滚动运行时加载的许多图像。我想在每个图像上应用一个fancybox，其中包含数据库加载的一些文本： （我想加载的文本在

$img['txt']

中） 代码：

$（文档）.ready（函数（）{
$（“a.fancy”）.fancybox({
“transitionIn”：“fade”，
“transitionOut”：“fade”，
“speedIn”：600，
“加速输出”：200，
“叠加显示”：正确
});
});

有三种可能的方法：

首先（最简单和最简单）-向

标记添加

标题

属性，并将

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

然后将API选项

'titleFromAlt'：true

添加到脚本中：

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

Third-根据文本的数量，您可能更喜欢将

$img['txt']

存储在

标签后面的隐藏

中；打开后，将其内容设置为fancybox

title

：

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

---

注意：这是针对

fancybox v1.3.2+

您想将文本应用到哪里。。。在fancybox标题上？出现时在fancybox上。。在标题是完美的，我已经看到了文本

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

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

$(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