Javascript Image Slider / Posts /

afterSlideChangeargs function

0
Hi,
Anyone has any idea why afetrSlideChange in the following code never executed? 

The following is part of my code, when I put the afterSlideChange outside this script, it is working. And I want to change pause time dynamically, so I put it inside the for loop, and it is not working.

<script>
            $.ajax({
                type: "GET",
                url: "resource/schedule.csv",
                dataType: "text",
                success: function(data) {
                    var schedule = $.csv.toArrays(data);
                    for ( var i = 1; i < schedule.length; i = i 1 ) {
                        var ad = schedule[i];
                        var pos = ad[0].lastIndexOf(".");
                        var lastname = ad[0].substring(pos,ad[0].length);
                        
                        if (lastname.toLowerCase()===".jpg"){
                            $('#slider').append('<a class="lazyImage" href="' ad[0] '"></a>');
                            //console.log(ad[1]);
                            
                            function afterSlideChange(args) {
                            //args[0]-current image index
                                //console.log(ad[1]);
                                if(args[0]===i-1) setTimeout(function(){imageSlider.next();}, ad[1]);
                            }
                        }else if(lastname.toLowerCase()===".mp4"){
                            $('#slider').append('<video preload="none" data-image="' schedule[i-1][0] '"data-autovideo="true"><source data-src="' ad[0] '" type="video/mp4" /></video>');
                        }             
                    }
                },
                error: function (request, status, error) {
                    alert(request.responseText);
                }
             });      
             
        </script>

Thanks in advance!!!
xueye  9 years ago   viewed: 2842    

6 Answers

0

1. for ( var i = 1; i < schedule.length; i = i + 1 )

Why don't you code it as: for ( var i = 0; i < schedule.length; i++ )

2. You cannot simply $('#slider').append('...') as at that time the slider has already been populated and lots stuff has already been appended by the js-image-slider.js. You need to rewrite the whole slider markup by $('#slider').html('...new markup...') and then call imageSlider.reload() to get the slider re-populated.

PT   9 years ago
0
Thanks a lot!

1. The element at index 0 is not need, so I start from index 1.
2. What do you mean by "new markup", can you give a short example?

Thanks so much!!!!!!!!
xueye   9 years ago
0
New markup is the innerHTML of the <div id="slider">...</div> element. 

Demo 7 is a good example of changing the innerHTML of $('#slider') and calling the reload() function.
PT   9 years ago
0
If I write my code like demo 7:

for ( var i = 1; i < schedule.length; i = i + 1 ) {
                        var ad = schedule[i];
                        var pos = ad[0].lastIndexOf(".");
                        var lastname = ad[0].substring(pos,ad[0].length);
                        
                        if (lastname.toLowerCase()===".jpg"){
                            var sliderFrame = document.getElementById("sliderFrame");
                            sliderFrame.innerHTML = '<div id="slider"><a class="lazyImage" href="' + ad[0] + '"></a></div>';
                            imageSlider.reload();
                        }else if(lastname.toLowerCase()===".mp4"){
                            var sliderFrame = document.getElementById("sliderFrame");
                            sliderFrame.innerHTML = '<div id="slider"><video preload="none" data-image="'+schedule[i-1][0]+'"data-autovideo="true"><source data-src="'+ad[0]+'" type="video/mp4" /></video></div>';
                            imageSlider.reload();
                        }             
}

This does not work well and the slider only contains the last image/video because it is in a for loop, My inner HTML is not the whole slider, it contains only a image/video.

My original code works well but the only thing is the function afterSlideChange(args) never get executed.

xueye   9 years ago
0
Hi, 
I modified my code and now it is working with innerHTML and imageSlider.reload()
if (lastname.toLowerCase()===".jpg"){
    document.getElementById("slider").innerHTML += '<a class="lazyImage" href="' + ad[0] + '"></a>';
    imageSlider.reload();
     
     function afterSlideChange(args) {
         console.log(ad[1]);
         if(args[0]===i-1) setTimeout(function(){imageSlider.next();}, ad[1]);
     }
}
However, the result is the same as "append", the console logs nothing and the pause time does not change as well, which means dunction afterSlideChange never get executed. But if I change the afterSlideChange to other method such as "if", the "if" will get executed. Why is it???
Please help!!!!!!! Thanks!!!!!!
xueye   9 years ago
0
I know what caused the problem, thanks anyway
xueye   9 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