1

I'm trying to learn jQuery plugins. I'm creating a image sliding plugin. This is how I've developed so far.

(function($){

        $.imageSlider = function(selector, settings) {

        //settings

        var config = {      
            'delay':2000,
            'speed':500
        };

        if(settings) {
            $.extend(config, settings);
        }

        //vars
        var obj = $(selector);

        obj.children('img').css('transition','width 2s, height 2s, transform 2s');      
        var image = obj.children('img');
        var count = image.length;

        var i = 0;

        image.eq(0).show(); //first image showing

        //begin the image loop

        setInterval ( function() {
                image.eq(i).fadeOut(config.speed);
                i = (i+1 == count) ? 0 : i+1;
                image.eq(i).fadeIn(config.speed);
                image.eq(i).css("transform","rotate(360deg)");
            }, config.delay
        );

        return this;
    }

})(jQuery);

But my the issue is the rotation happens only once cycle.

JSFiddle http://jsfiddle.net/va45D/1/

After all 3 images loaded as the way I wanted, then It doesn't applies the transition.

Please help me to understand whats happening here.

Eliezer Bernart
  • 2,386
  • 24
  • 33
Dan Jay
  • 874
  • 10
  • 27
  • Working here. Can't see the problem – Felipe Fonseca Dec 09 '13 at 23:38
  • it doesn't rotate after the 2nd time – Dan Jay Dec 09 '13 at 23:40
  • 1
    its working here too. the only addition I would suggest you is to add a position absolute to the images to reduce the flickering... `#slide img{ display:none; position: absolute; top: 0px; left: 0px }` – wildhaber Dec 09 '13 at 23:44
  • I wanted to do is to rotate and display all images one by one. First time it does as I want. But after that it just sliding images without the rotation. Am I the only one who see this. strange! – Dan Jay Dec 09 '13 at 23:50
  • http://jsfiddle.net/shandanjay/6794n/3/ – Dan Jay Dec 10 '13 at 00:09
  • What browser are you using? It's working on Chrome/Mac here. – ntgCleaner Dec 10 '13 at 00:28
  • firefox. oh it could be a browser issue? – Dan Jay Dec 10 '13 at 00:40
  • in my chrome it doesn't rotate at all :( – Dan Jay Dec 10 '13 at 00:43
  • 1
    It's possible it's a browser or OS issue. It seems to be working for everyone. The fiddle that you've sent continuously rotates (fades) between the three banners you have in there and does not stop and does not deviate. Try another computer? then let us know if it's not working for you there too – ntgCleaner Dec 10 '13 at 00:47
  • still not positive. I checked with firefox on windows XP, chrome/firefox on Linux, but with the same IP. Still the same fault. 1st time 3 banners rotates, after that it directly slideup, without rotating. How could this possible? – Dan Jay Dec 10 '13 at 01:09

1 Answers1

4

Hie Shan,

I can reproduce your problem, you're right. After the second time that you rotate your images they will not rotate anymore. I'm using Firefox 25.

To solve you problem I made these updates:

setInterval( function() {
        image.eq(i).fadeOut(config.speed);    
        image.eq(i).css("transform","rotate(0deg)");
        i = (i+1 == count) ? 0 : i+1;
        image.eq(i).fadeIn(config.speed);
        image.eq(i).css("transform","rotate(360deg)");
    }, config.delay
);

When your loop over, the element keeps the same value at the end of the loop, so when your run it for the first time your have all your img elements at 0deg, at the end you transform them to 360deg position. The next time that you run your loop (this explain the problem that you have on your 2nd time), all your images starts on 360deg. If you rotate 360deg to 360deg you have the same position because there is no interval between the actual position and the new one. This can be really visible if you update your code to 45deg, as you can see on this fiddle.

Before start the process I defined a transformation that returns your element to 0 degrees. Maybe this solution solves your problem.

Here is the JSFiddle

Thanks!

Eliezer Bernart
  • 2,386
  • 24
  • 33
  • Thank You @EliezerBernart! You were very helpful. I'm very glad someone saw what I saw. But still it doesn't work with chrome. – Dan Jay Dec 10 '13 at 08:05
  • 1
    You're welcome @shan! As your can see on [Can I Use](http://www.caniuse.com/transforms2d), transform2d needs vendor prefixes to work on Chrome and other browsers, try [this other JS Fiddle](http://www.jsfiddle.net/EMq84) – Eliezer Bernart Dec 10 '13 at 11:44
  • If you want to solve your problem of cross browser camptibility [this question](http://stackoverflow.com/questions/17487716/does-css-automatically-add-vendor-prefixes) maybe help you. – Eliezer Bernart Dec 10 '13 at 11:45