PW Jquery Flickr Gallery - Blowsie

by blowsie

HTML

<script src="http://www.patrickwolf.com/hq/wp-content/themes/patrickwolf/js/jflickrfeed.min.js"></script>
<script src="http://www.patrickwolf.com/hq/wp-content/themes/patrickwolf/js/jquery.cycle.all.min.js"></script>
<a href="http://www.patrickwolf.com/hq/wp-content/themes/patrickwolf/js/jflickrfeed.min.js">http://www.patrickwolf.com/hq/wp-content/themes/patrickwolf/js/jflickrfeed.min.js</a>


<div id="cycle">
</div>

CSS

#cycle, #cycle li { width:490px; height: 400px;}
#cycle img  { max-width:490px; max-height: 400px;}
#cycle li {position:relative}
#cycle li div {background:#000; color:#fff; position:absolute; top:100px; z-index:}

JavaScript

jQuery('#cycle').jflickrfeed({
    limit: 14,
    qstrings: {
        id: '56692470@N07'
    },
    itemTemplate: '<li><img src="{{image}}" alt="" /><div>{{title}}</div></li>'
}, function(data) {
    jQuery('#cycle div').hide();
    jQuery('#cycle').cycle({
        timeout: 5000
    });
    jQuery('#cycle li').hover(function(){
        jQuery(this).children('div').show();
    },function(){
        jQuery(this).children('div').hide();
    });
});