CODEWITHSUNDEEP
jqueryhtmlxmlslideshow
user2554193
user2554193

Reputation: 65

Create Dynamic Slideshow in jQuery using XML - All Images are shown at once not individually

I am trying to make a dynamic slideshow in jQuery by reading images from an XML. I have already successfully implemented this code with the pictures loaded locally into the html file by declaring them in the section. However, when I try to load the images from the xml it displays all of the pictures simultaneously and not one after the other. Any explanation as to why? The pictures are named Slide1.png, Slide2.png, etc.

HTML:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Slideshow</title>
<link rel="stylesheet" type="text/css" href="include/cssstyles.css" />
</head>
<body>

<script src="include/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
 <div class="container">
    <ul class="overview">
    </ul>
</div>



<script>
 $(document).ready(function()
      {
        var temp = "";
        var i = 1;
        $.get('myData.xml', function(d){

        var fcn = $(d).find('book').each(function(){

            var $picture = $(this);
            var imageurl = $picture.attr('imageurl');
            var time_duration = $picture.attr("time_duration");

            var image = '<li> <img alt="" src="' + "images/Slide" + i + ".png "+ '" /> </li>';
            $('.overview').append($(image));
            i++;

        });
    });

        var pages = $('.container li'), current=0;
        var currentPage,nextPage;
        var timeoutID;
        var buttonClicked=0;

        var handler1=function(){
            buttonClicked=1;
            $('container .button').unbind('click');
            currentPage= pages.eq(current);
            if($(this).hasClass('prevButton'))
            {
                if (current <= 0)
                    current=pages.length-1;
                    else
                    current=current-1;
            }
            else
            {

                if (current >= pages.length-1)
                    current=0;
                else
                    current=current+1;
            }
            nextPage = pages.eq(current);   
            currentPage.fadeTo('slow',0.3,function(){
                nextPage.fadeIn('slow',function(){
                    nextPage.css("opacity",1);
                    currentPage.hide();
                    currentPage.css("opacity",1);
                    $('.container .button').bind('click',handler1);
                }); 
            });         
        }

        var handler2=function(){
            if (buttonClicked==0)
            {
            $('.container .button').unbind('click');
            currentPage= pages.eq(current);
            if (current >= pages.length-1)
                current=0;
            else
                current=current+1;
            nextPage = pages.eq(current);   
            currentPage.fadeTo('slow',1,function(){
                nextPage.fadeIn('slow',function(){
                    nextPage.css("opacity",1);
                    currentPage.hide();
                    currentPage.css("opacity",1);
                    $('.container .button').bind('click',handler1);             
                }); 
            });
            timeoutID=setTimeout(function(){
                handler2(); 
            }, 10000);
            }
        }

        $('.container .button').click(function(){
            clearTimeout(timeoutID);
            handler1();
        });

        timeoutID=setTimeout(function(){
            handler2(); 
            }, 10000);



});
</script>
</body>

Upvotes: 0

Views: 1000

Answers (1)

Raja Sekar
Raja Sekar

Reputation: 2130

Since you doing an ajax to fetch the data from server, There may be situation that your data may not loaded, But your slider logic will trigger.

In some case, even you will get error also.

So do your slider functionality in callback.

The below code will work fine!!

$(document).ready(function(){
            var temp = "";
            var i = 1;
           $.get('myData.xml', function(d){

            var fcn = $(d).find('book').each(function(){

                var $picture = $(this);
                var imageurl = $picture.attr('imageurl');
                var time_duration = $picture.attr("time_duration");

                var image = '<li> <img alt="" src="' + "images/Slide" + i + ".png "+ '" /> </li>';
                $('.overview').append($(image));
                i++;

            });
        }).done(function(){
              var pages = $('.container li'), current=0;
            var currentPage,nextPage;
            var timeoutID;
            var buttonClicked=0;

            var handler1=function(){
                buttonClicked=1;
                $('container .button').unbind('click');
                currentPage= pages.eq(current);
                if($(this).hasClass('prevButton'))
                {
                    if (current <= 0)
                        current=pages.length-1;
                        else
                        current=current-1;
                }
                else
                {

                    if (current >= pages.length-1)
                        current=0;
                    else
                        current=current+1;
                }
                nextPage = pages.eq(current);   
                currentPage.fadeTo('slow',0.3,function(){
                    nextPage.fadeIn('slow',function(){
                        nextPage.css("opacity",1);
                        currentPage.hide();
                        currentPage.css("opacity",1);
                        $('.container .button').bind('click',handler1);
                    }); 
                });         
            }

            var handler2=function(){
                if (buttonClicked==0)
                {
                $('.container .button').unbind('click');
                currentPage= pages.eq(current);
                if (current >= pages.length-1)
                    current=0;
                else
                    current=current+1;
                nextPage = pages.eq(current);   
                currentPage.fadeTo('slow',1,function(){
                    nextPage.fadeIn('slow',function(){
                        nextPage.css("opacity",1);
                        currentPage.hide();
                        currentPage.css("opacity",1);
                        $('.container .button').bind('click',handler1);             
                    }); 
                });
                timeoutID=setTimeout(function(){
                    handler2(); 
                }, 10000);
                }
            }

            $('.container .button').click(function(){
                clearTimeout(timeoutID);
                handler1();
            });

            timeoutID=setTimeout(function(){
                handler2(); 
                }, 10000);



    });

        })


    </script>

Upvotes: 1

Related Questions