Flickr style photo gallery demo in jQuery

Description:

This tutorial I’ll explain a simple step-by-step way to implement an Flickr style photo gallery demo in Jquery and CSS.
The result is something like this:

Demo Flicker Photogallery

Demo | Download source code

Script Code

Step 1: Insert the below into the <HEAD> section of your page: (Select to copy)
 <mce:script mce_src=”lib/prototype.js” type=”text/javascript”></mce:script> <mce:script mce_src=”lib/effects.js” type=”text/javascript”></mce:script> <mce:script mce_src=”lib/carousel.js” type=”text/javascript”></mce:script> <link href=”prototype-ui.css” mce_href=”prototype-ui.css” rel=”stylesheet” type=”text/css” /> <mce:style type=”text/css”><!– body{font-family:Arial, Helvetica, sans-serif; font-size:12px;} –></mce:style><style type=”text/css” mce_bogus=”1″><!– body{font-family:Arial, Helvetica, sans-serif; font-size:12px;} –></style>

The above references an jquery.js file. Download (by right clicking, and selecting “Save As”),

and upload to your webpage directory. Within the above code

CSS Code:

Step 2: Insert the below into the <HEAD> section of your page: (Select to copy)
/* Horizontal Carousel http://www.csscody.com */ #horizontal_carousel { width: 250px; height: 100px; padding:10px; background:#f6f6f6; border:solid 1px #e9e9e9; } #horizontal_carousel .container { width: 260px; overflow: hidden; } #horizontal_carousel ul { margin: 0; padding:0; width: 100000px; position: relative; top: 0; left: -10px; height: 90px; } #horizontal_carousel ul li { width: 90px; height: 90px; text-align: center; list-style:none; float:left; } #horizontal_carousel .buttons{ display:block; clear:both; } #horizontal_carousel .previous_button { float:left; width: 23px; height: 7px; background: url(img/but_prev.png) no-repeat; z-index: 100; cursor: pointer; } #horizontal_carousel .previous_button_over { background: url(img/but_prev_hover.png) no-repeat;} #horizontal_carousel .previous_button_disabled { background: url(img/but_prev_dis.png) no-repeat; cursor: default; } #horizontal_carousel .next_button { float:right; width: 23px; height: 7px; background: url(img/but_next.png) no-repeat; z-index: 100; cursor: pointer; } #horizontal_carousel .next_button_over { background: url(img/but_next_hover.png) no-repeat; } #horizontal_carousel .next_button_disabled { background: url(img/but_next_dis.png) no-repeat; cursor: default; }

HTML Code:

Step 3: Insert the below into the <BODY> section of your page: (Select to copy)
 <mce:script type=”text/javascript”><!– function runTest() { hCarousel = new UI.Carousel(“horizontal_carousel”); } Event.observe(window, “load”, runTest); // –></mce:script> <div id=”horizontal_carousel”> <div class=”container”> <ul> <li><img alt=”Picture 1″ src=”img/img_1.jpg” mce_src=”img/img_1.jpg” /></li> <li><img alt=”Picture 2″ src=”img/img_2.jpg” mce_src=”img/img_2.jpg” /></li> <li><img alt=”Picture 3″ src=”img/img_3.jpg” mce_src=”img/img_3.jpg” /></li> <li><img alt=”Picture 4″ src=”img/img_4.jpg” mce_src=”img/img_4.jpg” /></li> <li><img alt=”Picture 5″ src=”img/img_5.jpg” mce_src=”img/img_5.jpg” /></li> <li><img alt=”Picture 6″ src=”img/img_6.jpg” mce_src=”img/img_6.jpg” /></li> <li><img alt=”Picture 7″ src=”img/img_7.jpg” mce_src=”img/img_7.jpg” /></li> <li><img alt=”Picture 8″ src=”img/img_8.jpg” mce_src=”img/img_8.jpg” /></li> <li><img alt=”Picture 9″ src=”img/img_9.jpg” mce_src=”img/img_9.jpg” /></li> <li><img alt=”Picture 10″ src=”img/img_10.jpg” mce_src=”img/img_10.jpg” /></li> </ul></div> <div class=”buttons”> <div class=”previous_button”></div> <div class=”next_button”></div> </div> </div> See More Jquery examples: <a href=”http://www.csscody.com/demo” mce_href=”http://www.csscody.com/demo”>www.csscody.com </a>

Got a question or need help customizing this Jquery code? Post it in the help me. If you have a comment or suggestion instead, post it in the comments section below.

Tags: flickr photo gallery, Flickr style photo gallery, Images CSS, jquery flickr gallery

This entry was posted on Thursday, February 12th, 2009 at 6:44 pm and is filed under Jquery Examples. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback.

{ 15 comments to read ... please submit one more! }