Flickr Photobar Gallery

After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. The […]

After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. The aim was to build a bottom photobar that one can easily integrate into a website. It is hidden initially and slides up when the handle is clicked. First, the photo sets are shown and when one of them is chosen, all its images can be viewed as thumbnails. When a thumbnail is clicked, a full image view appears as an overlay.

For our demo we used the awesome photostream by tibchris.

To get familiar with the Flickr API, you can find some information on the Flickr Services website.

So, let’s begin!

The Markup

The HTML consists of one main wrapper for the whole photobar. Inside of that we will have the div for the full image view and the div for the photobar with the album thumbnail wrapper and the images thumbnail wrapper. Besides that, we will also have our visible handle and a div for the overlay:

<!-- main wrapper: flickr_photobar -->
<div class="flickr_photobar">		

	<!-- overlay for the full image view -->
	<div id="flickr_overlay" class="overlay" style="display:none;"></div>

	<!-- full image view -->
	<div id="flickr_photopreview" class="photopreview" style="display:none;">
		<div class="preview_wrapper">
			<div class="preview">
				<div class="loading"></div>
				<div id="preview_close" class="close"></div>
				<span id="large_phototitle"></span>
				<!-- here we will insert the image-->
				<a href="#" class="img_next"></a>
				<a href="#" class="img_prev"></a>
			</div>
		</div>
	</div>

	<!-- the bottom photobar -->
	<div id="photobar" class="photobar">	

		<!-- the thumbnail view of the albums/sets -->
		<div class="thumbs albums" id="sets">
			<a href="#" class="prev"></a>
			<div class="thumbsWrapper">
				<ul></ul>
			</div>
			<a href="#" class="next"></a>
		</div>

		<!-- the thumbnail view of the images of a set -->
		<div class="thumbs images" id="images" style="bottom:-125px;">
			<a href="#" class="prev"></a>
			<div class="thumbsWrapper">
				<ul></ul>
			</div>
			<a href="#" class="next"></a>
			<!-- the right handle for the info-->
			<span class="images_toggle">
				Set:
				<span id="setName"></span>
				<a id="images_toggle">Back to Sets</a>
			</span>
		</div>

		<!-- the left handle for the main photobar -->
		<a id="flickr_toggle" class="toggle">
			Flickr Photostream
			<span style="visibility:hidden;" class="loading_small"></span>
		</a>
	</div>

</div>

As you can see, a lot of elements will be hidden in the beginning. In the JavaScript function we will control the visibility and appearance of these elements.
Let’s have a look at the styling.

The CSS

Since we want this gallery to work as an integrated part of any website, we will give most of the elements a fixed position. That means, we will add them on top of everything else in the website. If you come across some problems concerning other items on you website that are on top of this gallery, you might want to adjust the z-indexes.

Ok, so let’s define some general styles first:

.flickr_photobar{
	font-family:Arial,Helvetica,sans-serif;
	text-transform:uppercase;
	font-size:11px;
}
.flickr_photobar a{
	outline:none;
}
.flickr_photobar a:hover{
	outline:none;
}

Since we will be abusing a lot of link elements for other purposes than links (OK, don’t beat me up now, I’ll try to get rid of that habit), we want to remove the outline, so that the ugly dotted line does not appear in Firefox.

The photobar div will have the following style:

.photobar{
	position:fixed;
	bottom:-96px;
	left:0px;
	width:100%;
	height:95px;
}

We will hide the photobar by setting it’s bottom to a negative value. The toggle (or handle) will still be visible because we will pull it up by setting it’s top value to a negative value. We will look into that class later.

The thumbs class will be applied to both, the div of the album (or set) thumbnails and the div of the image thumbnails belonging to the respective sets:

.thumbs{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:95px;
	border-top:1px solid #222;
	background-color:#3D3D3D;
}

The styling of the previous and next arrows will be as follows:

