Reputation: 87

Jquery Mobile Slideshow

Can anybody help to get the image slideshow? Now the images just totally pasted on the webpage. Got totally lost! Tks! I will paste her html, js and css (3parts). I could not post this post owing to less details. I write here just some extra test, hopes that it is understandable.

HTML

<!DOCTYPE html>
    <html>
        <head>
        <title>Panda</title>

        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"/>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

        <link rel="stylesheet" href="gallerytest.css"/>


        <link rel="stylesheet" href="gallerytest.css"/>
        <script src="jquery-2.0.3.min.js"></script>
        <script src="jquery.mobile-1.4.0.min.js"></script>

        <script src="jquery-ui-1.10.4"></script>
        <script src="slide.js"></script>
    </head>
    <body onload="Slider();"> 
        <div data-role="page" id="Home" data-theme="a">
            <div data-role="header" >
                <div data-role="navbar">
                <ul id="header">
                        <li><a href="home.html"><img src="images/home-black.png"/>&nbsp Home</a></li>
                        <li><a href="donate.html">Donate</a></li>
                        <li><a href="about.html"><img src="images/info-black.png"/>&nbsp About</a></li>
                    </ul>
                </div>
            </div>  
        <div role="main" class="ui-content">
                <h1 style="text-align:center">Gallery</h1>
            </div>
        </div>
        <div data-role="content" >  
        <div class="slider">
                <img id="1" src="images/full/001.jpg" border ="0" alt="Image001" />
                <img id="2" src="images/full/002.jpg" border ="0" alt="Image002" />
                <img id="3" src="images/full/003.jpg" border ="0" alt="Image003" />
                <img id="4" src="images/full/004.jpg" border ="0" alt="Image004" />
                <img id="5" src="images/full/005.jpg" border ="0" alt="Image005" /> 
                <img id="6" src="images/full/006.jpg" border ="0" alt="Image006" />
                <img id="7" src="images/full/007.jpg" border ="0" alt="Image007" />
                <img id="8" src="images/full/008.jpg" border ="0" alt="Image008" />
                <img id="9" src="images/full/009.jpg" border ="0" alt="Image009" />
            </div>
        </div>
        <div data-role="footer">
            <div data-role="navbar">
            <ul id="footer">
                    <li><a href="card.html">Send me a Card!</a></li>
                    <li><a href="donate.html">Donate</a></li>
                    <li><a href="contact.html">Contact me</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS

.slider{
    width:600px;
    height:600px;
    overflow:hidden;
    margin:0;
    background-image:url('images/ajax-loader.gif');
    background-repeat:no-repeat;
    background-position:center;
    background:red;
}

$(document).on("pageinit", function() {
    $(".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);
});

Upvotes: 0

Answers (1)

RobStemen

Reputation: 377

Okay, so there are a few things wrong with this, but I think I got them all, so let's take a look.

First things first. The onload in your body (<body onload="Slider();">) and the pageinit function ($(document).on("pageinit", function Slider() {...});) are attempting to do the same thing. The body onload, however, is not correct for what you're trying to do, so get rid of it (<body>).

Next, your div class that your jQuery is looking at is "slider();", but should just be "slider". For starters, you're not trying to make a method call there. Even if you were, that would be incorrect as the jQuery is going to handle that anyway. Also, your jQuery is looking for .slider, not .slider(); (is that even possible?), so change that to <div class="slider"> and that'll fix it.

Next, the only reason you would provide a function name in a jQuery "on" method is if it were defined externally, and, in that case, you don't have to declare it, because you would have declared it outside of your function, so declaring $(document).on("pageinit", function Slider() {...}); actually breaks it, so changing it to $(document).on("pageinit", function() {...}); will take care of that.

That fixes all of the errors in your logic. Next there are some syntactical errors that are giving you grief as well. Namely, the following blocks of code.

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

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

Let's look at the first block first.

The way you set this up, jQuery is looking for an item in your DOM with the class slider AND an ID of 1(count) (for example, if count = 2, it would be searching for an ID of 12). What you're trying to get it to do is show the first child of the slider element. That means that the selector should be $(".slider #1"). This will find the .slider element, then search it's immediate children for #1.

The second block shares the same issue, but with the added difficulties of not placing the quotes correctly. What you need there is $(".slider #" + count). Finally, you need to use a parenthesis instead of a bracket ($(".slider#+count).show("slide", {direction:'right'}, 500);), and on the second line, you forgot a comma ($(".slider#+count).show("slide", {direction:'right'}, 500};).

Finally, since jQuery is toggling all of the images, you're going to want to hide all of the images at the beginning using the display: none; CSS property.

At this point, if the jQuery mobile stuff is configured correctly (unfortunately, Fiddle didn't let me use mobile stuff), you should now have a working slideshow! Hopefully this helped you solve your problem and was also informative enough that you know how to do this in the future! Good luck and happy coding!

Upvotes: 2

Jquery Mobile Slideshow

Answers (1)

Related Questions