JavaScript - Gallery Not Displaying Correctly

Dear Friends,
I have a javascript image gallery in my website..
it is working Good..
But now i have some problem...
i have to get the Loaded image url.
i need users to post comments about that image.
So i have to get the URL or name of image.
This is needed in a text input field...
So please see the code of gallery and help me..
The code is below..
Or Check it here http://www.home-palettes.com/gallery.html

Code:

//add thickbox to href elements that have a class of .thickbox
function TB_init(){
	$("a.thickbox").click(function(){
	var t = this.title || this.name || null;
	var g = this.rel || false;
	TB_show(t,this.href,g);
	this.blur();
	return false;
	});
	$("a.thickbox").css({display:"inline"});
}

function TB_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
	
	var images_location = 'extensions/thickbox_2'

	try {
		if (document.getElementById("TB_HideSelect") == null) {
		$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
		$("#TB_overlay").click(TB_remove);
		}
		
		if(caption==null){caption=""};
		
		$(window).scroll(TB_position);
 		
		TB_overlaySize();
		
		$("body").append("<div id='TB_load'><img src='"+images_location+"/loadingAnimation.gif' /></div>");
		TB_load_position();
		
		
		
	   if(url.indexOf("?")!==-1){ //If there is a query string involved
			var baseURL = url.substr(0, url.indexOf("?"));
	   }else{ 
	   		var baseURL = url;
	   }
	   var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
	   var urlType = baseURL.toLowerCase().match(urlString);
		
		if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
				
			TB_PrevCaption = "";
			TB_PrevURL = "";
			TB_PrevHTML = "";
			TB_NextCaption = "";
			TB_NextURL = "";
			TB_NextHTML = "";
			TB_imageCount = "";
			TB_FoundURL = false;
			if(imageGroup){
				TB_TempArray = $("a[@rel="+imageGroup+"]").get();
				for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML == "")); TB_Counter++) {
					var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
						if (!(TB_TempArray[TB_Counter].href == url)) {						
							if (TB_FoundURL) {
								TB_NextCaption = TB_TempArray[TB_Counter].title;
								TB_NextURL = TB_TempArray[TB_Counter].href;
								TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";
							} else {
								TB_PrevCaption = TB_TempArray[TB_Counter].title;
								TB_PrevURL = TB_TempArray[TB_Counter].href;
								TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";
							}
						} else {
							TB_FoundURL = true;
							TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);											
						}
				}
			}

			imgPreloader = new Image();
			imgPreloader.onload = function(){		
			imgPreloader.onload = null;
				
			// Resizing large images - orginal by Christian Montoya edited by me.
			var pagesize = TB_getPageSize();
			var x = pagesize[0] - 150;
			var y = pagesize[1] - 150;
			var imageWidth = imgPreloader.width;
			var imageHeight = imgPreloader.height;
			if (imageWidth > x) {
				imageHeight = imageHeight * (x / imageWidth); 
				imageWidth = x; 
				if (imageHeight > y) { 
					imageWidth = imageWidth * (y / imageHeight); 
					imageHeight = y; 
				}
			} else if (imageHeight > y) { 
				imageWidth = imageWidth * (y / imageHeight); 
				imageHeight = y; 
				if (imageWidth > x) { 
					imageHeight = imageHeight * (x / imageWidth); 
					imageWidth = x;
				}
			}
			// End Resizing
			
			TB_WIDTH = imageWidth + 30;
			TB_HEIGHT = imageHeight + 60;
			$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div>"); 		
			
			$("#TB_closeWindowButton").click(TB_remove);
			
			if (!(TB_PrevHTML == "")) {
				function goPrev(){
					if($(document).unclick(goPrev)){$(document).unclick(goPrev)};
					$("#TB_window").remove();
					$("body").append("<div id='TB_window'></div>");
					TB_show(TB_PrevCaption, TB_PrevURL, imageGroup);
					return false;	
				}
				$("#TB_prev").click(goPrev);
			}
			
			if (!(TB_NextHTML == "")) {		
				function goNext(){
					$("#TB_window").remove();
					$("body").append("<div id='TB_window'></div>");
					TB_show(TB_NextCaption, TB_NextURL, imageGroup);				
					return false;	
				}
				$("#TB_next").click(goNext);
				
			}
			/*
			document.onkeydown = function(e){ 	
				if (e == null) { // ie
					keycode = event.keyCode;
				} else { // mozilla
					keycode = e.which;
				}
				if(keycode == 27){ // close
					TB_remove();
				} else if(keycode == 190){ // display previous image
					if(!(TB_NextHTML == "")){
					document.onkeydown = "";
					goNext();
					}
				} else if(keycode == 188){ // display next image
					if(!(TB_PrevHTML == "")){
					document.onkeydown = "";
					goPrev();
					}
				}	
			} */
				
			TB_position();
			$("#TB_load").remove();
			$("#TB_ImageOff").click(TB_remove);
			$("#TB_window").css({display:"block"}); //for safari using css instead of show
			}
	  
			imgPreloader.src = url;
		}else{//code to show html pages
			
			var queryString = url.replace(/^[^\?]+\??/,'');
			var params = TB_parseQuery( queryString );
			
			TB_WIDTH = (params['width']*1) + 30;
			TB_HEIGHT = (params['height']*1) + 40;
			ajaxContentW = TB_WIDTH - 30;
			ajaxContentH = TB_HEIGHT - 45;
			
			if(url.indexOf('TB_iframe') != -1){				
					urlNoQuery = url.split('TB_');		
					$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' onload='TB_showIframe()'> </iframe>");
				}else{
					$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
			}
					
			$("#TB_closeWindowButton").click(TB_remove);
			
				if(url.indexOf('TB_inline') != -1){	
					$("#TB_ajaxContent").html($('#' + params['inlineId']).html());
					TB_position();
					$("#TB_load").remove();
					$("#TB_window").css({display:"block"}); 
				}else if(url.indexOf('TB_iframe') != -1){
					TB_position();
					if(frames['TB_iframeContent'] == undefined){//be nice to safari
						$("#TB_load").remove();
						$("#TB_window").css({display:"block"});
						$(document).keyup( function(e){ var key = e.keyCode; if(key == 27){TB_remove()} });
					}
				}else{
					$("#TB_ajaxContent").load(url, function(){
						TB_position();
						$("#TB_load").remove();
						$("#TB_window").css({display:"block"}); 
					});
				}
			
		}
		
		$(window).resize(TB_position);
		
		document.onkeyup = function(e){ 	
			if (e == null) { // ie
				keycode = event.keyCode;
			} else { // mozilla
				keycode = e.which;
			}
			if(keycode == 27){ // close
				TB_remove();
			}	
		}
		
	} catch(e) {
		alert( e );
	}
}

