Gallerific

HTML

<!DOCTYPE html>
<html>
<head>	
	<title>Tim Godwin Photography | Photo Gallery</title>

	<meta charset="utf-8">
 
        
    <link rel="stylesheet" type="text/css" href="http://tgp2.1.timgodwinphotography.co.uk/template/css/kube.css" />
	<link rel="stylesheet" type="text/css" href="http://tgp2.1.timgodwinphotography.co.uk/template/css/style.css" />
	<link rel="stylesheet" type="text/css" href="http://tgp2.1.timgodwinphotography.co.uk/css/style.css" />		
	
    <!-- gallery styles -->
	<link rel="stylesheet" href="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/gallerific/css/galleriffic-2.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/shadowbox/shadowbox.css">
	<link rel="stylesheet" type="text/css" href="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/iealert/iealert/style.css">
	
    <!-- gallery scripts -->  
	<script type="text/javascript" src="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/jquery/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/gallerific/jquery.galleriffic.js"></script>
	<script type="text/javascript" src="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/gallerific/jquery.opacityrollover.js"></script>
	<script type="text/javascript" src="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/set_thumbs/transify.js"></script>
    
    <!-- new script to be implemented on click of link in div with class download (view large) -->
	<script type="text/javascript" src="http://tgp2.1.timgodwinphotography.co.uk/cms/plugins/shadowbox/shadowbox.js"></script>

</head>
        
<body>

	<div class="wrapper group">

<!-- // main \\ -->
<div id="main">

	<div class="row">
		<div id="container" class="">
			<div id="albumName"></div>

			<!-- Start Advanced Gallery Html Containers -->
			<div id="gallery" class="content third">
				<div id="controls" class="controls third"></div>
				<div...

CSS

/* loaded in head */

JavaScript

jQuery(document).ready(function($) {
	alert("ggg");		
      $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157632535707369&nsid=37003559@N03&lang=en-us&format=json&jsoncallback=?", function(data){
						$.each(data.items, function(i,item){
							var newthumb = $("ul.thumbs").children("li:first").clone();
                            alert("newthumb:"+newthumb);
							var baseimg = item.media.m;
							
							var thumbimg = baseimg.replace("_m.jpg", "_s.jpg");
							$(newthumb).find("img").attr("src", thumbimg);
							
							var disimg = baseimg.replace("_m.jpg", ".jpg");
							$(newthumb).find(".thumb").attr("href", disimg);
							
							var lgeimg = baseimg.replace("_m.jpg", "_b.jpg");
							$(newthumb).find(".download").children("a").attr("href", lgeimg);
							
							var title = item.title;
							var description = item.description;
														
							var desc = $("<div />").append(description);
							if ($(desc).children().size() == 3) {
								description = $(desc).children("p:last").html();
							} else {
								description = "";
							}
							
							$(newthumb).find(".image-title").empty().html(title);
							$(newthumb).find(".image-desc").empty().html(description);
							$(newthumb).find(".image-auth").empty().html(item.author);							

							
							$("ul.thumbs").append(newthumb);
						});	
						
						$("ul.thumbs").children("li:first").remove();
						
						// Initially set opacity on thumbs and add
						// additional styling for hover effect on thumbs
						var onMouseOutOpacity = 0.67;
						$('#thumbs ul.thumbs li').opacityrollover({
							mouseOutOpacity:   onMouseOutOpacity,
							mouseOverOpacity:  1.0,
							fadeSpeed:         'fast',
							exemptionSelector: '.selected'
						});
						
						// Initialize Advanced Galleriffic Gallery
						var gallery = $('#thumbs').galleriffic({
							delay:                     2500,
							numThumbs:                 12,
							preloadAhead:             ...