Image carousel with translucency

by andfinally

HTML

<div class="hdl-carousel">
    <ul>
        <li>
            <a href="http://news.bbc.co.uk" class="portrait_carousel_link" title="asdfasdfasdf"><img src="http://img.metro.co.uk/i/pix/2011/10/24/article-1319472190899-0E679E0600000578-617353_304x330.jpg" alt="asdfasdfasdf">

                <div class="translucent_container">
                    <div class="translucent_bg">
                        <div class="opaque_text"><h2>asdfasdfasdf</h2></div>
                    </div>
                </div>
            </a></li>
        <li>
            <a href="http://times.co.uk" class="portrait_carousel_link" title="test"><img src="http://img.metro.co.uk/i/pix/2011/10/24/article-1319472201092-0E6809E500000578-784851_304x330.jpg" alt="test">

                <div class="translucent_container">
                    <div class="translucent_bg">
                        <div class="opaque_text"><h2>test</h2></div>
                    </div>
                </div>
            </a></li>
        <li>
            <a href="http://india.com" class="portrait_carousel_link" title="test"><img src="http://img.metro.co.uk/i/pix/2011/10/24/article-1319472214046-0E6FB21100000578-165605_304x330.jpg" alt="test">

                <div class="translucent_container">
                    <div class="translucent_bg">
                        <div class="opaque_text"><h2>test</h2></div>
                    </div>
                </div>
            </a></li>
    </ul>
    <a href="javascript:;" class="prev">Previous</a><a href="javascript:;" class="next">Next</a>
</div>

CSS

.hdl-carousel {
    position: relative;
    width: 304px;
    padding: 6px 4px 2px;
}

.hdl-carousel ul {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 334px;
    margin-left: 0;
    padding-left: 0;
}

.hdl-carousel li {
    display: none;
    position: absolute;
    list-style-type: none;
    min-height: 334px;
}

.hdl-carousel li:first-child {
    display: block;
}

.hdl-carousel a {
    display: block;
    position: relative;
}

.hdl-carousel a img {
    vertical-align: bottom;
}

.hdl-carousel .translucent_container {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}

.hdl-carousel .translucent_bg {
    min-height: 50px;
    background-image: url('http://f.metro.co.uk/images/f/tv/trans_black_60.png') !important;  /* Mozilla only */    
    background-position: left top;                      /* Mozilla only */
    background-repeat: repeat;                          /* Mozilla only */
    background-color: transparent !important;           /* Mozilla only */
    background-image: none;                             /* IE only */
    background-color: #000;                             /* IE only */
    filter:alpha(opacity=60);
}

.hdl-carousel .opaque_text {
    position: relative;
    padding: 10px;
    color: #fff;
    font-family: Arial Black,Arial,Gadget,sans-serif;
    font-size: 2.4em;
}

.hdl-carousel .prev {
    display: block;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // first!
    filter: alpha(opacity=0);
    position: absolute;
    z-index: 2;
    top: 90px;
    left: 4px;
    width: 60px;
    height: 80px;
    background: black;
    text-indent: -9999px;
}

.hdl-carousel .next {
    display: block;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // first!
    filter: alpha(opacity=0);
    position: absolute;
    z-index: 2;
    top: 90px;
    right: 4px;
    width: 60px;
    height: 80px;
    background: black;
   ...

JavaScript

/*

- get number li items in wrapperElm
    - if more than one:
        - set showing = items[0]
        - create next/prev button fade tween objects
        - create item slide tween objects
        - add mouseover/mouseout events to wrapperElm:
            - fade in/fade out next/prev buttons
        - add click event to next/prev:
            - next:
                - move to next image:
                    - if showing = items[number of items - 1], get items[0]
                    - else get items[item currently in showing + 1]
                    - set position of the new item out of view to the right with "left: 304px"
                    - slide the item currently set in showing out of view to the left
                    - slide the new item into view from the right
                    - set showing = new item
            - previous:
                - move to previous image:
                    - if showing = items[0], get items[number of items - 1]
                    - else get items[item currently in showing - 1]
                    - set position of the new item out of view to the left with "left: -304px"
                    - slide the item currently set in showing out of view to the right
                    - slide the new item into view from the left
                    - set showing = new item

- When we attached the mouseenter and mouseleave events for next and previous buttons one by one using addEvent() there was some kind of weird conflict between the two. When we attach them at the same time with addEvents() the conflict disappears.

*/


PortraitCarousel = new Class({

    Implements: Events,
    Implements: Options,

    options : {
        imageWidth: 304
    },

    initialize : function(wrapperElm, options) {
        this.wrapperElm = wrapperElm;
        this.grabElements();
        if (this.items.length > 1) {
            this.setOptions(options);
            this.showing = 0;
            this.createTweens();
           ...