Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

JQuery slideshow script is not working

Posted on 2015-02-17
2
177 Views
Last Modified: 2015-02-18
I followed a video I found on YouTube to make a slideshow using JQuery (https://www.youtube.com/watch?v=5_P3Auq-U8c).  I'm not sure what I am doing wrong but my pictures do not display.  Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Slide Show Test</title>
    <style type="text/css">
        .slider 
        {
	        width: 600px;
	        height: 200px;
	        overflow: hidden;
	        margin: 30px auto;	
	        /*padding: 0;
	        background-color: #006699; /*#005daa;*/
	        /*float: left;*/
        }
        .slider img 
        {
            width: 600px;
            height: 200px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        function Slider() {
            $(".slider#1").show("fade", 500);
            $(".slider#1").delay(5500).hide("slide", { direction: "left" }, 500);

            var sc = $(".slider img").size();
            var count = 2;

            setInterval(function(){
                $(".slider#"+count).show("slide", { direction: "right"}, 500);
                $(".slider#"+count).delay(5500).hide("slide", { direction: "left" }, 500);

                if (count == sc){
                    count = 1;
                }else{
                    count = count + 1;
                }
            }, 6500);
        }
    
    </script>
</head>
<body onload="Slider();">
        <div class="slider">
            <img src="images\HomePagePics\Altar_2-24-11.JPG" alt="ABVM" id="1" />
            <img src="images\HomePagePics\Inside_2-24-11.JPG" alt="ABVM" id="2" />
            <img src="images\HomePagePics\Lt_Relief_2-24-11.JPG" alt="ABVM" id="3" />
        </div>  

</body>
</html>

Open in new window


If I remove this line from the .slider img style, the first picture displays:             display: none;
However, the images do not switch.

Can anyone help me figure out what I am doing wrong?
0
Comment
Question by:dyarosh
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40615771
You need a space between the slider class and the image id in the jQuery selector: $(".slider #1")
function Slider() {
            $(".slider #1").show("fade", 500);
            $(".slider #1").delay(5500).hide("slide", { direction: "left" }, 500);

            var sc = $(".slider img").size();
            var count = 2;

            setInterval(function(){
                $(".slider #"+count).show("slide", { direction: "right"}, 500);
                $(".slider #"+count).delay(5500).hide("slide", { direction: "left" }, 500);

                if (count == sc){
                    count = 1;
                }else{
                    count = count + 1;
                }
            }, 6500);
        }

Open in new window

0
 

Author Closing Comment

by:dyarosh
ID: 40616233
Thank you.  That solved the problem!
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question