Fancybox et vignettes bxGallery

Bonjour,

J'utilise actuellement bxGallery pour présenter des images, avec une grande image et des vignettes. Fancybox est greffé au code pour l'agrandissement de la grande image. Classique.
Depuis un moment maintenant (!), je cherche à appliquer Fancybox sur les vignettes également. Après moultes essais, rien n'y fait ... Voici le code qui ne fonctionne pas pour l'instant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<?php
        $pi_query = tep_db_query("select elements_id, image, htmlcontent from " . TABLE_ELEMENTS_IMAGES . " where elements_id = '" . $value['elements_id'] . "' order by sort_order");
?>
				<div id="contentMiddleRight" class="pinRight">
					<div id="piGal-<?php echo $value['elements_id']; ?>" class="piGal">
						<ul>
<?php
$pi_counter = 0;
while ($pi = tep_db_fetch_array($pi_query)) {
        $pi_counter++;
        
        $pi_entry = '<li id="piGal-' . $value['elements_id'] . '"><a href="';
        
        $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
        
        $pi_entry .= '"  id="piGal-' . $value['elements_id'] . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';
        
        $pi_entry .= '</li>';
        
        echo $pi_entry;
}
?>
						</ul>
					</div>
				</div><!--fin contentMiddleRight-->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="ext/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.22.min.js"></script>
<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="ext/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
 
<script type="text/javascript">
$('#piGal-<?php echo $value['elements_id']; ?> ul').bxGallery({
  maxwidth: 300,
  maxheight: 300,
  thumbwidth: <?php echo (($pi_counter > 1) ? '97' : ''); ?>,
  thumbcontainer: 400,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>
 
<script type="text/javascript">
$("#piGal-<?php echo $value['elements_id']; ?> a[rel^='fancybox']").fancybox({
  cyclic: true
});
</script>

La page en question se trouve pour par ici

Merci beaucoup pour votre aide !