JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<!-- RIGHT MENU POSITION FIXED -->
<div id="menu">
<h1>Work</h1>
<br>
<h1>Profile</h1>
<br>
<h1>Contact</h1>
</div>

<!-- WRAPPER -->
<div id="wrapper">

<!-- LEFT NAV -->
<div id="leftnav">
        <div class="slideshow" style="position: relative; display: none">
        <img src="http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/work/japan_11.03/hope_for_japan_1.jpg" alt="Japan 11/03: Title page">
        <img src="http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/work/japan_11.03/hope_for_japan_2.jpg" alt="Japan 11/03: Land of the rising sun">
        <img src="http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/work/japan_11.03/hope_for_japan_3.jpg" alt="Japan 11/03: Fishing for inspiration">
        <img src="http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/work/japan_11.03/hope_for_japan_4.jpg" alt="Japan 11/03: A little place called home">
        <img src="http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/work/japan_11.03/hope_for_japan_5.jpg" alt="Japan 11/03: Shinkasen">
        <img src="http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/work/japan_11.03/hope_for_japan_6.jpg" alt="Japan 11/03: Getting back into the swing of things">
        <img src="http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/work/japan_11.03/hope_for_japan_7.jpg" alt="Japan 11/03: Remembered and not forgotten">
</div><div id="nav"></div>
</div>

<!-- RIGHTNAV -->
<div id="rightnav">
</div>

<!-- RIGHTNAVTOP -->
<div id="menutopcolor">
</div>

<!-- MAIN CONTENT -->
<div id="maincontent">
<h2> Japan 11/03
</h2>
<p>On March 11th at 14:46 local time, an earthquake struck the northeast, Tohoku region of Japan. This publication is a collaboration with the Japanese photographer Hideaki Hamada. The book raises money for the reconstruction of homes that were destroyed by the disaster.
</p>
</div>

</div>

CSS

@font-face {

font-family: 'Gibson-Light';src: url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_0.eot');src: url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_0.eot?#iefix') format('embedded-opentype'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_0.woff') format('woff'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_0.ttf') format('truetype'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_0.svg#wf') format('svg');

}
 

@font-face {font-family: 'Gibson-LightIt';src: url('159693_1.eot');src: url('159693_1.eot?#iefix') format('embedded-opentype'),url('159693_1.woff') format('woff'),url('159693_1.ttf') format('truetype'),url('159693_1.svg#wf') format('svg');

}


@font-face {font-family: 'Gibson-Bold';src: url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_2.eot');src: url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_2.eot?#iefix') format('embedded-opentype'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_2.woff') format('woff'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_2.ttf') format('truetype'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_2.svg#wf') format('svg');

}

@font-face {font-family: 'Gibson-SemiBold';src: url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_3.eot');src: url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_3.eot?#iefix') format('embedded-opentype'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_3.woff') format('woff'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_3.ttf') format('truetype'),url('http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/css/159693_3.svg#wf') format('svg');

}

.slideshow {  
    height:  232px;  
    width:   232px;  
 ...

JavaScript

$(document).ready(function() {
    //$('.slideshow').after('<div id="nav">').cycle({
    $('.slideshow').cycle({
        fx: 'fade',
        sync: true,
        speedIn: 500,
        speedOut: 500,
        timeout: 10000,
        pager: '#nav',
        next: '.slideshow',
        slideResize: false
    });
    
   $('.slideshow').show(); 
});