Simple Photo Gallery from img in li

18 Sep

To make a image gallery capable of having a light-box and can move around photos with arrow keys.
I’ll add next and prev buttons in next post.

My html code


	<div id="popopen_wrap">

		<div id="img_holder_bg" >

		</div>

			<div id="img_holder"><img src="" id="maximised" width='600' height='400'></div>

	</div>

	<div id="ribbon_wrap">

		<div id='ribbon'>

			<ul id='list'>

				<li><img id="thumbnail" class="first" src="cal.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="china.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="egypt.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="pyramid.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="rio.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="some.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="taj.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" class="last" src="taj_m.jpg" width='150' height='150' ></li>

				</ul>

				</div>

				</div>

As you can see I’ve put the images in a ul list.
I’ll show you how to do that dynamically with php in later posts.
And there are some wrap divs I’ve used for positioning.
popopen_wrap is the parent div which is displayed with opacity in bg when we click on thumbnail images.
img_holder_bg is div used for backgournd opacity.

Now here is my css file

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

#ribbon ul li{

float: left;

}

#ribbon_wrap{

position: absolute;

width: 100%;

top: 55%;

}

#ribbon{

width: 1000px;

margin: 0 auto;

overflow: hidden;

height: 150px;

}

#popopen_wrap{

width:  100%;

height: 100%;

position: absolute;

display: none;

z-index: 3000;

}

#img_holder_bg{

opacity: 0.7;

background: black;

width:  100%;

height: 100%;

position: absolute;

z-index: 3005;

}

#img_holder_wrap{

height: 600px;

position: absolute;

width: 100%;

}

#img_holder{

position: fixed;

top: 50%;

left: 50%;

margin-left: -300px;

margin-top: -200px;

z-index: 3010;

border: 10px solid white;

}

We are using the fixed sized output images.
The later posts will explain how to auto position when size of the photos changes.

My javascript code

 $(document).ready(function() {
	 $("#img_holder_bg").click(function(){
	   $("#popopen_wrap").hide();
   });
   $("img#thumbnail").click(function(){
	   $("#popopen_wrap").show();
	   $("img#maximised").attr("src",$(this).attr("src"));
	   $(this).addClass("selected");
	   $(document).keydown(function(event){
		   if(event.keyCode==27){
			   $("#popopen_wrap").hide();
			   }
			else if(event.keyCode==39){
				$("img#maximised").attr("src",function(){
					if($(".selected").hasClass('last')){
						$(".selected").removeClass("selected");
						$(".first").addClass("selected");
						return $(".first").attr("src");}
					else {
						$nxt=$(".selected");
						$(".selected").removeClass("selected");
						$nxt.parent().next().children("img#thumbnail").addClass("selected");
						return $(".selected").attr("src");}
					});
				}
			else if(event.keyCode==37){
				$("img#maximised").attr("src",function(){
					if($(".selected").hasClass('first')){
						$(".selected").removeClass("selected");
						$(".last").addClass("selected");
						return $(".last").attr("src");}
					else {
						$prev=$(".selected");
						$(".selected").removeClass("selected");
						$prev.parent().prev().children("img#thumbnail").addClass("selected");
						return $(".selected").attr("src");}
					});
				}

	});
});
});

In fact this javascript code is not entirely mine, one of my friend have written the basic key storke movement using array in pure javascript.
I’ve ported that into jquery and added dynamic checking of what to display next.

Hope you liked it! I’ll update with better

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: