JavaScript - Javascript Image Gallery

i'm trying to get this effect
http://css-tricks.com/3458-perfect-f...kground-image/
except, instead of using an image, i would like to use a javascript image gallery. I was playing around with smoothgallery2.0 but I don't really care which I use as long as I'm just displaying images (no text) and there is a smooth fade effect (since the images are pretty high res). thanks so much in advance!

Hi,

I'm attempting to add the following functionality to my site.

Essentially, two images are displayed with a link "View More".

The user clicks "View More" and the two images are replaced by two new images. This can be repeated as required.

It's a basic form of slideshow I guess, but after some googling all the tutorials etc available seem to be more aimed at fully blown shows, whereas I believe my problem is much more simple.

The images are contained in a directory and are numbered like so: img1.jpg, img2.jpg. img3.jpg and so on.

the code I came up with so far is

PHP Code:
<script type="text/javascript" language="JavaScript">
start = '<img src="gallery/img';
end = '.jpg" width="150" height="200" />';

function getImage() {
var n = Math.ceil(Math.random() * 10); // i have 10 images
var FirstImg=(start+n+end);

var n = Math.ceil(Math.random() * 10); 
var SecondImg=(start+n+1+end);

}


/* so now I think I have two variables:
FirstImg = <img src="gallery/img1.jpg" width="150" height="200" />
SecondImg = <img src="gallery/img4.jpg" width="150" height="200" />

but i'm now unsure how i'd go about displaying this on the page. ideally the HTML generated would be:

<div class="pics">
<p><FirstImg></p>
<p><SecondImg></p>
<a href="#" onClick="return getImage()">View More</a>
</div>
*/
</script> 


Am I on the right lines here or am I way off?? Appreciate some pointers.

thanks a lot.

Hi,

I'm fairly new to javascript, I created a javascript image gallery using a tutorial found on web monkey.

Please see below:

Code:

<script language="JavaScript" type="text/javascript">
<!-- 
var interval = 1500; 
var random_display = 0;
var image_dir = "images/exhibition/"
var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-sealskinz.png");
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-orchard.png");
var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

//   -->
</script>

However unfortunately there are two issues, one is IE6 is coming up with javascript errors and IE7 gets an error when you click the previous button on the first image.

The buttons look like this:

Code:

<div id="left-arrow-container"><a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><img src="images/left-arrow.png" alt="left arrow" name="leftarrow" width="58" height="37" border="0" id="leftarrow" /></a></div>        
        <div id="see-the-whole-project"> see the whole project</div>
        <div id="right-arrow-container"><a href="#" onClick="rotateImage('rImage'); clearTimeout(timerID)"><img src="images/right-arrow.png" alt="right arrow" name="rightarrow" width="58" height="36" border="0" id="rightarrow" /></a></div>

Being new to javascript I don't know how to get round these issues so if anyone could advise me I would really appreciate it.

Thanks
Gary

Hello,

My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here.

When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here

Can anybody help me debug this?? I'm going nuts

Thank you

So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this?

The JavaScript:
Code:

//<!--

var imgList = new Array(
	"images/gallery/1.jpg",
	"images/gallery/2.jpg",
	"images/gallery/3.jpg",
	"images/gallery/5.jpg",
	"images/gallery/6.jpg",
	"images/gallery/duo.jpg"
	);

var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
	all_links=document.getElementById('gallery').getElementsByTagName('a');
	all_links[0].style.color="#7d3d3d";
	ShowMain(current_position);
}

function color_me(element,color){
	element.style.color=color;
}

