Javascript help needed!!

**benski** · 02-12-2007, 11:19 PM

Hi,

I am putting together a site and one of the pages is a portfolio. I got some Javascript code whereby you click on a button and it scrolls through the images selected in the code. This works fine with one gallery, but I want to have 4 gallerys all showing different 'genre' of image. I have the layout on the page sorted, however, what happens is regardless of which gallery I want to scroll through the buttons all move the same gallery (which is the last one).

Is there a way of making each gallery a seperate entity so that the buttons only move the images on the gallery that they relate to??

Any help would be very much appreciated!!

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Business 2007</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="Author" content="Tjobbe Andrews, SiteCreative.net" />


<script language="JavaScript">
/* Extension written by David G. Miles (http://www.z3roadster.net/dreamweaver/) 
based in part on code written by Thomas Brattli (http://www.bratta.com)*/
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
if(document.images) { 
		currentslide=1; 
		maxslides=6; 
		slide = new Array(maxslides+1); 
		for(var n=1;n<=maxslides;n++) { 
			slide[n]=new Image(500,245); 
			slide[n].src='images/'+n+'.gif'; 
		} 
	} 
	function prevSlide() { 
		if(document.images) { 
			currentslide--; 
			if(currentslide<1) currentslide=maxslides; 
			document.images['slide'].src=slide[currentslide].src; 
		} 
	} 
	function nextSlide() { 
		if(document.images) { 
			currentslide++; 
			if(currentslide>maxslides) currentslide=1; 
			document.images['slide'].src=slide[currentslide].src; 
		} 
	} 
</script>



</head>

<body>
<div id="container">
	<div id="holder" class="clearfix">
		<div id="logo">
			<h1>Gallery</h1>
	  </div>
		<div id="navigation"><center>
			<ul>
				<li><a href="index.htm">HOME</a></li>
				<li><a href="aboutus.htm">ABOUT US</a></li>
				<li><a href="products.htm">PRODUCTS AND SERVICES</a></li>
				<li><a href="gallery.htm">GALLERY</a></li>
				<li><a href="contact.htm">CONTACT</a></li>
				<li><a href="jobs.htm">JOBS</a></li>
			</ul>
	    </div></center>
		<div id="header"></div>
		<div id="content">
			<h1>Take a look at some of our previous work -</h1>
			
		</div>


<table border="0" width="100%" cellpadding="10">

<tr>


<td width="50%" valign="top">
<!-- Start SlideShow -->
<table border=0 cellspacing=0 cellpadding=0><caption><strong>Title</strong></caption>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center> 
<td height=245 colspan=2><img name='slide' width=300 height=200 border=0 hspace=0 vspace=0 alt='slideshow' src='images/1.gif,2.gif,3.gif,4.gif,5.gif,6.gif'></td>
</tr>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr> 
<td height=5 align=left><a href='javascript:prevSlide()'><img src="images/button_previous.gif" width="20" height="20" alt="Previous" border="0"></a></td>
<td height=5 align=right><a href='javascript:nextSlide()'><img src="images/button_next.gif" width="20" height="20" alt="Next" border="0"></a></td>
</tr>
</table>
<!-- End SlideShow -->

</td>


<td width="50%" valign="top">
<!-- Start SlideShow -->
<table border=0 cellspacing=0 cellpadding=0><caption><strong>Title</strong></caption>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center> 
<td height=245 colspan=2><img name='slide' width=300 height=200 border=0 hspace=0 vspace=0 alt='slideshow' src='images/1.gif,2.gif,3.gif,4.gif,5.gif,6.gif'></td>
</tr>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr> 
<td height=5 align=left><a href='javascript:prevSlide()'><img src="images/button_previous.gif" width="20" height="20" alt="Previous" border="0"></a></td>
<td height=5 align=right><a href='javascript:nextSlide()'><img src="images/button_next.gif" width="20" height="20" alt="Next" border="0"></a></td>
</tr>
</table>
<!-- End SlideShow -->
</td>

</tr>
</table>



<table border="0" width="100%" cellpadding="10">
<tr>

<td width="50%" valign="top">
<!-- Start SlideShow -->
<table border=0 cellspacing=0 cellpadding=0><caption><strong>Title</strong></caption>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center> 
<td height=245 colspan=2><img name='slide' width=300 height=200 border=0 hspace=0 vspace=0 alt='slideshow' src='images/1.gif,2.gif,3.gif,4.gif,5.gif,6.gif'></td>
</tr>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr> 
<td height=5 align=left><a href='javascript:prevSlide()'><img src="images/button_previous.gif" width="20" height="20" alt="Previous" border="0"></a></td>
<td height=5 align=right><a href='javascript:nextSlide()'><img src="images/button_next.gif" width="20" height="20" alt="Next" border="0"></a></td>
</tr>
</table>
<!-- End SlideShow -->
</td>

<td width="50%" valign="top">
<!-- Start SlideShow -->
<table border=0 cellspacing=0 cellpadding=0><caption><strong>Title</strong></caption>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center> 
<td height=245 colspan=2><img name='slide' width=300 height=200 border=0 hspace=0 vspace=0 alt='slideshow' src='images/1.gif,2.gif,3.gif,4.gif,5.gif,6.gif'></td>
</tr>
<tr> 
<td height=5 colspan=2> </td>
</tr>
<tr> 
<td height=5 align=left><a href='javascript:prevSlide()'><img src="images/button_previous.gif" width="20" height="20" alt="Previous" border="0"></a></td>
<td height=5 align=right><a href='javascript:nextSlide()'><img src="images/button_next.gif" width="20" height="20" alt="Next" border="0"></a></td>
</tr>
</table>
<!-- End SlideShow -->
</td>

</tr>
</table>



		<div id="news">
		
	  </div>
	</div>

	<div id="footer">
		<span id="copyright">Design by <a href="http://www.sitecreative.net" target="_blank" title="Opens link to SiteCreative.net in a New Window">SiteCreative</a></span>
		<ul>
			<li><a href="index.htm">Home</a></li>
			<li><a href="aboutus.htm">About Us</a></li>
			<li><a href="products.htm">Products and Services</a></li>
			<li><a href="gallery.htm">Gallery</a></li>
			<li><a href="contact.htm">Contact</a></li>
			<li><a href="jobs.htm">Jobs</a></li>
		</ul>
	</div>
</div>
</body>
</html>

**jscheuer1** · 02-12-2007, 11:24 PM

You would need an object oriented (OO) script for that, like:

http://www.dynamicdrive.com/dynamici...army/index.htm

Or, you could use your current script on separate pages. One on the top page and the others showing through onto it via iframes. You could also rewrite your current script for multiple use by making it OO or by writing different versions of it each with unique global function, variable and id names.

**benski** · 02-14-2007, 09:07 PM

Thanks John, I deceided to use the script on different pages.

Thread: Javascript help needed!!

Thread Tools

Search Thread

Javascript help needed!!

Bookmarks

Bookmarks

Posting Permissions