Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
É o seguinte, eu tenho uma página em ASP.NET, e nela tenho uma foto principal com zoom em javascrip
e uma ListView com as miniaturas das outras fotos do produto. Quando clico nas miniaturas, a foto principal é alterada pelo evento do botão em C#.
ASP.NET
<asp:HyperLink ID="lnkMainLightbox2" runat="server" CssClass="cloud-zoom">
<asp:Image id="defaultImage" runat="server" />
</asp:HyperLink>
C#
protected void imageButton_click(object sender, ImageClickEventArgs e)
{
ImageButton imageButtonSelecionado = (ImageButton)sender;
this.defaultImage.ImageUrl = imageButtonSelecionado.DescriptionUrl;
lnkMainLightbox2.Attributes["href"] = imageButtonSelecionado.AlternateText;
}
Só que eu não quero que de postback, então resolvi fazer por javascript:
No OnLoad da página adiciono o atributo onclick em cada miniatura da foto na lista
foreach (ListViewItem lvi in lvProductPictures.Items)
{
var imageButton = (ImageButton)lvi.FindControl("imageButton");
imageButton.Attributes.Add("OnClick", ("UpdateMainImage('" + imageButton.DescriptionUrl + "', '" + imageButton.AlternateText +"'); return false;"));
}
E na página html deixei a função:
function UpdateMainImage(url, zoom) {
var linkZoom = document.getElementById('<%=lnkMainLightbox2.ClientID%>');
var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
linkZoom.setAttribute("href", zoom);
imgMain.src = url;
}
A foto está trocando normal, mas o zoom não troca. O zoom fica sempre da primeira foto. Não manjo muito de javascript, não sei o que estou fazendo de errado.
Também tenho javascripts do zoom na página:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('.cloud-zoom').jqzoom();
});
jQuery(document).ready(function($){
var options = {
zoomWidth:300,
zoomHeight: 200,
xOffset: 20,
yOffset: 0,
position: "right",
zoomType: 'standard',
lens:true,
frameWidth: 500,
frameHeight: 600
};
$('.cloud-zoom').jqzoom(options);
});
</script>
Se alguém puder me dar uma força eu agradeço desde já.
Carregando comentários...