Question

I have a scroller maked with a plugin called simplyscroll.js in jquery. Inside It I scroll many images loaded at runtime using a database. I want to apply at every image a fancybox of the image with some text loaded by database:
(The text that I wanto to load is inside $img['txt'])
code:

<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

There would be three possible ways to do it :

First (the easiest and simplest) – Add a title attribute to the <a> tag and set $img['txt'] as its value:

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

You don’t need to do any modification to your script. Notice that with this option, the title will show up as tooltip when you hover the thumbnail.

Second – Set $img['txt'] as the value of the alt attribute in the thumbnail (<img> tag) :

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

Then add the API option 'titleFromAlt':true to your script :

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

Third – Depending on the amount of text, you may prefer to store $img['txt'] in a hidden <div> just right after the <a> tag; then set its content as the fancybox title once it is opened :

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

Then use this script to fetch the contents of the hidden <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

NOTE : this is for fancybox v1.3.2 +