JSFiddle - React, Tailwind, and code Playground

by Roger Sanchez

HTML

<script src="http://www.twospy.com/galleriffic/js/jquery-1.3.2.js"></script>
<script src="http://www.twospy.com/galleriffic/js/jquery.history.js"></script>
<script src="http://www.twospy.com/galleriffic/js/jquery.galleriffic.js"></script>
<script src="http://www.twospy.com/galleriffic/js/jquery.opacityrollover.js"></script>
<div id="page">
    <div id="container">
        	<h1><a href="index.html">Galleriffic</a></h1>

        <!-- Start Advanced Gallery Html Containers -->
        <div class="navigation-container">
            <div id="thumbs" class="navigation">	<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>

                <ul class="thumbs noscript">
                    <li>	<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
									<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
								</a>

                        <div class="caption">
                            <div class="image-title">Title #0</div>
                            <!--PDF CODE STARTS-->
                            <div id="pdf">
                                <iframe src="https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
                    <p>It appears you don't have Adobe Reader or PDF support in this web browser. <a href="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf">Click here to download the PDF</a></p>
                </iframe>
                            </div>
                            <!--PDF CODE ENDS-->
                            <div class="download">	<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>

                            </div>
                        </div>
                    </li>
                    <li>	<a class="thumb" name="drop"...

CSS

html, body {
    margin:0;
    padding:0;
}
body {
    text-align: center;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
    background-color: #eee;
    color: #444;
    font-size: 75%;
}
a {
    color: #27D;
    text-decoration: none;
}
a:focus, a:hover, a:active {
    text-decoration: underline;
}
p, li {
    line-height: 1.8em;
}
h1, h2 {
    font-family:"Trebuchet MS", Verdana, sans-serif;
    margin: 0 0 10px 0;
    letter-spacing:-1px;
}
h1 {
    padding: 0;
    font-size: 3em;
    color: #333;
}
h2 {
    padding-top: 10px;
    font-size:2em;
}
pre {
    font-size: 1.2em;
    line-height: 1.2em;
    overflow-x: auto;
}
div#page {
    width: 900px;
    background-color: #fff;
    margin: 0 auto;
    text-align: left;
    border-color: #ddd;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}
div#container {
    padding: 20px;
}
div#ads {
    clear: both;
    padding: 12px 0 12px 66px;
}
div#footer {
    clear: both;
    color: #777;
    margin: 0 auto;
    padding: 20px 0 40px;
    text-align: center;
}
body {
    background-color: #111;
    color: #bbb;
}
a {
    color: #f70;
}
h2 {
    color: #ccc;
}
div#page {
    background-color: #000;
    border-color: #222;
}
div#footer {
    color: #888;
}
div.caption-container {
    color: #eee;
}
div.image-title {
    font-weight: bold;
    font-size: 1.4em;
}
div.image-desc {
    line-height: 1.3em;
    padding-top: 12px;
}
div.download {
    margin-top: 8px;
}
div.photo-index {
    color: #888;
}
div.navigation a.prev {
    background-image: url(prevPageArrowWhite.gif);
}
div.navigation a.next {
    background-image: url(nextPageArrowWhite.gif);
}
div.loader {
    background-image: url(loaderWhite.gif);
}
div.slideshow img {
    border-color: #333;
}
ul.thumbs li.selected a.thumb {
    background: #fff;
}
div.pagination a:hover {
    background-color: #111;
}
div.pagination span.current {
    background-color: #fff;
    border-color: #fff;
   ...

JavaScript

jQuery(document).ready(function ($) {
    // We only want these styles applied when javascript is enabled
    $('div.content').css('display', 'block');

    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 0.67;
    $('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
        mouseOutOpacity: onMouseOutOpacity,
        mouseOverOpacity: 1.0,
        fadeSpeed: 'fast',
        exemptionSelector: '.selected'
    });

    // Initialize Advanced Galleriffic Gallery
    var gallery = $('#thumbs').galleriffic({
        delay: 2500,
        numThumbs: 10,
        preloadAhead: 10,
        enableTopPager: false,
        enableBottomPager: false,
        imageContainerSel: '#slideshow',
        controlsContainerSel: '#controls',
        captionContainerSel: '#caption',
        loadingContainerSel: '#loading',
        renderSSControls: true,
        renderNavControls: true,
        playLinkText: 'Play Slideshow',
        pauseLinkText: 'Pause Slideshow',
        prevLinkText: '&lsaquo; Previous Photo',
        nextLinkText: 'Next Photo &rsaquo;',
        nextPageLinkText: 'Next &rsaquo;',
        prevPageLinkText: '&lsaquo; Prev',
        enableHistory: true,
        autoStart: false,
        syncTransitions: true,
        defaultTransitionDuration: 900,
        onSlideChange: function (prevIndex, nextIndex) {
            // 'this' refers to the gallery, which is an extension of $('#thumbs')
            this.find('ul.thumbs').children()
                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                .eq(nextIndex).fadeTo('fast', 1.0);

            // Update the photo index display
            this.$captionContainer.find('div.photo-index')
                .html('Photo ' + (nextIndex + 1) + ' of ' + this.data.length);
        },
        onPageTransitionOut: function (callback) {
            this.fadeTo('fast', 0.0, callback);
        },
       ...