-2

I want make my own jQuery plugin, like jCarousel. It works, but the problem when i leave the page and stay out for maybe 40 sec in Chrome and 1-2 min in Firefox it make's all img visible. It works fine in Opera. I use var e for current image and console it in the moment plugin must hide image. When i leave the page e get attr style="opacity:0" (which must be used for fadeIn). Plugin is on my hosting, here's the link: changeImg Here's the code:

(function ($) {
    $.fn.changeImg = function (options) {
        var def = {
            waitla: 5000,
        };
        var o = jQuery.extend(def, options);
        return this.each(function () {
            var l = $('img', this).length;
            var i = 1;
            $('img:not(:first)', this).hide();
            $(this).prepend('<div id=changeImg-prev></div>');
            $(this).prepend('<div id=changeImg-next></div>');
            $(this).prepend('<span id=changeImg-count>' + i + '/' + l + '</span>');
            $(this).prepend('<span id=changeImg-play>STOP</span>');
            var e = $('img:first', this);
            var a = setTimeout(nextImg, o.waitla);
            var play_key = true;
            $('#changeImg-next').click(nextImg);
            $('#changeImg-prev').click(function () {
                e.hide();
                if (e.prev().is('img')) {
                    e = e.prev();
                    e.fadeIn('slow');
                    i--;
                } else {
                    $('#changeImg img:last').fadeIn('slow');
                    e = $('#changeImg img:last');
                    i = l;
                };
                $('#changeImg-count').text(i + '/' + l);
                $('#changeImg-thumbs img').css('opacity', '0.5');
                $('#changeImg-thumbs img[src*=' + i + ']').css('opacity', '1');
                if (play_key) {
                    clearTimeout(a);
                    a = setTimeout(nextImg, o.waitla);
                };
            });
            $('#changeImg-thumbs img:not(:first)').css('opacity', '0.5');
            $('#changeImg-play').click(function () {
                if (play_key) {
                    $(this).text('PLAY');
                    play_key = false;
                    clearTimeout(a);
                } else {
                    $(this).text('STOP');
                    play_key = true;
                    a = setTimeout(nextImg, o.waitla);
                };
            });
            $('#changeImg-thumbs img').hover(function () {
                if (e.attr('src') != $(this).attr('alt')) {
                    $(this).animate({
                        'opacity': '1'
                    });
                };
            },
            function () {
                if (e.attr('src') != $(this).attr('alt')) {
                    $(this).animate({
                        'opacity': '0.5'
                    });
                };
            }).click(function () {
                thumb = $(this).attr('alt');
                $('#changeImg-thumbs img').css('opacity', '0.5');
                $(this).css('opacity', '1');
                if (e.attr('src') != thumb) {
                    e.hide();
                    thumb = thumb.replace('images/', '').replace('.jpg', '');
                    e = $('#changeImg img[src*=' + thumb + ']');
                    e.fadeIn('slow');
                    i = $(this).attr('src');
                    i = i.replace('changeimg/thumb', '').replace('.jpg', '');
                };
                $('#changeImg-count').text(i + '/' + l);
                if (play_key) {
                    clearTimeout(a);
                    a = setTimeout(nextImg, o.waitla);
                };
            });


            function nextImg() {
                e.hide();
                console.log(e);
                if (e.next().is('img')) {
                    e = e.next();
                    e.fadeIn('slow');
                    i++;
                } else {
                    e = $('#changeImg img:first');
                    e.fadeIn('slow');
                    i = 1;
                };
                $('#changeImg-count').text(i + '/' + l);
                $('#changeImg-thumbs img').css({
                    'opacity': '0.5',
                });
                $('#changeImg-thumbs img[src*=' + i + ']').css('opacity', '1');
                if (play_key) {
                    clearTimeout(a);
                    a = setTimeout(nextImg, o.waitla);
                };
            };
        });
    };
})(jQuery)

i use tag 'alt' of thumbs image for change image by click.

wait for answer. thx .

2 Answers 2

0

If you want the images to be hidden by default, do so with CSS, an THEN use your plugin to show them. Otherwise, you get a bit of "flicker" in the time it takes the JavaScript to be parsed.

1
  • Hi. I change it in the way you tell m, but the problem still the same. I put more info in description, try console var e, maybe it will help you get what the problem is.
    – electroid
    Dec 4, 2011 at 6:26
0

Finally got it works, after download new version of jquery library.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.