My inarowCarousel jQuery plugin

This post is to share my first jQuery plugin with you folks!
It's nothing special and I know there are many carousel plugins already but it was fun to understand what I was doing!

Learn jQuery 1.3This article is discontinued, please visit new article.

Last month I finished the book Learning jQuery 1.3 by Karl Swedberg and Jonathan Chaffer and I've already started to use all the knowledge acquired from the book in my projects.

Javascript and jQuery was a pending subject in my todo list. Before to read this book I was able just to copy-paste other people's code and maybe change it a bit without understanding all the script. I used to get lost with those parenthesis, brackets and strange function definitions. All these things didn't have any meaning for me. But now! wow!
This book, tho is covering an old version of jQuery (1.3), it seems to me like it is all that I needed to know about jQuery. Maybe now I'm ready to go to jQuery 1.7 :)

About the plugin

This plugin is in its very alpha version. It's working perfect and I won't modify it unless I have no projects to do.
Honestly, the name is not good. I didn't think that much about it. The name is inarowCarousel (in-a-row-Carousel) because before this plugin I was working in another version which was moving every image to the first position of the container and this new version is positioning the images in line (in a row) and moving the container instead.

I did it keeping in mind to be progresive so if someone would have javascript disabled the information would be able with a correct presentation.

It creates as many buttons as images are to go straightforward to the desired image.

Here is the plugin's code:

	(function($){
	    $.fn.inarowCarousel = function(options){
	        var Defaults = {
	            spacing: 1024,
	            height: 322,
	            elementTag: 'a'
	        };
	        var opts = $.extend(Defaults, options);
	        return this.each(function(){
	            var currentPos = 0;
	            var $mainObj = $(this);
	            // Images to work with.
	            var $covers = $mainObj.find('.covers '+opts.elementTag);
	            
	            $mainObj
	                .css({
	                    width: opts.spacing,
	                    height:opts.height,
	                    overflow:'hidden'
	                })
	                .find('.covers')
	                .css({
	                    width: $covers.lenght * opts.spacing,
	                    position: 'absolute',
	                    left:'0px',
	                    top:'0px',
	                })
	                .find(opts.elementTag)
	                .css({
	                    position:'absolute',
	                    left:opts.spacing
	                });
	            
	            var $btns = $('<div>')
	                .addClass('project-carousel-direct-buttons');
	            
	            // To move to an element of the list
	            function moveTo(index){
	                currentPos = index;
	                $covers
	                  .parent()
	                  .animate({'left':-1 * currentPos * opts.spacing}, 'slow', 'easeInOutQuart', function(){
	                    $btns.find('a').removeClass('selected').eq(index).addClass('selected');
	                });
	            }
	            
	            // Creating left and right arrows.
	            function createControl(cls){
	                return $('<div>')
	                    .addClass(cls)
	                    .addClass('button')
	                    .css('opacity', '0')
	                    .css('height', opts.height);
	            }
	            
	            // Positioning images.
	            $covers.each(function(index){
	                $(this).css('left', opts.spacing * index);
	                $('<a>')
	                    .text(index)
	                    .attr('href', '#')
	                    .click(function(event){
	                        moveTo(index);
	                        event.preventDefault();
	                    })
	                    .appendTo($btns);
	            });
	            
	            $btns
	                .css({
	                    'display': 'block',
	                })
	                .find('a')
	                .eq(0)
	                .addClass('selected');
	
	            
	            if ($covers.length > 1){
	                
	                $btns.insertAfter($mainObj);
	                
	                createControl('left')
	                    .unbind('click mouseenter mouseleave')
	                    .hover(function(){
	                        $(this).css('opacity', '0.6');
	                    },function(){
	                        $(this).css('opacity', '0');
	                    })
	                    .click(function(){
	//    This line is not working in javascript. Reference: http://javascript.about.com/od/problemsolving/a/modulobug.htm
	//                        currentPos = (currentPos-1) % $covers.length;
	                        currentPos--;
	                        if (currentPos < 0){
	                            currentPos = $covers.length - 1;
	                        }
	                        moveTo(currentPos);
	                    })
	                    .insertBefore($mainObj.find('.covers'));
	                
	                createControl('right')
	                    .unbind('click mouseenter mouseleave')
	                    .hover(function(){
	                        $(this).css('opacity', '0.6');
	                    },function(){
	                        $(this).css('opacity', '0');
	                    })
	                    .click(function(){
	                        currentPos = Math.abs((currentPos+1) % $covers.length);
	                        moveTo(currentPos);
	                    })
	                    .insertBefore($mainObj.find('.covers'));
	                
	                
	            }
	            
	        });
	    };
	})(jQuery);
	


