fancybox image and text inside a dynamic scroller - php

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"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></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"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></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"><img src="img/prodotti/caricati/'.$img['url'].'" alt="'.$img['txt'].'" /></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"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /><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 +