//helper functions below

function TB_showIframe(){
	$("#TB_load").remove();
	$("#TB_window").css({display:"block"});
}

function TB_remove() {
	$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
	$("#TB_load").remove();
	return false;
}

function TB_position() {
	var pagesize = TB_getPageSize();	
	var arrayPageScroll = TB_getPageScrollTop();	
	$("#TB_window").css({width:TB_WIDTH+"px",left: (arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2)+"px", top: (arrayPageScroll[1] + (pagesize[1]-TB_HEIGHT)/2)+"px" });
}

function TB_overlaySize(){
	if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {	
		yScroll = window.innerHeight + window.scrollMaxY;
		xScroll = window.innerWidth + window.scrollMaxX;
		var deff = document.documentElement;
		var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
		var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
		xScroll -= (window.innerWidth - wff);
		yScroll -= (window.innerHeight - hff);
	} else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
		yScroll = document.body.scrollHeight;
		xScroll = document.body.scrollWidth;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		yScroll = document.body.offsetHeight;
		xScroll = document.body.offsetWidth;
  	}
	$("#TB_overlay").css({"height":yScroll +"px", "width":xScroll +"px"});
	$("#TB_HideSelect").css({"height":yScroll +"px","width":xScroll +"px"});
}

function TB_load_position() {
	var pagesize = TB_getPageSize();
	var arrayPageScroll = TB_getPageScrollTop();
	$("#TB_load")
	.css({left: (arrayPageScroll[0] + (pagesize[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
	.css({display:"block"});
}

function TB_parseQuery ( query ) {
   var Params = new Object ();
   if ( ! query ) return Params; // return empty object
   var Pairs = query.split(/[;&]/);
   for ( var i = 0; i < Pairs.length; i++ ) {
      var KeyVal = Pairs[i].split('=');
      if ( ! KeyVal || KeyVal.length != 2 ) continue;
      var key = unescape( KeyVal[0] );
      var val = unescape( KeyVal[1] );
      val = val.replace(/\+/g, ' ');
      Params[key] = val;
   }
   return Params;
}

function TB_getPageScrollTop(){
	var yScrolltop;
	var xScrollleft;
	if (self.pageYOffset || self.pageXOffset) {
		yScrolltop = self.pageYOffset;
		xScrollleft = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){	 // Explorer 6 Strict
		yScrolltop = document.documentElement.scrollTop;
		xScrollleft = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScrolltop = document.body.scrollTop;
		xScrollleft = document.body.scrollLeft;
	}
	arrayPageScroll = new Array(xScrollleft,yScrolltop) 
	return arrayPageScroll;
}

function TB_getPageSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
	arrayPageSize = new Array(w,h) 
	return arrayPageSize;
}

Does anyone know of a good webscript slideshow on a loop that I can use in a website ?

www.chagfordshow.com We don’t want a database at the moment. Needs to work in all browsers.
What I’m looking for :-

Change the image every few seconds.
Slip into any element of the webpage.

All images will be the same size. Some landscape, some portrait.

Looking for this to work all in client’s scripting. or maybe AJAX




Thanks. Most grateful if anyone can help

Hey all,

I'm designing a website and i'm doing a section on a portfolio of artwork. wat i would like is to group the work under different headings and for each group to have a thumbnail of an image. when that image is clicked a window is opened which displays all the works in that group as thumbnails as well as an image gallery (larger image of the current image and being able to click on the other thumbnails to view a larger image of it).

hope that makes sense.
I've been searching all over for scripts bit nothing fits my criteria exactly. going a bit crazy over this, any help or direction much appreciated.

peace

Does anyone have a solution? The first image works fine, but obviously when the image is changed by the second function it will not work????

Code:

<script type="text/javascript">
jQuery(document).ready(function(){
 
  $("a#single_image").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});

});

</script>
</head>

<body>
<div class="hidden">
	<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var large = $(this).attr("title");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<a href="' + large + '" id="single_image"><img src="' + image + '"/></a>');
return false;
    });
});
	</script>

