Scrollable Content Like Cycle Plugin

by bizamajig

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Individual Distribution and Marketing</title>
 
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
    <div id="wrapper">
        <div id="primarySlider">
            <div class="content">
                <div class="group">
                    <a class="prev browse left">prev</a>
                   
                    <div id="scrollable" class="scrollable group">
                       
                       <div class="items group">
                           <div>
                                <div class="column group">
                                    <hgroup>
                                   <h2>Main title</h2>
                                   <h3>secondary title</h3>
                                    </hgroup>
                                   <p>contentcontentcontent</p>
                                   
                                   
                                </div>
                                <div class="column column2 group">
                                    <img src="content/brockwood.jpg" />
                                </div>

                            </div>
                           
                            <div>
                                <div class="column group">
                                <hgroup>
                                   <h2>CLASSIFIED</h2>
                                   <h3>asf</h3>
                                </hgroup>   
                               <p>paragraphtext para graphtext par a graph t ext</p>
                                </div>
                               <div class="column column2 group">
                                   <img height="238" width="422" src="images/img1.jpg" />
                          ...

CSS

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {

    /* required settings */
    float:left;
    position: relative;
    overflow:hidden;
    width: 886px;
}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accommodate scrollable items.
    it's enough that you set width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
.items div {
    float:left;
}

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Georgia, Times, serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    background: #fbfbfb url('../images/mainBgGrad.png') repeat-x;

}

p {
    line-height: 1.4;
    margin-bottom: 16px;
}

h1, h2, h3, h4 {
    font-weight: normal;
}

hgroup {
    margin-bottom: 10px;
}

.content {
    width: 1002px;
    margin: 0 auto;
}

#header {
    background: white url('../images/headergrad.png') repeat-x center bottom;
    height: 93px;
}

#header .logo {
    margin-top: 10px;
}

#header .portrait {
    margin-left: 50px;
}

#primarySlider {
    background: #444;
    color: white;
}

#primarySlider .content {
    min-height: 400px;
}

#primarySlider img {
    padding: 16px;
    background: transparent url('../images/imgframe450.png') no-repeat center;
}

.scrollable {
    min-height: 275px;
}

.scrollable .items div {
    width: 886px;
    padding: 20px 0px 0;
    margin-right: 100px;
}

.scrollable .items div div {
    margin: 0;
    padding: 0;
}

.scrollable .items .column {
    width: 47%;
}

.scrollable .items .column2 {
    width: 51%;
    padding-left: 2%;
}

.prev {
    background: transparent url('../images/prevBtn.png');
}

.prev:hover {
    background:...

JavaScript

$(function() {
      if (location.hash)
    {
        var thingie = '#' + location.hash.substring(1);
        var wingie = $('#' + location.hash.substring(1)).parent();
        //$('#' + location.hash.substring(1)).parent().click();
        $('#' + location.hash.substring(1)).click();
    }

    $(".scrollable").scrollable({ circular: true}).navigator({
        navi: "#slideTabs",
        naviItem: 'li',
        activeClass: 'current',
        history: true
    });
    
    
    
    alignHeight('#slideTabs li');
    $(window).load(
        
    function() {
        $('#scrollable').height( findTallest('.scrollable .items div') );
    }
);
    

});

function alignHeight(node){
    t = findTallest(node);
    
    $(node).each(function () {
        $this = $(this);
        $this.height(t);
    });
}

function findTallest(node) {
    var t=0;
    
    $(node).each(function () {
        $this = $(this);
        if ( $this.outerHeight() > t ) {
            t=$this.outerHeight();
        }
    });
    
    return t;
}