Sono riuscito a ingrandire l'immagine al passaggio del mouse però ho un problema e spero qualcuno di voi mi posa risolvere; siccome sto in un ciclo repeater, l'ingrandimento me lo gestisce solo sulla primma immagine della prima riga. come mai ? come posso risolvere ?
Ecco il codice :
codice:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>
<script type="text/javascript">
$("#zoom_01").attr('data-zoom-image', 'images/imgcat/large');
$("#zoom_03").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true });
$("#zoom_03").bind("click", function (e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList()); return false;
});
</script>
<div>
</div>
<div id="col1">
<asp:Repeater ID="riga" runat="server" onitemcommand="riga_ItemCommand">
<HeaderTemplate>
<ul id="galleria">
</HeaderTemplate>
<ItemTemplate>
<li>
<img id="img_01" src="images/imgcat/small/<%# Eval("NOMEIMAGE") %>" border="2" vspace="6" hspace="6" alt="" data-zoom-image="images/imgcat/large/Pizza1_L.jpg" />
<script type="text/javascript">
$("#img_01").elevateZoom();
</script>
<p align="center">
<%# Eval("DESCRCATALOGO") %>
</p>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>