SUPERSIZED - Resizing Method - RWD

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

body {background:transparent !important;} /* THIS LINE IS THE POINT OF THIS FIDDLE */
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:...

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
       ...