Josh Ebbers | Web Designer & Photographer">j

Hi, I am Josh, I make websites and take pictures of things.

 

Filterable photo gallery using jquery and Flickr API based on tags

Posted on February 19, 2013 by jebbers under Design, Photography Leave a comment

Last week I posted a new photo gallery I created with jQuery that allows you to filter the images. I refined that gallery to pull my photos from Flickr instead of coding in all the images (which was a big pain and took a lot of time). View the gallery here.

Here is a little on how I did it.

First I put all the images I wanted to use in a new Set in Flickr and made sure all the images had the appropriate tags. Using the Flickr API, I grabbed that set.

$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key='
+ apiKey + '&photoset_id=THE_ID_OF_YOUR_SET&format=json
&jsoncallback=?',
function(data){

Then I grabbed all the tags from the photos.

.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
function(data){

if(data.photo.tags.tag != '') {

var tagsArr = new Array();

$.each(data.photo.tags.tag, function(j, item){

tagsArr.push('' + item._content + ' ' + item.raw + '');

});

var tags = tagsArr.join(' ');
}

Then added them as classes in my Figure tag.

var imgCont = '</pre>
<figure class="entry ' + tags + '"><a class="fancybox" href="' + photolargeURL + '"><img alt="" src="' + photoURL + '" /></a>';

It gets kind of messy bringing in all the tags from Flickr, but I can live with it if I don’t have to put all the images in one by one.

<figure class="entry canon7d Canon 7D fallGooseberry Falls
Long Exposure mn MN minnesota North Shore statepark State
Park Tamron AF 17-50mm F/2.8 SP XR Di II VC trees Two
Harbors rocks rocks waterfallisotope-item"
style="position: absolute; left: 0px; top: 0px;
-webkit-transform: translate3d(0px, 0px, 0px);">
<a class="fancybox" href="http://farm9.static.flickr.com/
8169/8042021171_8ea5051540_b.jpg"><img src="http://farm9.
static.flickr.com/8169/8042021171_8ea5051540.jpg" /></a></figure>

I got the idea for this gallery after looking at these two tutorials on Web Design Tuts and this one by Kyle Rush.


Filterable Photography Gallery – with jQuery

Posted on February 11, 2013 by jebbers under Design, Photography Leave a comment

jQuery filterable image gallery

I have updated this gallery to use the Flicr API, click here to see that post.

Here is a little gallery I set up using some cool jQuery and CSS3, it allows you to filter images with some cool CSS3 transitions.

Check out the page here

It was a pain linking to the photos from my Flickr feed so I think I will try and use the Flickr api to automatically grab the photos and filter on the tags brought in from Flickr.


December Desktop Wallpaper Calendar

Posted on December 3, 2012 by jebbers under Design, Photography, Wallpaper Leave a comment

December Desktop Wallpaper Calendar 1024x768

The snow is falling (or should be, in Minnesota we still don’t have any snow), Christmas music is playing everywhere you go, must mean one thing, it is December!

Download this month’s wallpaper calendar. Click on the sizes below to download your specific desktop size. If I don’t have the correct size of your desktop, let me know and I can create that size.

Original photo is here

1024×768 | 1280×800 | 1440×900 | 1920×1200


November Desktop Wallpaper Calendar

Posted on October 31, 2012 by jebbers under Design, Photography, Wallpaper Leave a comment

November Desktop Wallpaper

Your belly’s are full of candy, your teeth hurt and you can’t sit still, that can only mean one thing, you just ate all your kids candy and it’s November! When the suger high finally wears off it will be thanksgiving and you’ll go into a turkey induced coma.

Download this month’s wallpaper calendar before you are to hoped up on suger or sleeping because of the turkey. Click on the sizes below to download your specific desktop size. If I don’t have the correct size of your desktop, let me know and I can create that size.

This photo was taken at the Franconia Sculpture Park. Original photo is here

1024×768 | 1280×800 | 1440×900 | 1650×1050 | 1920×1200 | 1650×1440


October Desktop Wallpaper Calendar

Posted on September 26, 2012 by jebbers under Design, Photography, Wallpaper Leave a comment

October Desktop Wallpaper Calendar 1024x768

The temps are getting colder and that can only mean one thing, October is almost here so that means it is time for another desktop wallpaper calendar!

This month’s wallpaper features the skyway between the Travelers building in St. Paul. I really like this shot, the silhouette of the man walking and the cathedral in the background, it just turned out really cool.

Thanks to everyone who downloaded last months wallpaper.

Click on the links below to download.

I have made a few sizes, if you don’t see your desktop size leave me a comment and I will size one to fit your desktop.

1024×768 | 1280×800 | 1440×900 | 1650×1050 | 1920×1200

Enjoy, and check back towards the end of October for an all new November wallpaper.


September Desktop Wallpaper Calendar

Posted on August 24, 2012 by jebbers under Design, Photography, Wallpaper Leave a comment

September is almost here so that means it is time for another desktop wallpaper calendar! This month’s wallpaper features the the Jackson Street Roadhouse in St. Paul. Thanks to everyone who downloaded last months wallpaper.

Click on the links below to download.

I have made a few sizes, if you don’t see your desktop size leave me a comment and I will size one to fit your desktop.

1024×768 1024×1024 1280×800 1280×1024 1366×768 1440×900 1650×1050 1920×1200

Enjoy, and check back towards the end of September for an all new October wallpaper.