SUPERSIZED PLUGIN - With Example Includes Hard to Locate Online

by bizamajig

HTML

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
    
    <link rel="stylesheet" type="text/css" href="http://kinnill.com/dev/hinchcliff/css/stylesheet.css" />
    <link rel="stylesheet" href="http://kinnill.com/dev/hinchcliff/css/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://kinnill.com/dev/hinchcliff/theme/supersized.shutter.css" type="text/css" media="screen" />    
    
    <title>Hinchcliff &amp; Lee</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://kinnill.com/dev/hinchcliff/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="http://kinnill.com/dev/hinchcliff/js/supersized.3.2.7.js"></script>
    <script type="text/javascript" src="http://kinnill.com/dev/hinchcliff/theme/supersized.shutter.min.js"></script>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <meta name="keywords" content="antique" />
    <meta name="description" content="antique" />
    
    <link rel="icon" type="image/png" href="favicon.ico" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />       
    
</head>

<body>

<div id="wrapper">
    <div id="header">
    <img class="logo" src="http://kinnill.com/dev/hinchcliff/img/logo.png" alt="logo" height="89" width="300" />
        <div id="navigation">
        
        </div>
    </div>
    
    <div id="content">
        <div id="intro">
            <div id="larget"><p class="lgintro">Lorem ipsum dolor sit amet, adipisicing elit, tempior incidun dolre magna aliqua.</p></div>
            <div id="smallt"><h2>Calgary</h2> <p>Lorem ipsum dolor sit amet, consectetur adipicing clit, sed do ciusmod tempor incididunt.</p><br/><br/>
            <h2>Vancouver</h2> <p>Ut enim ad minim veniam, quiuas nostrud exercitation ullamco laboris...

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    outline: none;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* Reset Ends */

/**** Main ****/

html, body { height:100%; background-color: #000;}

#wrapper { width: 960px; margin: auto; }
#header { width: 960px; height:360px; }
#navigation { width: 960px; height:120px; margin-top:84px; }
#content { width: 960px; height: 240px; margin-top: 140px; }
#footer { width: 960px; height:60px; margin-top: 165px;...

JavaScript

jQuery(function($){
                
                $.supersized({
                
                    // Functionality
                    slideshow               :   1,            // Slideshow on/off
                    autoplay                :    0,            // Slideshow starts playing automatically
                    start_slide             :   1,            // Start slide (0 is random)
                    stop_loop                :    0,            // Pauses slideshow on last slide
                    random                    :     0,            // Randomize slide order (Ignores start slide)
                    slide_interval          :   30000,        // Length between transitions
                    transition              :   1,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed        :    1000,        // Speed of transition
                    new_window                :    1,            // Image links open in new window/tab
                    pause_hover             :   0,            // Pause slideshow on hover
                    keyboard_nav            :   0,            // Keyboard navigation on/off
                    performance                :    1,            // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                    image_protect            :    1,            // Disables image dragging and right click with Javascript
                                                               
                    // Size & Position                           
                    min_width                :   0,            // Min width allowed (in pixels)
                    min_height                :   0,            // Min height allowed (in pixels)
                    vertical_center         :   0,            // Vertically center background
       ...