.thumbs a.prev,
.thumbs a.next{
	width:20px;
	height:83px;
	position:absolute;
	top:4px;
	margin:0px;
	z-index:10;
	border:1px solid #222;
	-moz-box-shadow:0px 0px 1px #777 inset;
	-webkit-box-shadow:0px 0px 1px #777 inset;
	box-shadow:0px 0px 1px #777 inset;
}
.thumbs a.prev:hover,
.thumbs a.next:hover{
	background-color:#404040;
}
.thumbs a.prev{
	left:0px;
	background:#333 url(../prev.png) no-repeat center center;
}
.thumbs a.next{
	right:0px;
	background:#333 url(../next.png) no-repeat center center;
}

With the inset property in the box shadow, we can create a nice effect: if you have a dark background and add a light inset box shadow, the element will look slightly embossed.

The wrapper for the thumbs is going to have the following style:

.thumbs .thumbsWrapper{
	height:95px;
	left:22px;
	right:22px;
	overflow:hidden;
	position:absolute;
	top:0;
}

The unordered list for the thumbnails will be positioned absolutely and we will hide any overflow. It’s width is going to be calculated dynamically and it depends on the amount of thumbnails.

.thumbs ul{
	list-style:none;
	margin:0px;
	padding:0px;
	height:90px;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
}
.thumbs ul li a{
	position:relative;
	float:left;
	margin:6px 2px 0px 2px;
	color:#fff;
	text-shadow:1px 1px 1px #000;
	text-decoration:none;
	height:81px;
	width:81px;
}

We will give the albums/sets thumbnails a dark border and the images thumbnails a light border:

.albums ul li a img{
	border:3px solid #111111;
	-moz-box-shadow:1px 1px 3px #000;
	-webkit-box-shadow:1px 1px 3px #000;
	box-shadow:1px 1px 3px #000;
}
.images ul li a img{
	border:3px solid #f9f9f9;
	-moz-box-shadow:1px 1px 3px #000;
	-webkit-box-shadow:1px 1px 3px #000;
	box-shadow:1px 1px 3px #000;
}

The description for each set or image is going to appear on top of each thumbnail. We will make it slightly transparent and not allow the text to overflow. While in webkit browsers we can use text-overflow:ellipsis (which cuts off too long words and adds two dots) we need to set overflow:hidden for the other browsers:

