JSFiddle - React, Tailwind, and code Playground

by Kato Richardson

HTML

<script src="https://raw.github.com/malsup/cycle/master/jquery.cycle.all.js"></script>
<ul>
    <li><a id='one' href='#'>one</a></li>
    <li><a id='two' href='#'>two</a></li>
    <li><a id='three' href='#'>three</a></li>
</ul>

<p><a id='start' href='#'>start slideshow</a> | 
   <a id='stop' href='#'>stop slideshow</a> </p> 

<div id="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>

<div id='log'></div>

CSS

.disabled {
   color: #eee;
}

.disabled:hover {
   cursor: wait;    
}

JavaScript

jQuery(function($) {
    
    $.fn.extend({
        delayClick: function(callback) {
            this.bind('click', function(e) {
                $self = $(this);
                if( $self.hasClass('disabled') ) {
                   $('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
                } 
                else {
                   $self.addClass('disabled');
                   callback.call(this, [arguments]);
                   setTimeout(function() {
                       $self.removeClass('disabled');
                   }, 1000);
                }
                return false; 
            });
        } 
    });
    
    $('#slideshow').cycle({fx: 'fade'}).cycle('pause');
   
    $('#start').delayClick(function() {
        $('#slideshow').cycle('resume');
    });
    
    $('#stop').delayClick(function() {
        $('#slideshow').cycle('pause');
    });
    
    $('#one').delayClick(function() {
        $('#log').append('<p>clicked one</p>');
    });
    
    $('#two').delayClick(function() {
        $('#log').append('<p>clicked two</p>');
    });
    
    $('#three').delayClick(function() {
        $('#log').append('<p>clicked there</p>');
    });
    
});