`
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script language="javascript">
$(document).ready(function() {
/* Apply fancybox to multiple items */
$("a.grouped_elements").attr('rel', 'gallery').fancybox();
$("a#inline").fancybox({
'hideOnContentClick': true
});
});
</script>
<div id="tabs">
<ul>
<li><a href="#tab1">Watsons HWB awards</a></li>
<li><a href="#tab2">Mardi Gras Event</a></li>
<li><a href="#tab3">WD40 Dealers Summit</a></li>
<li><a href="#tab4">Chole Fashion Show</a></li>
</ul>
<div id="tab1">
<center>
<a rel="gallery" class="grouped_elements" href="images/gallery/gal1.jpg"><img src="images/gallery/gal1.jpg" style="width:100px;height:100px" /></a>
<a rel="gallery" class="grouped_elements" href="images/gallery/gal2.jpg"><img src="images/gallery/gal2.jpg" style="width:100px;height:100px" /></a>
<a rel="gallery" class="grouped_elements" href="images/gallery/gal3.jpg"><img src="images/gallery/gal3.jpg" style="width:100px;height:100px" /></a>
<a rel="gallery" class="grouped_elements" href="images/gallery/gal4.jpg"><img src="images/gallery/gal4.jpg" style="width:100px;height:100px" /></a>
<a rel="gallery" class="grouped_elements" href="images/gallery/gal5.jpg"><img src="images/gallery/gal5.jpg" style="width:100px;height:100px" /></a>
<a rel="gallery" class="grouped_elements" href="images/gallery/gal6.jpg"><img src="images/gallery/gal6.jpg" style="width:100px;height:100px" /></a>
</center>
</div>
`
Ok, so, I have this code right here, Whenever I click on the image in the jquery tab, the fancybox doesn't work. Help please?