Question

I am creating a custom lightbox which is basically a large image generated from a small image in a slider. The transition from small to large image is animated. It works ok but after several clicks/triggers, it becomes real slow that you can see frames displaying a split second until it reaches the final state. Are there issues with animate method that I am not aware of? Or am I using it wrong, I mean are there any standards in using animate method? Or my code just sucks? Here’s my code.

var $j = jQuery.noConflict();
$curIndex = 0;

function curIndex(){
    return $curIndex;
}

function next($index, $direct){

    var $sliderList = $j('#mainSlider li');
    var $imgs = {};

    $sliderList.map(function(index){
        $imgs[index] = $j(this).children('img').attr('src');     
    });

    if ($index == -1) {
        return $imgs[$index + 1]; 

    } else if ($index == $sliderList.length) {
        return $imgs[$index - 1]; 

    } else {

        $curIndex = $index;
        return $imgs[$index];    
    }  
}

function get_size($type) {

    var $width = $j(window).width(); 
    var $height = $j(window).height();
    var $top = $j(window).height();  

    if ($type == 'width') {
        return $width;
    } else if ($type == 'height') {
        return $height;
    } else {
        return $top;
    }
}

$j(document).ready(function(){

    var $imgStyle = {
        'top' : get_size('top') * .075 + 'px',
        'left' : get_size('width') * .125 + 'px',
        'width' : get_size('width') * .75 + 'px', 
        'height' : get_size('height') * .85 + 'px',
        'position':'absolute', 
        'z-index':'200'
    };

    $j('body').append(
        '<div class="arj-lightbox-con"><div class="arj-lightbox-shade"></div></div>'
    );

    $j('#mainSlider img').click(function(){

        var $offset = $j(this).offset();
        var $clckdImage = $j(this);

        $j('.arj-lightbox-con').fadeIn().append('<div class="arj-controls"></div><div class="arj-caption"></div>');

        $j('.arj-controls').css({
            'top' : get_size('top') * .075 + 'px',
            'left' : get_size('width') / 2 - 50 + 'px'  
        }).append('<span class="arrow back"></span><span class="close"></span><span class="arrow forward"></span>');

        $j('.arj-caption').css({
            'bottom' : get_size('top') * .075 + 'px',
            'left' : get_size('width') * .125 + 'px',
            'width' : get_size('width') * .75 + 'px'
        });

        $j('.close').click(function(){
            $j('.arj-lightbox-con').css('display', 'none');
            $j('.arj-controls').remove();
            $j('.arj-caption').remove();
        });

        var $onClickSrc = next($j(this).parent().index());

        $j('.arj-lightbox-con').append('<img src="' + $onClickSrc + '" alt="arj-lightox" />');

        $j('.arj-lightbox-con img').css({
            'width' : $clckdImage.css('width'), 
            'height' : $clckdImage.css('height'),
            'top': $offset.top,
            'left': $offset.left,
            'right': $offset.right,
            'position':'absolute', 
            'z-index':'200',
        }).animate({
            top : get_size('top') * .075 + 'px',
            left : get_size('width') * .125 + 'px',
            width : get_size('width') * .75 + 'px', 
            height : get_size('height') * .85 + 'px'
        }, 250, function(){
            $j('.arj-controls').fadeIn();
            $j('.arj-caption').fadeIn();
        });

        $j('.forward').click(function(){
            var $nextForwardSrc = next(curIndex() + 1, 1);
            var $newImage =  '<img src="' + $nextForwardSrc + '" alt="arj-lightox" />';
            $j('.arj-lightbox-con').append($newImage);
            $j('.arj-lightbox-con img').css($imgStyle); 
        });

        $j('.back').click(function(){
            var $nextBackSrc = next(curIndex() - 1, -1);
            var $newImage =  '<img src="' + $nextBackSrc + '" alt="arj-lightox" />';
            $j('.arj-lightbox-con').append($newImage);
            $j('.arj-lightbox-con img').css($imgStyle);

        });
    }); 
});

Answer 1

Your code just sucks, you are doing many things that could be improved. Here is the link to the lightbox code for reference:

http://trip.wtfmarketing.com/wp-content/themes/charleycoffee/arj.lightbox.js

        $j('.arj-lightbox-con').fadeIn().append('<div class="arj-controls"></div><div class="arj-caption"></div>');

Looking at this line, there are two problems. One, every time you click on something, you are running a jQuery selector which hits every single DOM node looking for ANY element with the class name of “.arj-lightbox-con”. You can cache this simply by assigning it to a variable.

But the worst part is you are constantly appending. You are making the contents of .arj-lightbox-con longer and longer each time, filling it with images. When that element fades in, the browser is also fading in the dozens of images in the lightbox even though you can’t see them. You never clear it. This is a simple fix:

$j('.arj-lightbox-con').empty().fadeIn()... blah blah

General debugging tip: If you had inspected your lightbox element with Firebug you would have seen the image pileup and could have helped with debugging.