Flickr style photo gallery demo in jQuery

Image CSS, Jquery Examples Add comments | 499 views |

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)
<br /> <script src="lib/prototype.js" type="text/javascript"></script><br /> <script src="lib/effects.js" type="text/javascript"></script><br /> <script src="lib/carousel.js" type="text/javascript"></script></p> <link href="prototype-ui.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body{font-family:Arial, Helvetica, sans-serif; font-size:12px;} </style> <p>

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 */</p> <p>#horizontal_carousel {<br /> width: 250px;<br /> height: 100px;<br /> padding:10px;<br /> background:#f6f6f6;<br /> border:solid 1px #e9e9e9;<br /> }</p> <p>#horizontal_carousel .container {<br /> width: 260px;<br /> overflow: hidden;<br /> }</p> <p>#horizontal_carousel ul {<br /> margin: 0;<br /> padding:0;<br /> width: 100000px;<br /> position: relative;<br /> top: 0;<br /> left: -10px;<br /> height: 90px;<br /> } </p> <p>#horizontal_carousel ul li {<br /> width: 90px;<br /> height: 90px;<br /> text-align: center;<br /> list-style:none;<br /> float:left;<br /> }</p> <p>#horizontal_carousel .buttons{<br /> display:block;<br /> clear:both;<br /> }<br /> #horizontal_carousel .previous_button {<br /> float:left;<br /> width: 23px;<br /> height: 7px;<br /> background: url(img/but_prev.png) no-repeat;<br /> z-index: 100;<br /> cursor: pointer;<br /> }</p> <p>#horizontal_carousel .previous_button_over {<br /> background: url(img/but_prev_hover.png) no-repeat;}</p> <p>#horizontal_carousel .previous_button_disabled {<br /> background: url(img/but_prev_dis.png) no-repeat;<br /> cursor: default;<br /> }</p> <p>#horizontal_carousel .next_button {<br /> float:right;<br /> width: 23px;<br /> height: 7px;<br /> background: url(img/but_next.png) no-repeat;<br /> z-index: 100;<br /> cursor: pointer;<br /> }</p> <p>#horizontal_carousel .next_button_over {<br /> background: url(img/but_next_hover.png) no-repeat;<br /> }</p> <p>#horizontal_carousel .next_button_disabled {<br /> background: url(img/but_next_dis.png) no-repeat;<br /> cursor: default;<br /> }<br />

HTML Code:

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

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.