And here is the CSS:

	#project-carousel{
	    position:relative;
	    width:1024px;
	    height:342px;
	    overflow:auto;
	    z-index:2;
	}
	#project-carousel.height322{
	    height:322px;
	}
	#project-carousel.height644{
	    height:644px;
	}
	#project-carousel .covers{
	    position:relative;
	    width:30720px;/*Space for 30 images of 1024px*/
	    z-index:1;
	}
	#project-carousel a{
	    display:inline-block;
	    position:relative;
	    float:left;
	    width:1024px;
	    height:322px;
	}
	#project-carousel .covers > img{
	    display:inline-block;
	    position:relative;
	    float:left;
	}
	#project-carousel .button{
	    /*display: none;*/
	    position: absolute;
	    z-index: 1000;
	    top:0px;
	    height:322px;
	    width:100px;
	    
	}
	#project-carousel .left{
	    background: url(../img/btn-left.jpg) no-repeat left center;
	    left:10px;
	}
	#project-carousel .right{
	    background: url(../img/btn-right.jpg) no-repeat right center;
	    right:10px;
	}
	.project-carousel-direct-buttons{
	    position: absolute;
	    z-index: 5;
	    display:none;
	    width:100%;
	    text-align:center;
	}
	.project-carousel-direct-buttons a{
	    position: relative;
	    z-index: 1;
	    display:inline-block;
	    width:21px;
	    height:21px;
	    margin:10px;
	    text-indent:900px;
	    background: url(../img/list-btn.png) no-repeat;
	    background-position: -37px -21px;
	    overflow:hidden;
	}
	.project-carousel-direct-buttons a.selected{
	    background-position: 0px -21px;
	}
	


How to use it

The HTML can be like this:

    <div id="project-carousel">
        <div class="covers">
            <a href="/projects/view/1">
                <img src="/images/image1.png" alt="image1" />
            </a>
            <a href="/projects/view/2">
                <img src="/images/image2.png" alt="image2" />
            </a>
            <a href="/projects/view/3">
                <img src="/images/image3.png" alt="image3" />
            </a>
            <a href="/projects/view/4">
                <img src="/images/image4.png" alt="image4" />
            </a>
        </div>
    </div>

And the javascript to make this code be a carousel should be like this:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.inarowCarousel.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){
$('#project-carousel').inarowCarousel();
});

//]]>
</script>

Another option, instead to put images <img/> inside anchors <a></a>, is to put only images <img/> and the script would be like this:

$(document).ready(function(){
    $('#project-carousel').inarowCarousel({elementTag: 'img'});
});

As you can see I still need to organize the code, and to write some comments, documentation and many other things.
I apologize for this inconvenience. I will be updating the post with new modifications.

I would appreciate your comments!

Tue, Sep 11th 2012, 22:07 | CSS

2 Comments

Andrés Wed, Sep 12th 2012, 00:23
Hola Pedro. Felicidades por el artículo: me ha parecido muy bueno. ¿No tendrás el ejemplo en algún servidor para ver el carrusel?
Pedro Wed, Sep 12th 2012, 00:33
Muchas gracias, Andrés. Sí, ahora mismo tengo un sitio en pruebas. Aquí te dejo la dirección: http://inarowcarousel.lightbyte.org/inarowcarousel/test/

Add New Comment

Your name:
Your e-mail:
Your web page:
Comment:
I would like to receive new comment notification.
Security code: