SO - 14928513

by Arun P Johny

HTML

<script src="http://www.twospy.com/galleriffic/js/jquery.galleriffic.js"></script>
<div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div class="slideshow-container">
        <div id="loading" class="loader"></div>
        <div id="caption"></div>
        <div id="slideshow" class="slideshow"></div>
    </div>
</div>



<div id="thumbs" class="navigation">
	<ul class="thumbs noscript">
		<li>
            <a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">Title #0</a>
            <div class="caption">nops 1 <a href="#1">click</a></div>
        </li>
		<li>
            <a class="thumb" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">Title #1</a>
            <div class="caption">nops 2 <a href="#2">click</a></div>
        </li>
		<li><a class="thumb" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">Title #2</a></li>
		<li><a class="thumb" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">Title #3</a></li>
		<li><a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">Title #4</a></li>
		<li><a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">Title #5</a></li>
		<li><a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">Title #6</a></li>
		<li><a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">Title #7</a></li>
		<li><a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">Title #8</a></li>
		<li><a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">Title #9</a></li>
		<li><a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">Title...

JavaScript

$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');


$('#thumbs').galleriffic({
					imageContainerSel:      '#slideshow',
					controlsContainerSel:   '#controls',
    captionContainerSel:    '#caption'
				});

$('#caption').on('click', 'a', function(){
    alert($(this).attr('href'))
});