function Prev(){
	color_me(all_links[current_position],'#000000');
	if((current_position-1)>-1){
		current_position=current_position-1;
	}
	else{
		current_position=(all_links.length-1);
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function direct_selection(number){
	all_links[current_position].style.color="#000000";
	current_position=number;
	ShowMain(current_position);
	all_links[current_position].style.color="#7d3d3d";
}

function Next() {
	color_me(all_links[current_position],'#000000');
	if((current_position+1)<all_links.length){
		current_position++;
	}
	else{
		current_position=0;
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function ShowMain(which){
	currentMain = which;
	currentMainT = which;
	if ( currentMain < 0 ) currentMain = 0;
	if ( currentMainT < 0 ) currentMainT = 0;
	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
	document.getElementById('mainImg').src = imgList[currentMain];
	document.getElementById('mainText').innerHTML = clientData[currentMainT];
	var PD = document.getElementById('Pg');
	var PD2 = document.getElementById('Pg2');
	
	document.getElementById("mainText").style.display = 'inline';
//	return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->


//<!--
function preloader(){
	// counter
	var i = 0;

	// create object
	imageObj = new Image();

	// set image list
	images = new Array();
	images[0]="images/gallery/1.jpg";
	images[1]="images/gallery/2.jpg";
	images[2]="images/gallery/3.jpg";
	images[3]="images/gallery/5.jpg";
	images[4]="images/gallery/6.jpg";
	images[5]="images/gallery/duo.jpg";


	// start preloading
	for(i=0; i<=3; i++){
		imageObj.src=images[i];
	}
}
//-->

The HTML where it is displayed:
Code:

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

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...

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 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

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

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;
}

Hey all,

Effectively what I want is a table displaying 20 thumbnails and above the table to be a large image. When a user clicks a thumbnail I want a relative image to be displayed above.

Now obviously I can just set this to reload the page and load the relative image in its space but I was wondering if there was a way of doing this without having to reload the whole page each time. I also want to avoid Iframes as I want this to be as cross-compatible as possible.

Thanks all.

First off, Hello, I plan to be frequenting these forums as I am still learning JavaScript. I am creating a gallery and am having trouble getting the previous and next buttons to work properly with the current image. I was trying to create a solution that would change the current image variable so that the previous and next buttons would correlate.

What I am working on can be found here. As you can see the next and previous buttons are not working.

Here is my JavaScript:
Quote:
<script type="text/javascript">

/* following not currently used by this script
function show(what) {
var find = "Img" + what.id.substring(4);
for ( var i = 1; i < 99999; ++i ) {
var cur = "Img" + i;
var img = document.getElementById(cur);
if ( img == null ) return;
img.style.display = ( find == cur ) ? "block" : "none";
}
}
*/

var Pg = 0;
function Prev() {
Pg--;
if (Pg < 0) { Pg = 0; }
document.getElementById('mainImg').src = imgList[Pg];
document.getElementById('Pg').innerHTML = 'Image '+(Pg+1)+' of '+imgList.length;
}
function Next() {
Pg++;
if (Pg >= (imgList.length-1)) { Pg = imgList.length-1; }
document.getElementById('mainImg').src = imgList[Pg];
document.getElementById('Pg').innerHTML = 'Image '+(Pg+1)+' of '+imgList.length;
}
function Pick0() {
var Pg = 0;
document.getElementById('mainImg').src = imgList[Pg];


}
function Pick1() {
var Pg = 1;
document.getElementById('mainImg').src = imgList[Pg];

}
function Pick2() {
var Pg = 2;
document.getElementById('mainImg').src = imgList[Pg];



}
function Pick3() {
var Pg = 3;
document.getElementById('mainImg').src = imgList[Pg];


}
function Pick4() {
var Pg = 4;
document.getElementById('mainImg').src = imgList[Pg];

}
function Pick5() {
var Pg = 5;
document.getElementById('mainImg').src = imgList[Pg];


}
function Pick6() {
var Pg = 6;
document.getElementById('mainImg').src = imgList[Pg];


}
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

onload = function() {
// document.getElementById('mainImg').src = imgList[0];
Prev();
}
</script>
Here is my Menu:
Quote:
<a href="#" onclick="Prev();return false"><</a><a href="#" onclick="Pick0();return false">1</a> <a href="#" onclick="Pick1();return false">2</a> <a href="#" onclick="Pick2();return false">3</a> <a href="#" onclick="Pick3();return false">4</a> <a href="#" onclick="Pick4();return false">5</a> <a href="#" onclick="Pick5();return false">6</a> <a href="#" onclick="Pick6();return false">7</a> <a href="#" onclick="Next();return false">></a>

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

Hi everyone,
I'm not sure I'm posting this correctly (or if anyone is actually willing to help me out ) but I'm looking for the javascript code to create the following comparative image gallery.

http://i528.photobucket.com/albums/d...evised-RBA.jpg

Basically the image gallery needs to do the following.

When I click on an image (small grey boxes on the bottom), that specific image will appear in the first window. When I click on another image, it will appear in the second window. And finally, click on one more image so that it appears in the third window.

If I want to remove one of the images from the large window, I want to do so by clicking the clear button underneath the image I want to remove.

If anyone could help me out with this, I would be EXTREMELY grateful!