Metro Carousel

by andfinally

HTML

<div class="hdl-carousel">
    <ul>
        <li>
            <a href="/showbiz/890246-whitney-houstons-body-arrives-home-as-doctors-set-to-be-quizzed" class="portrait_carousel_link" title="Whitney's body arrives home as doctors set to be quizzed by police"><img src="http://img.metro.co.uk/i/pix/2012/02/14/article-1329214266407-11BB050E000005DC-399826_304x330.jpg" alt="Whitney's body arrives home as doctors set to be quizzed by police">

                <div class="translucent_container">
                    <div class="translucent_bg">
                        <div class="opaque_text">
                            <h2>Whitney's body arrives home as doctors set to be quizzed by police</h2></div>
                    </div>
                </div>
            </a></li>
        <li>
            <a href="/film/890243-bond-girl-naomie-harris-i-do-all-my-own-stunts-in-skyfall" class="portrait_carousel_link" title="Bond girl Naomie Harris: I do all my own stunts in Skyfall"><img src="http://img.metro.co.uk/i/pix/2012/02/14/article-1329214691789-11B3F135000005DC-324501_304x330.jpg" alt="Bond girl Naomie Harris: I do all my own stunts in Skyfall">

                <div class="translucent_container">
                    <div class="translucent_bg">
                        <div class="opaque_text"><h2>Bond girl Naomie Harris: I do all my own stunts in Skyfall</h2>
                        </div>
                    </div>
                </div>
            </a></li>
        <li>
            <a href="/music/890191-tom-jones-adele-would-be-perfect-for-james-bond-film-skyfalls-theme-tune" class="portrait_carousel_link" title="Tom Jones: Adele would be perfect for Bond theme tune"><img src="http://img.metro.co.uk/i/pix/2012/02/13/article-1329172804543-11B5DE0B000005DC-93588_304x330.jpg" alt="Tom Jones: Adele would be perfect for Bond theme tune">

                <div class="translucent_container">
                    <div class="translucent_bg">
                        <div...

CSS

.hdl-carousel{position:relative;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;}
#content>.c-1of3 .hdl-carousel li{display:block;position:static;}
.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;background-position:left top;background-repeat:repeat;background-color:transparent!important;background-image:none;background-color:#000;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.2em!important;line-height:1.2em;}
.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:transparent url('http://f.metro.co.uk/images/f/icons/modules_sprite24.png') no-repeat 0 0;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:transparent url('http://f.metro.co.uk/images/f/icons/modules_sprite24.png') no-repeat -60px 0;text-indent:-9999px;}
.hdl-l-txt li{padding:5px 0 3px 15px;}
.hdl-l-txt .first{padding:10px 0 10px 15px;}
.hdl-l-txt .first .arr-r{top:4px;_top:3px;}
.hdl-l-txt h3{border-width:2px;padding-bottom:5px;}

JavaScript

window.addEvent('domready', function() {
    if ($$('.hdl-carousel').length > 0) {
        $$('.hdl-carousel').each(function(item) {
            var carousel = new PortraitCarousel(item);
        });
    }
});


PortraitCarousel = new Class({

    Implements: Events,
    Implements: Options,

    options : {
      imageWidth: 304
    },

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

    grabElements : function() {
        this.items = this.wrapperElm.getElements('li');
        this.nextBtn = this.wrapperElm.getElement('.next');
        this.prevBtn = this.wrapperElm.getElement('.prev');
    },

    createTweens : function() {
        this.nextTween = new Fx.Morph(
            this.nextBtn, {
                transition: Fx.Transitions.Sine.easeOut
            }
        );
        this.prevTween = new Fx.Morph(
            this.prevBtn, {
                transition: Fx.Transitions.Sine.easeOut
            }
        );
        this.tweenArray = [];
        this.items.each(function(item,index){
            this.tweenArray[index] = new Fx.Morph(
                item, {
                    transition: Fx.Transitions.Sine.easeInOut,
                    link: 'cancel'
                }
            )
        }.bind(this))
    },

    attachEvents : function() {
        this.nextBtn.addEvent('click', function(){
            this.showNext();
        }.bind(this));
        this.prevBtn.addEvent('click', function(){
            this.showPrev();
        }.bind(this));
        this.wrapperElm.addEvents({
            'mouseenter': function(){
                this.nextBtn.morph({
                    'opacity': 1,
                    link: 'cancel'
                });
                this.prevBtn.morph({
 ...