I've tried hosting my WIP website to see how it works. Everything goes well except for the following:
On my Portfolio page:
[Portfolio]

I have coded a "gallery" in jquery.
When the page starts loading it seems that the browser loads the ` Code:

#portfolioSlider

` div which is supposed to be display:none until triggered. It contains lots of images resulting in massive load time until the thumbnails ( `#Portfolio` ) starts loading.

How can I make the ` Code:

#portfolioSlider

` images start loading only after it opens?

Thanks in advance!

Plz i want to make a photo gallery of many images... i want it to be enlarged with an effect..


i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page ..

can anyone send for me a new photo gallery effect?

Hi guys. I wanted to show you a gallery that I am doing. I'm stuck here with some issue. I've made the gallery with the buttons but now I wanted to add a previous and next button but I not being able to do. all the rest is working.

the javascript code is this:

Code:

$(function () {
var imgContainers = $('div.tabs > div');
imgContainers.hide().filter(':first').show();
			
$('div.tabs ul.number_nav a').click(function () {
imgContainers.hide();
imgContainers.filter(this.hash).show();
$('div.tabs ul.number_nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});

the html file is this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>gallery</title>

<!--CSS-->

<link href="style.css" rel="stylesheet" type="text/css" />

<!--JavaScript-->
<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript" src="code.js"></script>

</head>
<body>
<div id="gallery"><!--IMG CONTAINER START -->
<div class="tabs">

<div id="image_01">
<div class="image">
<img src="image_one.png" width="795" height="395" />
</div>
</div>

<div id="image_02" >
<div class="image">
<img src="image_two.png" width="795" height="395" />
</div>
</div>

<div id="image_03">
<div class="image">
<img src="and_so_on.png" width="795" height="395" />
</div>
</div>


<ul class="number_nav">
<li><a href="#image_01">01</a></li>
<li><a href="#image_02">02</a></li>
<li><a href="#image_03">03</a></li>
</ul>

<ul class="prev_next_nav">
<li><a href="#">Previous</a></li> 
/ <li><a href="#">Next</a></li>
</ul>
</div>
</div>


</body>

</html>

here is the zip file:
http://www.sendspace.com/file/we3lkd

can someone help me to make the code to the previous / next code please? I'm not very good ( nothing at all ) with javascript...

Hi

I want to create an image gallery which has one main image (large size) with a series of smaller thumbnail images below.

When you click on one of the smaller images below, I need it to load it into the space above.

This series of images will be selected by a PHP script and a MySQL database.

The ratios of the images will not always be the same, so the boundry box will need to change width and height accordingly. This will change the height of the page too I guess.

Now, the real fly in the ointment is that I really would like the main image to have a drop shadow (gradient based) on all 4 sides of the image.

So, good people of the JS Sub-Forum - whats the best way to get this done?!

Cheers

The Moose

I was trying to help someone on another forum and seem to have run into a brick wall.

The main problem that has got me stumped at the moment is that clicking on the images in the 1st tab work fine.
However the subsequent tab selections and clicks do not change the "bigImage" correctly (not at all).
Perhaps some other more experienced forum members can identify what I doing wrong at this time.

I believe it is in my set-up of the onclick events in the "onload=" section, but I not the best at this event stuff yet!
Code:

  var sel, tmp, elem;
  var j=0;
  for (var i=0; i<imgGroupArray.length; ++i) {
    sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
    while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
  }

Here is the full code that 'almost' works:
Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Tab Gallery </title>

<style type="text/css">
li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
.imgBlock { display:none; }
</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=250787

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgGroupArray = [
    ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
    ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
    ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
    ['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
    ['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'],
    ['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg']  // NOTE: No comma after last entry
];

function tabGroup(which) {
  var sel = document.getElementById('imgGroup').getElementsByTagName('div');
  for (var i=0; i<sel.length; ++i) {
    sel[i].style.display = 'none';
  }
  var tmp = 'imgGroup'+which;  // alert(tmp);
  document.getElementById(tmp).style.display = 'block';
}

function setBigImage(info) {    // alert(info);
  document.getElementById('bigImage').src = info;
}
window.onload = function() {
  var img;
  for (var i=0; i<imgGroupArray.length; ++i) {
    for (var j=0; j<imgGroupArray[i].length; ++j) {
      img = document.createElement('img');
      img.setAttribute('src', baseURL+imgGroupArray[i][j]);
      img.setAttribute('height','100px');
      img.setAttribute('width','75px');
      document.getElementById('imgGroup'+i).appendChild(img);
    }
  }

// Following modified from:
// http://www.codingforums.com/showthread.php?t=102896&highlight=addevent+onclick
  var sel, tmp, elem;
  var j=0;
  for (var i=0; i<imgGroupArray.length; ++i) {
    sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
    while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
  }

  tabGroup(0);
}

</script>

</head>
<body>
<div id="tabMenu">
 <div style="float:left">
  <li onclick="tabGroup(0)">Tab 1</li>
  <li onclick="tabGroup(1)">Tab 2</li>
  <li onclick="tabGroup(2)">Tab 3</li>
  <li onclick="tabGroup(3)">Tab 4</li>
  <li onclick="tabGroup(4)">Tab 5</li>
  <li onclick="tabGroup(5)">Tab 6</li>
 </div><br>
 <div id="imgGroup"
  style="width:300px; height:300px; border:1px solid red; float:left">
  <div id="imgGroup0" class="imgBlock"></div>
  <div id="imgGroup1" class="imgBlock"></div>
  <div id="imgGroup2" class="imgBlock"></div>
  <div id="imgGroup3" class="imgBlock"></div>
  <div id="imgGroup4" class="imgBlock"></div>
  <div id="imgGroup5" class="imgBlock"></div>
 </div>
 <div id="bigImageDiv"
  style="width:250px; height:300px; border:1px solid red; float:left;">
   <img id="bigImage" src="" alt="bigImage here!">
 </div>
 <br style="clear:both">
</div>
</body>
</html>

sorted.

I'm designing my site at the moment and want to include some photos (500 x 331 pixs). I want to have the images load within the same space without the page reloading like flickr.

I think it's done using AJAX Javascript or something similar but have been unable to find any tutorials which deal specifically with this although I'm sure there are many (links would be greatfully received). I want to be able to navigate through them with arrows, or a row of numbers or something simlar and straight forward.

simlar to these:
http://www.itsnicethat.com/articles/3011-things
http://www.timgeorgedesign.co.uk/jump_print.html (this is flash I think)

I'm using Dreamweaver, and have been working mainly in the design and split views so don't know too much about coding, but I was hoping to find prehaps a few lines of script that I might be able to paste in and edit to make this, as the rest of the page is all done or a decent pre made gallery plug-in.

Thanks for any help.

I need help finding a script where you have a main picture and then below that will be thumbnails and when you click on them they are shown where the main picture is.

Thank you

Hello Everyone, Sir i used setTimeout() function in my image gallery to scroll images , i used setTimeout("myfunction()",1) in my script.

Now my image gallery is working properly but problem is that the speed of scrolling images if normal in firefox, but in internet explorer it is slow, and in google chrome it is very fast , Sir how to resolve this problem

This is my javascript code :

Code:

<html>
<head><title> My Gallery </title>

<style type="text/css">

#mainimagecontainer {

position:relative;
width:600px;
height:400px;
border-width:1px;
border-color:#cccccc #aaaaaa #aaaaaa #cccccc;
border-style:solid;
padding:5px;

}

#imagebuttoncont {

width:100%;
position:relative;
border-bottom:1px solid #cccccc;
text-align:center;
height:40px;

}

#buttontable .td {

padding:3px;
position:relative;

}

#buttontable .td a {

text-decoration:none;
font-size:14px;
color:gray;
font-family:verdana;

}


#imagecontainer {


position:relative;
width:575px;
height:350px;
overflow:hidden;
background-color:#efefef;
border-width:1px;
border-color:#cccccc #aaaaaa #aaaaaa #cccccc;
border-style:solid;


}

#imgs {

height:350px;
position:relative;
left:0px;
top:0px;

}


