2
\$\begingroup\$

I have made a carousel with sections and animated background images. How can I make the code better and more reusable? It's now working with a width of only 3 sections.

$(function () {
    var state = 0;
    var background = $(".selection-carousel .carousel-image"),
        buttonLeft = $(".selection-carousel .carousel-left"),
        buttonRight = $(".selection-carousel .carousel-right"),
        imageWidth = 1000,
        imageWidthMin = -1000,
        reelSize = 3,
        imageSum = $('.selection-carousel img').size(),
        maxPos = (imageSum - reelSize) * imageWidth;
    $(".selection-carousel section").hide();
    $(".selection-carousel section:first").show();
    $(".selection-carousel section:first").append(' <div class="steam"></div> ');

    // If ie8 than use drop shadow fallback
    if ($("html").hasClass("ie8")) {
        $(".selection-carousel section:first h2, .selection-carousel section:first p").dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
    }

    buttonLeft.hide();
    buttonRight.click(function (e) {
        e.preventDefault();
        var trigger = $('class'),
            maxPos = (imageSum - reelSize) * -imageWidthMin,
            image_reelPosition = (trigger === 'carousel-right') ? -imageWidth : imageWidth,
            reel_currentPosition = $('.carousel-image').css('left').replace('px', ''),
            pos = reel_currentPosition - image_reelPosition;
        $(".selection-carousel section:visible .steam").remove();
        if ($(background).is(':animated')) {
            $(background).is(':animated').stop();
        }
        background.animate({ left: "-=1000px" }, 1100, function () {
            $(".selection-carousel section:visible").fadeOut(300, function () {
                $(this).next().fadeIn(600, function () {
                    if ($("html").hasClass("textshadow")) {
                        $(this).append(' <div class="steam"></div> ');
                        createSteam();
                    }
                    if ($("html").hasClass("no-textshadow")) {
                        $("h2", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                        $("p", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                    }
                });
            });
        });
        state++;
        checkstate();
    });
    buttonLeft.click(function (e) {
        e.preventDefault();
        var trigger = $('class'),
            maxPos = (imageSum - reelSize) * -imageWidthMin,
            image_reelPosition = (trigger === 'carousel-right') ? -imageWidth : imageWidth,
            reel_currentPosition = $('.carousel-image').css('left').replace('px', ''),
            pos = reel_currentPosition - image_reelPosition;
        $(".selection-carousel section:visible .steam").remove();
        if ($(background).is(':animated')) {
            $(background).is(':animated').stop();
        }
        background.animate({ left: "+=1000px" }, 1100, function () {
            $(".selection-carousel section:visible").hide().prev().fadeIn(600, function () {
                if ($("html").hasClass("textshadow")) {
                    $(this).append(' <div class="steam"></div> ');
                    createSteam();
                }
                $(".dropShadow").remove();
                if ($("html").hasClass("no-textshadow")) {
                    $("h2", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                    $("p", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                }
            });
        });
        state--;
        checkstate();
    });
    function checkstate () {
        if  (state == 0) {
            if ($(".carousel-left").is(':visible'))
                if ($("html").hasClass("textshadow")) {
                    $(".carousel-left").fadeOut(600);
                } else {
                    $(".carousel-left").hide();
                }
        }
        else if (state == 1) {
              if ($(".carousel-left").is(':hidden'))
                 if ($("html").hasClass("textshadow")) {
                    $(".carousel-left").fadeIn('slow'); 
                 } else {
                     $(".carousel-left").show(); 
                 }

              if ($(".carousel-right").is(':hidden'))
                if ($("html").hasClass("textshadow")) {
                    $(".carousel-right").fadeIn(600);
                } else {
                    $(".carousel-right").show();
                }
        }
        else {
              if ($(".carousel-right").is(':visible'))
              if ($("html").hasClass("textshadow")) {
                 $(".carousel-right").fadeOut(600); 
              } else {
                   $(".carousel-right").hide(); 
              }
        }
    }
});
\$\endgroup\$
2
  • 1
    \$\begingroup\$ In terms of readability, you can move the repeating part of your code to a separate function, and call it. \$\endgroup\$ – Rob W Oct 31 '11 at 8:51
  • 1
    \$\begingroup\$ You can't optimise javascript code without knowing your HTML structure \$\endgroup\$ – Raynos Oct 31 '11 at 10:10
2
\$\begingroup\$

Some small tips could be:

Use the jquery plugin strcture for extending it with options, create/destroy/next/prev functions. See: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

Don't overuse selectors

var background = $(".selection-carousel .carousel-image"),
    buttonLeft = $(".selection-carousel .carousel-left"),
    buttonRight = $(".selection-carousel .carousel-right"),

Could be:

var selector = $('.selection-carousel'),
    background = selector.children('.carousel-left'),
    buttonLeft = selector.children('.carousel-left'),
    buttonRight = selector.children('.carousel-right'),

Everytime you make it search the entire DOM, it makes it slower/heavier to use. (Your checksate also overuse it).

Make some methods for the plugin, so you can create the carousel, destroy it, or send navigations functions (next/prev/gotoId).

Just some small tips :)

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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