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
Script Code
Step 1: Insert the below into the <HEAD> section of your page: (Select to copy)
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 {
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)
See More Jquery examples: www.csscody.com
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