</style>

<script type="text/javascript">

var previous1=0;
var next1=0;
var value=575;
var imgcounter=1;
var flag=1;

function next()
{

  var element = document.getElementById("imgs");


  if(next1 >value && flag==1)
  {

     value = next1+575;
     imgcounter=imgcounter+1;

     if(imgcounter==5)
     {
        previous();
     }
     return;
 
  }

  next1 = next1+25;

  element.style.left = "-"+next1+"px";

  setTimeout("next()",1);

}

function previous()
{

  var element = document.getElementById("imgs");

  if(next1 <= 0)
  {

     next1=0;
     value=575;
     imgcounter=1;
     return;
  }

  next1 = next1-25;

  element.style.left = "-"+next1+"px";

  setTimeout("previous()",1);

}


</script>



</head>

<body >


 <div id="mainimagecontainer" >

  <div id="imagebuttoncont">  

    <table id="buttontable" align="center">
    <tr>
    <td class="td"> <div id="link2"> <a href="#" onclick="next()" > next </a> </div></td>
    </tr>
    </table>
 
  </div>

  <center>

  <div id="imagecontainer"> 

   <div id="imgs">
   <table id="imagegall" >
   <tr>
   <td width="590px" height="350px" > <img src="img1.jpg" height="350px" width="590px" > </td>
   <td width="590px" height="350px" > <img src="img2.jpg" height="350px" width="590px" > </td>
   <td width="590px" height="350px" > <img src="img3.jpg" height="350px" width="590px" > </td>
   <td width="590px" height="350px" > <img src="img4.jpg" height="350px" width="590px" > </td>
   </tr>
   </table>
   <div id="imgs">

  </div>

  </center>
 </div>



</body>
</html>

Please some one help me , please add four photos to see image gallery