var USER = "tugglera"; // Picasa (Google) username
var ALBUM_ID = "5843091308169193281"; // Picasa albumID (album privacy must be set to "Public on the Web")
var IMGMAX = 640; // Max width of album image
var THUMBSIZE = "72c"; // Max width of thumbnails; the "c" option crops the thumbnails
// to a 72px square which makes the thumbs area look nicer
// album URL generated from variables above; using jsonp content type because it's cross-domain
var ALBUM_URL = "http://picasaweb.google.com/data/feed/api/user/" + USER + "/albumid/" + ALBUM_ID + "?v=2&alt=json-in-script&callback=?&imgmax=" + IMGMAX + "&thumbsize=" + THUMBSIZE;
// on document ready, call loadPhotos()
$(function () { loadPhotos(); });
function loadPhotos() {
$.getJSON(ALBUM_URL, function (albumJSON) { // get the Picasa feed
for (var i = 0; i < albumJSON.feed.entry.length; i++) { // loop over photo entries
var tEntry = albumJSON.feed.entry[i];
// full image properties
var iURL = tEntry.media$group.media$content[0].url;
var iWidth = tEntry.media$group.media$content[0].width;
var iHeight = tEntry.media$group.media$content[0].height;
var iDesc = tEntry.media$group.media$description.$t;
// thumbnail properties
var tURL = tEntry.media$group.media$thumbnail[0].url;
var tWidth = tEntry.media$group.media$thumbnail[0].width;
var tHeight = tEntry.media$group.media$thumbnail[0].height;
// add images to the album
var img = $("<img src='" + iURL + "' idx='" + i + "' width='" + iWidth + "' height='" + iHeight + "' style='display: none' onclick='setImg(this,"+((i < albumJSON.feed.entry.length-1) ? (i+1) : 0)+");' />");
// add description text if it exists
if (iDesc) {
img.after("<div class='album-photo-desc' idx='" + i + "' style='display: none'><div class='mask'></div><div class='text'>" + iDesc + "</div></div>");
}
$("#album div.image-container").append(img);
// add thumbnail
var thumb = $("<div class='album-thumb-window' style='width:" + tWidth + "px; height:" + tHeight + "px;' idx='" + i + "'><img src='" + tURL + "' idx='" + i + "' width='" + tWidth + "' height='" + tHeight + "' onclick='setImg(this,"+i+");' /></div>");
$("#album div.thumb-container").append(thumb);
}
initGallery();
});
}
function initGallery() {
// count images in each gallery and set attribute (used by prev/next functions)
$("div.album-container").each(function() {
$(this).attr("totalImages",$(this).find("div.album-image img[idx]").length);
});
// display the first image in each gallery by triggering setImg() on the first thumbnail
$("div.album-thumbs").each(function () {
setImg($(this).find("img:first"), 0);
});
// hover events for prev/next arrows
$("div.album-go").mouseenter(function () {
$(this).find("div.album-go-arrow").animate({
"opacity": 1
}, {
"duration": 500,
"queue": false
});
}).mouseleave(function () {
$(this).find("div.album-go-arrow").animate({
"opacity": 0
}, {
"duration": 500,
"queue": false
});
});
}
function setImg(obj, idx) {
var cdiv = $(obj).closest("div.album-container");
var idiv = cdiv.find("div.album-image");
// hide all gallery images
cdiv.find("div.album-image img[idx]:visible, div.album-image div.album-photo-desc:visible").fadeOut(500);
// find target image
var img = cdiv.find("div.album-image img[idx=" + idx + "]");
img.css({
"width": "",
"height": ""
});
// calculate width/height using parent box (idiv) constraints
var w = img.width();
var h = img.height();
if (h > idiv.height()) {
h = idiv.height();
w = w * (1 - (img.height() - idiv.height()) / img.height());
}
if (w > idiv.width()) {
w = idiv.width();
h = h * (1 - (img.width() - idiv.width()) / img.width());
}
// set dimensions, vertically and horizontally center the image, then fade it in
img.height(h).width(w).css("left", ((idiv.width() - w) / 2) + "px").css("top", ((idiv.height() - h) / 2) + "px").fadeIn(500);
// if the image has description text, size it, center it, and fade it in
cdiv.find("div.album-image div.album-photo-desc[idx=" + idx + "]").width(w).css("left", ((idiv.width() - w) / 2) + "px").css("bottom", ((idiv.height() - h) / 2) + "px").fadeIn(500);
// set current image index (used by prev/next functions)
cdiv.attr("currentImage", idx);
// "dim" all thumbnails
cdiv.find("div.album-thumb-window").animate({
"opacity": "0.67"
}, {
"duration": 500,
"queue": false
});
// "fade in" current thumbnail
cdiv.find("div.album-thumb-window[idx=" + idx + "]").animate({
"opacity": "1"
}, {
"duration": 500,
"queue": false
});
}
function prev(obj) {
// get the current index and subtract 1
var cdiv = $(obj).closest("div.album-container");
var idx = parseInt(cdiv.attr("currentImage")) - 1;
// if it's less than 0, loop around to the end
if(idx < 0) idx = parseInt(cdiv.attr("totalImages")) - 1;
setImg(obj, idx);
}
function next(obj) {
// get the current index and add 1
var cdiv = $(obj).closest("div.album-container");
var idx = parseInt(cdiv.attr("currentImage")) + 1;
var ttl = parseInt(cdiv.attr("totalImages"));
// if it's out of range, loop back to the beginning
if(idx >= ttl) idx = 0;
setImg(obj, idx);
}
<div id="album" class="album-container">
<div class="album-image">
<div class="image-container"></div>
<div class="album-go prev" onclick="prev(this);">
<div class="album-go-arrow">
<img src="http://racheltugglewhorton.com/images/left-arrow.png" />
</div>
</div>
<div class="album-go next" onclick="next(this);">
<div class="album-go-arrow">
<img src="http://racheltugglewhorton.com/images/right-arrow.png" />
</div>
</div>
</div>
<div class="album-thumbs" style="display: block">
<div class="thumb-container"></div>
<div class="clearfix" style="margin:0;padding:0;height:0;clear:both"></div>
</div>
</div>
div.album-container {
text-align: center;
width: 100%;
}
div.album-image {
position: relative;
height: 500px;
}
div.album-image img {
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
div.album-go.prev {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
cursor: pointer;
z-index: 10;
}
div.album-go.next {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
cursor: pointer;
z-index: 10;
}
div.album-go-arrow {
position: absolute;
top: 40%;
color: white;
font-size: 5em;
font-family: sans-serif;
opacity: 0;
}
div.album-go.prev div.album-go-arrow {
left: 0;
}
div.album-go.next div.album-go-arrow {
right: 30px;
}
div.album-photo-desc {
position: absolute;
bottom: 0;
height: 15%;
z-index: 10;
}
div.album-photo-desc div.mask {
position: absolute;
top: 0;
left: 0;
background: black;
opacity: 0.5;
height: 100%;
width: 100%;
}
div.album-photo-desc div.text {
position: absolute;
top: 0;
left: 0;
color: white;
text-align: left;
font-size: 0.9em;
padding: 3px 20px;
}
div.album-thumbs {
padding: 13px 0 0 0;
display: none;
}
div.album-thumb-window {
float: left;
overflow: hidden;
border: 1px solid #555;
margin: 3px;
}
div.album-thumbs img {
cursor: pointer;
}