JSFiddle - React, Tailwind, and code Playground

by andrewray

HTML

<link rel="stylesheet" href="view-source:http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5">
<script src="view-source:http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<html>
<head>
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="http://andrewray.me/stuff/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="http://andrewray.me/stuff/jquery.fancybox.css"/>
</head>
<body>
    <ul id="carousel">
        <li class="wrap">  
            <a rel="bannery-gallery" class="item fancybox.iframe" href="http://www.youtube.com/embed/7QWp_8yaahA">
                <img src="http://i4.ytimg.com/vi/7QWp_8yaahA/default.jpg">
            </a>
        </li>
        <li class="wrap"> 
            <a rel="bannery-gallery" class="item" href="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
                <img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
            </a>
        </li>
    </ul>
</body>

JavaScript

$(function() {
    $('#carousel li a').fancybox({
        nextClick: true,        
        overlayOpacity: 0.8,
        hideOnContentClick: true,
        nextEffect: 'none',
        prevEffect: 'none'
    }); 
});