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