JSFiddle - React, Tailwind, and code Playground

by morrison

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle/cycle.css">
<link rel="stylesheet" href="http://static.tumblr.com/ux4v5bf/T2Ulk6jsp/payattentiontome.css">
<script src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
<div class="nav">
    <a id="prev2" href="#">Prev</a>
    <a id="next2" href="#">Next</a>
</div>  

<div class="holder">
    <div id="s7" style="position: relative; width: 650px; height: 530px; overflow-x: hidden; overflow-y: hidden; ">
        
        <div id="posts" style="position: absolute; top: 0px; opacity: 1; z-index: 15; left: 650px; display: none; ">
            
            
            
            
            
            
            
            
            
            
            
            
            
            <img id="audioBubble" src="http://static.tumblr.com/ux4v5bf/dWolhmkg1/audio.png">
            <div class="playerHolder"><div class="player"><script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?535"></script><span id="audio_player_1519948781"><div class="audio_player"><embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/1519948781/tumblr_lblci9hynp1qboy47&amp;color=FFFFFF" height="27" width="207" quality="best"></div></span><script type="text/javascript">replaceIfFlash(9,"audio_player_1519948781",'\x3cdiv class=\x22audio_player\x22\x3e<embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/1519948781/tumblr_lblci9hynp1qboy47&color=FFFFFF" height="27" width="207" quality="best"></embed>\x3c/div\x3e')</script></div> 
                </div>
                
                
                <div class="caption"><p>Y soy fabuloso!!!! This is so fabulous I cant even understand...

CSS

body {
    color:#474b4d;
    font: normal 28px/28px 'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
    background:#555 url('') no-repeat center center fixed;
    overflow:hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#s7 {
    width:650px;
    margin:200px auto;
    overflow: hidden;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    -moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
    box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

#s7 #posts {
    width: 620px; 
    padding: 15px; 
    color: #333; 
    font-size: 13px; 
    text-align:left; 
    background:#EEE;
    line-height:16px;
    min-height:500px;
    margin:0 auto;
}

td a { margin: 5px }
.nav { margin: 5px 0 }

.photo {
    position:relative;
    overflow: hidden;
    width: 620px;
    height: 451px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#photo {
    max-width:550px;
    max-height:510px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    -moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
    box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.caption {
    position:absolute;
    right:12px;
    margin-top:20px;
    margin-bottom:-10px;
    background:#9dc6e8 url('http://static.tumblr.com/ux4v5bf/6frlk3kr0/top.png') no-repeat;
    padding:3px;
    padding-top:1px;
    padding-right:10px;
    padding-left:7px;
    padding-bottom:6px;
    width:150px;
    text-align:left;
    font-size:11px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    -moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
    box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

#bottom {
    margin-top:6px;
    margin-bottom:-20px;
}

.playerHolder {
    height:11px;
    width:5px;
    overflow:hidden;
   ...

JavaScript

$.fn.cycle.defaults.timeout = 6000;

$('#s7').cycle({
    fx: 'scrollRight',
    speed: 1000,
    timeout: 0,
    next: '#next2',
    prev: '#prev2',
    easing: 'easeinout'
});

function onBefore() {
    console.log("Scrolling image:<br>" + this.src);
    //window.console.log(  $(this).parent().children().index(this) );
}

function onAfter() {
    $('#output').html("Scroll complete for:<br>" + this.src).append('<h3>' + this.alt + '</h3>');
}