custom events

by ryantroyford

HTML

<ul>
    <li><img src="http://placekitten.com/150/150"><a href="#">Zoom</a></li>
    <li><img src="http://placekitten.com/150/150"><a href="#">Zoom</a></li>
    <li><img src="http://placekitten.com/150/150"><a href="#">Zoom</a></li>
    <li><img src="http://placekitten.com/150/150"><a href="#">Zoom</a></li>
    <li><img src="http://placekitten.com/150/150"><a href="#">Zoom</a></li>
</ul>

CSS

img {
    height: 150px;
    width: 150px;
    -webkit-transition: all 0.2s;
}

.big {
    height: 250px;
    width: 250px;    
}

JavaScript

$( 'ul' ).delegate( 'a', 'click', function( event ) {
    
    var $target = $( event.currentTarget),
        $image = $target.prev( 'img' );
    
    $image.trigger( 'zoom' );
    
    event.preventDefault();
    
});

$( 'img' ).eq( 1 ).bind( 'click', function( event ) {
    $( this ).trigger( 'zoom' );
});

$( 'img' ).bind( 'zoom', function( event ) {
    
    $( this ).toggleClass( 'big' );

});