I want to make the web part for image sliding for Picture Library.
I got this link for doing so.
My code for visual web part is :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Slide Show</title>
<style type="text/css">
.size {
height: 300px;
width: 500px;
position: relative;
}
.lab {
background-color: rgba(0, 0, 0, 0.5);
color: #FF0000;
height: 80px;
line-height: 20px;
margin-top: 200px;
padding: 10px;
position: absolute;
width: 480px;
z-index: 100;
}
</style>
</head>
<body>
<div id="main" runat="server">
<div id="slideShowImages" runat="server">
</div>
</div>
<script src="../_layouts/15/JSLink/slideShow.js"></script>
</body>
</html>
And background C# code is:
protected void Page_Load(object sender, EventArgs e)
{
string HtmlCode = "";
SPSite site = SPContext.Current.Site;
SPWeb web = site.RootWeb;
SPList list = web.Lists.TryGetList("Pics");
foreach (SPListItem item in list.Items)
{
HtmlCode += "<img src=" + Convert.ToString(item[SPBuiltInFieldId.EncodedAbsUrl]) + " alt='Image' class='size'/>";
}
main.InnerHtml = "<Label>Hello</Label>";
slideShowImages.InnerHtml = HtmlCode;
}
The images are stored in picture library and the lable text will be fixed which is going to be float over the image.
I tried the code shown in msdn example working perfectly but when I apply this in Visual Web Part I am not able to do it as the ID of DIVs are changed when they are runat server.
What should I do to get the html
output in my web part?
..
from<script src="../_layouts/15/JSLink/slideShow.js"></script>
slideShowImages
are slide but when I apply therunat
property the child DIV is not created (Here,<div id="slideShowImages" runat="server">
in my case)ctl00_ctl33_g_ee3e11ee_5274_4fcc_9b8d_c8eb66e2e682_main