hello all,I Am using elevateZoom for zooming purpose in simple aspx page then its working fine
But when i used Master child page .it is not working.
Help me please.
my master page is
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
<link href="/jQuery.fancybox.css" rel="stylesheet" type="text/css" />
<%-- <script src="jquery-min.js"></script>--%>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/js/jquery.elevatezoom.min.js" type="text/javascript"></script>
<script src="/js/jquery.fancybox.pack.js" type="text/javascript"></script>
<style type="text/css">
#gallery_01 img{border:2px solid white;width: 96px;}
.active img{border:2px solid #333 !important;}
</style>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
this is master page
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
master child page is
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<br />
hello this is content page
<div>
<asp:Image ID="img1" runat="server" style="height:300px; width:300px;" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg" />
<div id="gallery_01">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("[id*=img1]").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: "active" });
$("[id*=img1]").bind("click", function (e) {
var ez = $("[id*=img1]").data('elevateZoom');
ez.closeAll();
$.fancybox(ez.getGalleryList());
return false;
});
});
//$(function () {
// $("[id*=Image1]").elevateZoom();
//});
</script>
</asp:Content>
master child codebehind page
public partial class Default2 : System.Web.UI.Page
{
public string path1;
public string path2;
public string path3;
public string href1;
public string href2;
public string href3;
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ErpConnection"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindimage();
}
}
public void bindimage()
{
con.Open();
SqlCommand cmd = new SqlCommand("select Small from tbl_Productimage where Product_Id='16'", con);
// SqlDataReader dr = cmd.ExecuteReader();
SqlDataAdapter adp = new SqlDataAdapter();
adp.SelectCommand = cmd;
DataTable ds = new DataTable();
adp.Fill(ds);
//con.Open();
if (ds.Rows.Count > 0)
{
string str1 = string.Empty;
string st2 = string.Empty;
string st3 = string.Empty;
string st4 = string.Empty;
string str2 = string.Empty;
foreach (DataRow row in ds.Rows)
{
path1 = ds.Rows[0].Field<string>("Small"); //For Pass Value In Anchortag
path2 = ds.Rows[1].Field<string>("Small");
path3 = ds.Rows[2].Field<string>("Small");
//zoom1.HRef = "images/" + ds.Rows[0].Field<string>("Small"); //Call Tiny Image
img1.ImageUrl = ds.Rows[0].Field<string>("Small");
string imageHTML = @"<ul ><li><img src='" + row.Field<string>("Small") + "' alt='Image1' /></li></ul>";
string strr1 = @"<a href='#' data-image='" + row.Field<string>("Small") + "' data-zoom-image='" + row.Field<string>("Small") + "'> <img width='48' runat='server' height='64' style='border: groove;' src='" + row.Field<string>("Small") + "' /></a>";
////str1 = @"<a href='images/" + row.Field<string>("Small") + "' class='cloud-zoom-gallery'" + "";
////st2 = @"rel=useZoom:'zoom1',";
////st3 = @"smallImage:'images/";
////st4 = @"" + row.Field<string>("Small") + "'";
////str2 = @"><img id='img1' runat='server' class='zoom-tiny-image' alt='Thumbnail 1' width='48' src='images/" + row.Field<string>("Small") + "' height='64' style='border: groove;' /></a>";
//Literal1.Text += str1 + st2 + st3 + st4 + str2;
Literal1.Text += strr1;
}
}
}
}
help me pls its urgent
