Jquery image slide show

Question

0.00/5 (No votes)

See more:

Hi,

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. However, upon adding more child pages and adding an Login control to the masterpage, the images was not appearing anymore.

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:

XML

<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:

XML

<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>

There are no errors or run-time errors. But the images are not showing..

Posted 4-Jul-12 5:01am

mathidioticz

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pankaj Nikam · Answer 1 · 2012-07-04T05:09:00

Solution 1

Most probably the path to the images may be invalid. Use tools like FireBug (For Firefox) or Developer Tools (For internet explorer) to check whether they are fetched. Both the tools can be invoked by F12.
Does this help? If not, please leave a comment and I will modify the answer accordingly.

Posted 4-Jul-12 5:09am

Pankaj Nikam

Comments

mathidioticz 4-Jul-12 11:20am

Hi, I didn't maybe it wasn't because the the path because I didn't change the images's file path. After adding the child pages, it automatically couldn't display images

Pankaj Nikam 4-Jul-12 11:33am

Are the child pages in different hierarchy? I mean what is the folder structure ?

mathidioticz 4-Jul-12 11:50am

i got a website call "testing". Inside "testing" I have many folders(example: AbtUs, cart, Images). and apsx file are kept inside each folder and all my images are stored inside Images. All the aspx files are linked to the masterpage.

Pankaj Nikam 5-Jul-12 4:44am

I believe some of the resources might not be getting loaded properly. As you mentioned in the code for Home.aspx I believe it is in the root of the website. Hence it must be able to load the scripts and images. The path changes when the hierarchy changes. Please verify that you are able to load the images and the scripts by the tip mentioned above.