I have create a website with masterpage. Apart from this, I also create a child page called – Home.aspx, which inside this home.aspx file, I have use a Jquery slider to display slide show of images.
The images had appeared successfully at first(no errors). However, upon adding more child pages and adding an Login control to the masterpage, the images are not appearing anymore. In addition, the file path of the images had appeared errors – “Warning File ‘Images/h1.jpg’ was not found.”
I had tried to comment up the Login control inside the masterpage to check whether does it affect the jquery and eventually it did not.
Here is my code of the master page head section whereby I add in the jquery:
<head runat="server">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BedOfRoses</title>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.0.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Following is the Home.aspx file code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="banner">
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"> <img src="Images/H1.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H2.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H3.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H6.jpg" alt="" /> </div>
</div>
</div>
</div>
<script type="text/javascript">
$('#slider').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
advanceDelay: 3000,
speed: 'slow'
});
</script>
</div>
Are these pages placed in a separate folder than the root one? Use the root selector instead of the current dir selector?
This
instead of this