PDA

View Full Version : 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!!


<!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/dynamicindex14/swissarmy/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.