I designed a custom user control featuring a single image. I am dynamically generating the user control within a placeholder on the web form.
Within the user control, I included references to CSS and JavaScript files, but they are not affecting the appearance of the image.
NOTE: The image is still displayed on the web form.
Here is the code for the user control:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="IVT_DisplayImage.ascx.cs" Inherits="Sublayout_IVT_DisplayImage" %>
<link href="~/css/demo.css" rel="stylesheet" type="text/css" />
<link href="~/css/imagezoom/imagezoom.css" rel="stylesheet" type="text/css"
/>
<script src="~/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="~/js/jquery.imagezoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#imgIdCard').ImageZoom();
});
</script>
<div class="page">
<div class="box cf">
<div class="left"> <span class="demowrap">
<asp:Image ID="imgIdCard" runat="server" />
</span>
</div>
</div>
</div>
Here is the code for the web form:
<div>
<asp:placeholder ID="plhDisplayImage" runat="server"></asp:placeholder>
</div>
This is the code behind for the web form:
Sublayout_IVT_DisplayImage ivtDisplayImage = new Sublayout_IVT_DisplayImage();
protected void Page_Load(object sender, EventArgs e) {
ivtDisplayImage = (Sublayout_IVT_DisplayImage) LoadControl("~/Sublayout/IVT_DisplayImage.ascx");
ivtDisplayImage.ImageURL = "~/demo_assets/large/1.jpg";
plhDisplayImage.Controls.Add(ivtDisplayImage);
}
And here is how the folders are structured:
css/
demo.css
css/imagezoom/
imagezoom.css
js/
jquery-1.8.3.min.js
jquery.imagezoom.min.js
Sublayout/
IVT_DisplayImage.ascx
Root:
Default.aspx