.thumbs a span{
	position:absolute;
	bottom:3px;
	left:3px;
	right:3px;
	background-color:#333;
	font-size:9px;
	padding:2px 2px;
	border-top:1px solid #111;
    display:none;
	text-align:center;
	overflow:hidden;
	text-overflow:ellipsis;
	max-height:70px;
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

This is how we actually show the description span – when we hover over the image link:

.thumbs a:hover span{
	display:block;
}

The handle for the images that appears on the right side and the main handle for the photobar will have the following style:

span.images_toggle{
	position:absolute;
	top:-26px;
	right:20px;
	background-color:#3D3D3D;
	border:1px solid #222;
	color:#EEEEEE;
	font-size:10px;
	padding:0px 6px 0px 12px;
	height:24px;
	line-height:24px;
	text-transform:uppercase;
	text-shadow:1px 1px 2px #000;
	-moz-box-shadow:0px -1px 3px #ccc;
	-webkit-box-shadow:0px -1px 3px #ccc;
	box-shadow:0px -1px 3px #ccc;
	-moz-border-radius:5px 5px 0px 0px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
span.images_toggle a{
	background-color:#222;
	border:1px solid #000;
	cursor:pointer;
	line-height:16px;
	padding:0px 5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
span.images_toggle a:hover{
	background-color:#000;
}
.photobar a.toggle{
	position:absolute;
	top:-26px;
	left:20px;
	background-color:#3D3D3D;
	border:1px solid #222;
	color:#EEEEEE;
	font-size:10px;
	padding:0px 36px 0px 36px;
	line-height:24px;
	height:24px;
	text-transform:uppercase;
	text-shadow:1px 1px 2px #000;
	-moz-box-shadow:0px -1px 3px #ccc;
	-webkit-box-shadow:0px -1px 3px #ccc;
	box-shadow:0px -1px 3px #ccc;
	-moz-border-radius:5px 5px 0px 0px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	cursor:pointer;
}
span.loading_small{
	background:transparent url(../loading_small.gif) no-repeat center center;
	position:absolute;
	right:10px;
	top:0px;
	width:16px;
	height:24px;
}
.photobar a.toggle:hover{
	background-color:#111;
}

The images thumbnails container needs to have a higher z-index than the one of the sets:

.photobar .images{
	z-index:20;
}

The overlay that appears when we show one full image is going to have the following style:

.flickr_photobar .overlay{
	z-index:90;
	background-color:#000;
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	opacity:0.9;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

We make the position fixed so that when the user scrolls the page, it always stays in the visible area of the page:

.photopreview{
	text-align:center;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:91;
}

The following wrappers for the full image view will need the following styling because we want the image to be centered vertically and horizontally:

.photopreview .preview_wrapper{
	position:relative;
	text-align:center;
	margin:0 auto;
}
.photopreview .preview{
	display:table-cell;
	text-align:center;
	width:0px;
	height:0px;
	padding-top:25px;
	vertical-align:middle;
}
.photopreview .preview img{
	vertical-align:middle;
	background-color:#555;
	padding:1px;
	border:8px solid #f9f9f9;
	-moz-box-shadow:1px 1px 5px #222;
	-webkit-box-shadow:1px 1px 5px #222;
	box-shadow:1px 1px 5px #222;
}

The description for the image is going to be put into a span that is fixed at the top of the page:

.photopreview .preview span{
	background-color: #111111;
	color:#FFFFFF;
	height:20px;
	left:0;
	line-height:20px;
	position:fixed;
	text-align:center;
	text-shadow:1px 1px 1px #000000;
	top:0;
	width:100%;
	-moz-box-shadow:1px 1px 5px #000000;
	-webkit-box-shadow:1px 1px 5px #000000;
	box-shadow:1px 1px 5px #000000;
}

The little loading div that appears when an image is loaded is going to have the following style:

.loading{
	width:50px;
	height:50px;
	position:fixed;
	top:50%;
	left:50%;
	z-index:95;
	margin:-25px 0px 0px -25px;
	-moz-border-radius:10px;
	-webkit-border-radius:20px;
	border-radius:10px;
	background:#000 url(../loading.gif) no-repeat center center;
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

We will add a close element at the top right corner that allows the user to close the image preview:

.close{
	background:#000 url(../close.png) no-repeat center center;
	cursor:pointer;
	height:20px;
	position:fixed;
	right:-11px;
	top:0;
	width:90px;
	z-index:1000;
	cursor:pointer;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

The next and previous controls will be styled as follows:

.photopreview a.img_next,
.photopreview a.img_prev{
	position:fixed;
	top:50%;
	height:60px;
	width:50px;
	margin-top:-30px;
	background-color:#000;
	background-repeat:no-repeat;
	background-position:center center;
}
.photopreview a.img_next{
	background-image:url(../next.png);
	-moz-border-radius:20px 0px 0px 20px;
	-webkit-border-top-left-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
	right:0px;
}
.photopreview a.img_prev{
	background-image:url(../prev.png);
	-moz-border-radius:0px 20px 20px 0px;
	-webkit-border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	left:0px;
}

And that’s all the style!
Let’s add some JavaScript magic!

The JavaScript

For our script we will be using the jQuery viewport script.
In the following we will show some important snippets of our script since it is a very large script. You can view the whole commented script when you download the ZIP file.

Let’s start at the beginning of the script where we need to define some variables:

var api_key 	= [your API Key];
var user_id  	= [your Flickr user ID];
/*
use:
Square,Thumbnail,Small,Medium or Original for
the large image size you want to load!
*/
var large_image_size 	= 'Medium';

/*
the current Set id / the current Photo id
*/
var photo_set_id,photo_id;
/*
the current position of the image being viewed
*/
var current	= -1;
var continueNavigation = false;

/*
flickr API Call to get List of Sets
*/
var sets_service 		= 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getList' + '&api_key=' + api_key;
var sets_url			= sets_service + '&user_id=' + user_id + '&format=json&jsoncallback=?';

/*
flickr API Call to get List of Photos from a Set
*/
var photos_service 		= 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos' + '&api_key=' + api_key;

/*
flickr API Call to get List of Sizes of a Photo
*/
var large_photo_service = 'http://api.flickr.com/services/rest/?&method=flickr.photos.getSizes' + '&api_key=' + api_key;

/*
elements caching...
*/
var $setsContainer 		= $('#sets').find('ul');
var $photosContainer 	= $('#images').find('ul');
var $photopreview		= $('#flickr_photopreview');
var $flickrOverlay		= $('#flickr_overlay');
var $loadingStatus		= $('#flickr_toggle').find('.loading_small');

var ul_width,spacefit,fit;

Our first step is to load all the sets of the respective user. The following code we will do that:

/* start: open Flickr Photostream */
$('#flickr_toggle').toggle(function(){
	$('#photobar').stop().animate({'bottom':'0px'},200,function(){
		if($setsContainer.is(':empty')){
			/*
			if sets not loaded, load them
			*/
			LoadSets();
		}
	});
},function(){
	/*
	minimize the main bar, and minimize the photos bar.
	next time we maximize, the view will be on the sets
	*/
	$('#photobar').stop().animate({'bottom':'-96px'},200,function(){
		$('#images').css('bottom','-125px');
	});
});

/*
Loads the User Photo Sets
*/
function LoadSets(){
	$loadingStatus.css('visibility','visible');

	$.getJSON(sets_url,function(data){
		if(data.stat != 'fail') {
			var sets_count = data.photosets.photoset.length;
			/*
			adapt ul width based on number of results
			*/
			ul_width = sets_count * 85 + 85;
			$setsContainer.css('width',ul_width + 'px');

			for(var i = 0; i < sets_count; ++i){
				var photoset		= data.photosets.photoset[i];
				var primary 		= photoset.primary;
				var secret			= photoset.secret;
				var server			= photoset.server;
				var farm			= photoset.farm;
				/*
				source for the small thumbnail
				*/
				var photoUrl		= 'http://farm'+farm+'.static.flickr.com/'+server+'/'+primary+'_'+secret+'_s.jpg';
				var $elem 			= $('<li />');
				var $link 			= $('<a class="toLoad" href="#" />');
				/*
				save the info of the set in the li element,
				we will use it later
				*/
				$link.data({
					'primary'	:primary,
					'secret'	:secret,
					'server'	:server,
					'farm'		:farm,
					'photoUrl'	:photoUrl,
					'setName'	:photoset.title._content,
					'id'		:photoset.id
				});

				$setsContainer.append($elem.append($link));
				$link.bind('click',function(e){
					var $this = $(this);
					/*
					save the current Set id in the photo_set_id variable
					and load the photos of that Set
					*/
					$('#images').stop().animate({'bottom':'0px'},200);
					if(photo_set_id!=$this.data('id')){
						photo_set_id = $this.data('id');
						$('#setName').html($this.data('setName'));
						LoadPhotos();
					}
					e.preventDefault();
				});
			}
			/*
			now we load the images
			(the ones in the viewport)
			*/
			LoadSetsImages();
		}
	});
}

/*
loads the images of the sets that are in the viewport
*/
function LoadSetsImages(){
	var toLoad 			= $('.toLoad:in-viewport').size();
	if(toLoad > 0)
		$loadingStatus.css('visibility','visible');
	var images_loaded 	= 0;
	$('.toLoad:in-viewport').each(function(i){
		var $space			= $setsContainer.find('.toLoad:first');
		var $img 			= $('<img style="display:none;" />').load(function(){
			++images_loaded;
			if(images_loaded == toLoad){
				$loadingStatus.css('visibility','hidden');
				$setsContainer.find('img').fadeIn();
			}
		}).attr('src',$space.data('photoUrl')).attr('alt',$space.data('id'));
		var $set_name		= $('<span />',{'html':$space.data('setName')});
		$space.append($set_name).append($img).removeClass('toLoad');
	});
}

The next functions are for loading the photos of a specific set that is clicked:

/*
Loads the Set's Photos
*/
function LoadPhotos(){
	$photosContainer.empty();
	$loadingStatus.css('visibility','visible');
	var photos_url	= photos_service + '&photoset_id=' + photo_set_id + '&media=photos&format=json&jsoncallback=?';

	$.getJSON(photos_url,function(data){
		if(data.stat != 'fail') {
			var photo_count = data.photoset.photo.length;
			/*
			adapt ul width based on number of results
			*/
			var photo_count_total = photo_count + $photosContainer.children('li').length;
			ul_width = photo_count_total * 85 + 85;
			$photosContainer.css('width',ul_width + 'px');

			for(var i = 0; i < photo_count; ++i){
				var photo			= data.photoset.photo[i];
				var photoid			= photo.id;

				var secret			= photo.secret;
				var server			= photo.server;
				var farm			= photo.farm;

				var photoUrl		= 'http://farm'+farm+'.static.flickr.com/'+server+'/'+photoid+'_'+secret+'_s.jpg';

				var $elem 			= $('<li />');
				var $link 			= $('<a class="toLoad" href="#" />');

				$link.data({
					'photoid'		:photoid,
					'secret'		:secret,
					'server'		:server,
					'farm'			:farm,
					'photoUrl'		:photoUrl,
					'photo_title'	:photo.title
				});
				$photosContainer.append($elem.append($link));

				$link.bind('click',function(e){
					var $this	= $(this);
					current		= $this.parent().index();
					photo_id 	= $this.data('photoid');
					LoadLargePhoto();
					e.preventDefault();
				});
			}
			LoadPhotosImages();
		}

	});
}

/*
loads the images of the set's
photos that are in the viewport
*/
function LoadPhotosImages(){
	var toLoad 			= $('.toLoad:in-viewport').size();
	if(toLoad > 0)
		$loadingStatus.css('visibility','visible');
	var images_loaded 	= 0;

	$('.toLoad:in-viewport').each(function(i){
		var $space			= $photosContainer.find('.toLoad:first');
		var $img 			= $('<img style="display:none;" />').load(function(){
			++images_loaded;
			if(images_loaded == toLoad){
				$loadingStatus.css('visibility','hidden');
				$photosContainer.find('img').fadeIn();
				/*
				if we were navigating through the large images set:
				*/
				if(continueNavigation){
					continueNavigation 	= false;
					var $thumb 			= $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img');
					photo_id 			= $thumb.attr('alt');
					LoadLargePhoto();
				}
			}
		}).attr('src',$space.data('photoUrl'))
		  .attr('alt',$space.data('photoid'));

		var $photo_title	= $('<span/>',{'html':$space.data('photo_title')});
		$space.append($photo_title).append($img).removeClass('toLoad');
	});
}

Now we need a function that loads the full image:

/*
loads the main image
*/
function LoadLargePhoto(){
	removeLargeImage();

	var $theThumb 	= $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img');
	var photo_title = $theThumb.parent().data('photo_title');

	var $loading	= $photopreview.find('.loading');
	$loading.show();
	$photopreview.show();
	$flickrOverlay.show();
	$('#preview_close').show();

	var large_photo_url = large_photo_service + '&photo_id=' + photo_id + '&format=json&jsoncallback=?';
	$.getJSON(large_photo_url,function(data){
		if(data.stat != 'fail') {
			var count_sizes 		= data.sizes.size.length;
			var largest_photo_src;
			for(var i = 0; i < count_sizes; ++i){
				if(data.sizes.size[i].label == large_image_size)
					largest_photo_src 	= data.sizes.size[i].source;
			}
			$('<img />').load(function(){
				var $this = $(this);
				/*
				resize the image to fit in the browser's window
				*/
				resize($this);

				$loading.hide();
				/*just to make sure there's no image:*/
				removeLargeImage();
				$photopreview.find('.preview').append($this);
				$('#large_phototitle').empty().html(photo_title);
			}).attr('src',largest_photo_src);
		}
	});
}

The next functions and events (that we will not discuss in more detail here) control the basic navigation through the thumbnails and the preview images. We also add a resize function that adapts the size of the image to the current viewport. Check out the script in the ZIP file where you can see the comments.

And that’s it! I hope you enjoyed this tutorial and find it useful!

Message from TestkingLearn how to create flickr photobar gallery with our testking CISA course. Download the testking 642-262 tutorials and testking 642-661 guides to learn JQuery and other web application is simple and easy way.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 75

Comments are closed.
  1. This is amazing! I’m going to try to combine this look with the PHP gallery mary posted last month. Thank you mary!

  2. @KEN
    This gallery uses the Flickr API to pull photo sets from a user’s photostream.

    You need a flickr API key and the username for this to work. You can apply for a Flicker application key.

    !!! This means that code/script only works with Flickr

    @Mary Lou
    Great work! Thank you!

  3. Hi, my flickr username is rodrigo3n but if I fill the user_id variable with this I can’t get my photos loaded. I can only get photos loaded with an another person’s id like lalalalla@N00. Is there a solution?

  4. Hello Rodrigo, the user id is not the same as the username. You can get your id from the site idgettr.com. Just put your photostream address and it will output your id. I hope it helped! Cheers, ML

  5. From the article I take it all I need is my flickr username and my filckr Key, not even my “Secret”, yet I can get your demo to work on my development system, but when I swap in my flickr credentials I cant get it to work. Did I misunderstand?

  6. Nice theme behind your post…. i like both theme and post….

  7. Hello Mary! This is really awesome! It would be more awesome if I can choose to pull the photos from my web directory instead of Flickr.

    None Flickr version would be an added advantage.

    Thank you for sharing.

  8. awesome, this is the best flickr gallery. but i’ve only tried it for google’s blogger and it worked except for its large image navigation (next-prev). i’m sure it’ll work fine on other platforms but is there any solution for blogger based pages?
    and btw can i edit the css?

  9. oh pardon, the photobar is ok, it was just stupid me 🙂 everything works on blogger too, thanks.

  10. How do we get many user id grouped and publish together here? Right now i can find only a solution for a specific user ID..

  11. Has anyone had any success with adding this to a WordPress Blog?

    So far the tab loads, pulls up the bar and everything loads except for my Flickr sets/photos. I know I have my ID/API combination correct as they work when added to the files downloaded from this site.

    Any ideas what I’m missing?

  12. Wow! best gallery i saw so far! very very nice!! I tried to impelment it to a horizontal scrolling full image website. looks lovely! Does anybody know how i can call a specific set? I don’t want that the user can chose between the sets. I only want to load one specific set. I tried to change the Script but my knowledge isnt so far yet. 😉

    keep up the good work on this site!! excellent tutorials!
    Thanks
    chris

  13. Hi Mary-Lou, is there any fix for the thumbnails issue in Internet Explorer?

    (the thumbnails don’t align horizontally, they seem to line up in a ‘step’ effect)

  14. Hello!

    Is there a way to connect not one but two (or more) flickr accounts to this gallery?

    Thank you 🙂
    Best wishes,

  15. Hi again Mary Lou I managed to get the IE7 issue fixed. All you need is to add a line in the CSS:

    .thumbs ul li{
    display:inline;
    }
    This now displays great in IE7 (IE6 not tested)

  16. Found another IE7 bug……….

    for some reason the last thumbnail of each set will not display in the photbar, however you can clikc on the empty box to display the photo preview

  17. Hi,

    This script is really amazing ! Great Job !

    I would like to automatically load the Photostream but I can’t make it to work :S

    I changed the CSS to have the photobar visible but I still need to click to make the sets loaded, can anyone help ?

  18. Yet another bug fix. Opera 10.6 this time.

    For some reason when I have a footer placed on the bottom of my page positioned absolutely, Opera will place the photobar behind the footer.

    Fix is:

    .flickr_photobar{
    font-family:Arial,Helvetica,sans-serif;
    text-transform:uppercase;
    font-size:11px;
    position: relative;
    z-index: 99999;
    }

    (adjust z-index accordingly)

  19. Have a look at this page. in IE7, the gallery is showing the grey boxes in stacks (photobar). on top of each other, please help.

  20. Is there a way to link to a specific set and have it display all of the photos in the set? I have several sports pages where I would like to include a gallery of that sport only. Any thoughts?

  21. I have now managed to get this past W3C Markup vlidation by adding within the and by changing

    var $setsContainer = $(‘#sets’).find(‘ul’);
    var $photosContainer = $(‘#images’).find(‘ul’);

    to

    var $setsContainer = $(‘#sets’).find(‘li’);
    var $photosContainer = $(‘#images’).find(‘li’);

    Enjoy 🙂

  22. semms I cant add html here, I meant ……..Markup validation by adding list items within the unordered lists and…….

  23. Mary Lou, is it possible to have the images in a set display right away when the “Flickr Photostream” tab is clicked? I would like to remove the option to select a specific set and have it display the set I choose to display. Any thoughts on that?

    Here is how I’m using it.

    http://thisisnebraska.com/test/football.php

    Incredible idea and script, by the way. Thank you for sharing.

  24. Anybody there? Any help would be appreciated. I’m willing to pay someone to customize it. Let me know. I only have a week left on this project.

  25. O wow this is super thanks Mary; by the way question for alexey i’m stuck at problem you mentioned and i see you have figure it out , would you care to collaborate it would help me a lot,many thanks

  26. managed to implement this super script on my blogger and have made small tutorial to implement this on blogger

  27. Wondering if is possible to show directly all the images in the account without the set view..
    Thanks!

  28. Does anyone know how to make the Flickr feed load as soon as the page load instead of having to Click on the Flickr Photo stream Button?

    Any help would be grateful!

    Ernest-

  29. Can anyone tell me who is the creator of this Flickr Photo Bar? I know I saw it on a another site just cant seem to find it.

    Thanks!

  30. Does anybody know of a way to reverse the order of show/hide ? I would like to make the photobar initially visibile, then it can be hidden by clicking the show/hide button.

  31. Hi … I am having a few problems with the thumbnails.. sometimes they just dont appear. for sets and some inside. yet the descriptions there an when I click on it , it will load the picture..

  32. Mary Lou,
    is it possible to make horizontal slider without Flickr photostream with same way? I don’t want to use Flickr in my project, I would use our icons instead of photos. How can we do that? Could you please give me a suggestion to accomplish this approach?

  33. I would also like to know how to make the Flickr feed load as soon as the page load instead of having to Click on the Flickr Photo stream Button

  34. For those interested, I found an interesting assumption that I had to change for my implementation.

    The standard implementation assumes you want to use the entire width of the window for the photo bar. However for mine, I wanted to put the photo bar into another container so it would fit nicely into a section of the page.

    What I found was even though I had changed the #photobar css variables so it would fit properly, the scrolling of sets and photos was not working properly for me. I stepped through the code and found that the scrolling function assumed you were using the entire width of the window and not just the width of the photo bar, so I had a few sets that I could not scroll to because the window was wide enough that the code thought it was all fitting in view.

    Long story short, if you wanted to do what I did and have the photo bar fit into a smaller container than the entire page, you need to make some minor changes –

    ~line 393 (just search for where variable spacefit is being set):
    Instead of –
    spacefit = $(window).width()-44;
    I changed it to –
    spacefit = $(‘#photobar’).width() – 44;

    Same change applies to ~line 424

    And also change the if statement at ~line 397 to evaluate against #photobar.width instead of window.width.

    Those changes, plus some changes to the style.css file for #photobar will allow you to use the photobar in containers smaller than the entire page.

    And note to the author of this sweet gallery code – I mean no disrespect, but it is probably more robust to use the width of photobar instead of the window since it will take into account any margin or other styling changes without assuming anything about the window size. Basing it upon the photobar size should guarantee that the scroll behavior will always work regardless of how the photobar is implemented.

    Thanks for making this gallery, it was a huge time saver, and good luck to everyone having fun with their own implementations!