JSFiddle - React, Tailwind, and code Playground

by nickywaites

HTML

<script src="http://www.twospy.com/galleriffic/js/jquery.galleriffic.js"></script>
<link rel="stylesheet" href="http://galleriffic.googlecode.com/svn/trunk/example/css/galleriffic-1.css">

<div id="gallery-container">
    <div id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_recipeSummary_lsvRecipes_ctl00_imageGallery_pnlContainer" class="imageList">
        
        
                <div id="thumbs" class="navigation">
                    <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
                    
                    <ul class="thumbs noscript">
                        
                <li id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_recipeSummary_lsvRecipes_ctl00_imageGallery_lsvImages_ctrl0_htmlLiContainer" class="gallleryImage even">
                    <a id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_recipeSummary_lsvRecipes_ctl00_imageGallery_lsvImages_ctrl0_lnkImage" title="Image 1" class="thumb" href="http://chickenping-recipes.s3-website-us-east-1.amazonaws.com/recipes/PICT0813_thumb.JPG"><img id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_recipeSummary_lsvRecipes_ctl00_imageGallery_lsvImages_ctrl0_imgPreview" src="http://chickenping-recipes.s3-website-us-east-1.amazonaws.com/recipes/PICT0813_microthumb.JPG" alt="View Full Size" style="border-width:0px;" /></a>

                    <div class="caption">
                        
                        <span title="Image #1" class="image-title"></span>
                        <span id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_recipeSummary_lsvRecipes_ctl00_imageGallery_lsvImages_ctrl0_litDescription" title="aasd asdf afsd" class="image-desc"></span>
                    </div>
                </li>
            
                <li id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_recipeSummary_lsvRecipes_ctl00_imageGallery_lsvImages_ctrl1_htmlLiContainer" class="gallleryImage alt">
                    <a...

JavaScript

$(function() {

    // We only want these styles applied when javascript is enabled
    $('div.navigation').css({
        'width': '300px',
        'float': 'left'
    });
    $('div.content').css('display', 'block');


    // Initialize Minimal Galleriffic Gallery
    $('#thumbs').galleriffic({
        imageContainerSel: '#slideshow',
        controlsContainerSel: '#controls'
    });

});