JSFiddle - React, Tailwind, and code Playground

by tobiasmay

HTML

<script src="http://www.tobiasmay.net/kunden/aks/backend/wp-content/themes/aks_portfolio/js/filterable.js"></script>
<script src="http://www.tobiasmay.net/kunden/aks/backend/wp-content/themes/aks_portfolio/js/jquery.ba-hashchange.min.js"></script>
<script src="http://www.kuemmel-schnur.de/backend/wp-content/themes/aks_portfolio/js/jquery-ui-widget.js"></script>
<script src="http://www.kuemmel-schnur.de/backend/wp-content/themes/aks_portfolio/js/jquery.smoothDivScroll-1.1-min.js"></script>
<div id="slideNav">
    <div id="filter">
        <ul id="portfolio-filter">
            <li class="first"><a href="#alle" title="Alle Projekte">Alle</a></li>
            <li><a href="#Texte" title="Texte">Texte</a></li>
            <li><a href="#Forschung" title="Forschung">Forschung</a></li>
            <li><a href="#Lehrprojekte" title="Lehrprojekte">Lehrprojekte</a></li>
            <li><a href="#Ausstellungen" title="Ausstellungen">Ausstellungen</a></li>
            <li><a href="#Theater" title="Theater">Theater</a></li>
        </ul>
    </div><!-- Ende filter -->
<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    
    <div class="scrollWrapper">
            
<!-- <div id="slider"> -->


    <ul id="portfolio-list" class="scrollableArea">

                        <li class="slide-item Forschung Projekte ">
    
            <div class="slider_post boxgrid captionfull">
                <a href="#" rel="bookmark" title="Sammlung Schmidt">
                
                    <img width="640" height="425" src="http://www.tobiasmay.net/kunden/aks/backend/wp-content/uploads/2010/06/07.jpg" class="attachment-160,230,true wp-post-image" alt="07" title="07" />  
                    </a>
                                                
                    <div class="cover boxcaption">
                        <h2 class="storytitle"><a href="#" rel="bookmark" title="Sammlung Schmidt">Sammlung Schmidt</a></h2>

  ...

CSS

.boxgrid{
    width: 160px;
    height: 230px;
    margin:10px;
    float:left;
    background:#161613;
    overflow: hidden;
    position: relative;
}

.boxgrid img{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

.boxcaption{
    float: left;
    position: absolute;
    background: #ff900b;
    height: 100px;
    width: 100%;
    opacity: .7;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
     }
     
.captionfull .boxcaption {
     top: 260px;
     left: 0;
 }
 
.caption .boxcaption {
     top: 290px;
     left: 0;
 }

#slider ul{
    list-style-type: none;
    padding-left: 0;
    margin: 0;

}

#aksslider li{
    display: inline;
}

/* Portfolio Filer Navigation */

#filter{
    width: 160px;
    height: 230px;
    float: left;
    padding: 10px 0 0 40px;
    position: relative;
    z-index: 50000;
}

ul#portfolio-filter{
    list-style-type: none;
    background-color: #f38808;
    height: 230px;
    margin: 0;
    padding-left: 0;
}

#portfolio-filter li{
    list-style: none;
    margin-left: 20px;
    display: block;
    padding-bottom: 13px;
}

#portfolio-filter li.first{
    padding-top: 30px;
}

#portfolio-filter li a, #portfolio-list li a {
    font:13px/1.4 "Museo Sans 500",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fafafa;
    text-decoration:none;
}


h2.storytitle a{
    padding: 10px;
    display: block;
}


#portfolio-filter li a:hover{
    text-decoration: none;
    color: #3b3b3b;
}

#portfolio-filter li a.current, #portfolio-list li a.current{
    color: #3b3b3b;
}


/* Portfolio Slider Navigation */

ul#portfolio-list{ 
    padding: 0 0 0 10px;
    list-style: none;
    margin: 0;
}

ul#portfolio-list li{
    float: left;
    position: relative;}


/* BASIS STYLES  */

h3.storytitle a{
    color: #fff;
    opacity: 1;
    padding: 10px;
   ...

JavaScript

jQuery(function($) { 

    // Start the smoothdivscroller plugin
    // credit: http://www.smoothdivscroll.com/
    $("#makeMeScrollable").smoothDivScroll({
        autoScroll: "onstart",      //hack to get the visible hotspots to work
        autoScrollStep: 0,          //hack to get the visible hotspots to work
        visibleHotSpots: "always"    //hack to get the visible hotspots to work
    });

    // Start Sliding Boxes & Captions
    // credit: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
    // Animate the thumbcaption on click 
    var thumbslide = $('.boxgrid.captionfull').click(function() {
           $('.boxgrid.captionfull.clicked').removeClass('clicked').children('.cover').stop().animate({top: 230, opacity: 0.7}, 350);
           $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
    });

    // Fix the animation hover
    $('.boxgrid.captionfull:not(.clicked)').live('mouseenter', function() {
        $(this).children('.cover').stop().animate({top: 130}, 350);
        }).live('mouseleave', function() {
        $(this).children('.cover').stop().animate({top: 230}, 350);
    });

    // Start the filter for the slider-items
    // credit: http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours
    $('#portfolio-list').filterable({
        allTag: 'alle',
        useHash: 'true'
    });


});