PDA

View Full Version : javascript photo gallery how to add back and forward buttons



cscwebmaster
04-11-2009, 08:06 PM
Hi I have a photo gallery which at the moment has numbered links to the photos but now I would like to add next and previous buttons to the images...
any help would be appreciated here is my page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>



<head>

<title>:: my gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="../css/gallery.css">
<script type="text/javascript">
// Gallery script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>





<script type="text/JavaScript">
function activate(link){
if(document.getElementById)
document.getElementById(link).focus();
else if (document.all)
document.all(link).focus();
}
</script>





</head>




<body onload="activate('act');">

<!-- Begin Wrapper -->
<div id="wrapper">



<!-- Begin Left Column -->
<div id="topbar" class="center"><a href="1.jpg">Pop Music Quiz - Esquire (UK)
</a> </div>



<div id="content_holder">


<div id="content_box2"><img src="../images/Portraits/1.jpg" alt="Photo gallery" name="portraits1" width="666" height="450" id="portraits1"> </div>


<div id="footer" align="center">

<a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/1.jpg','topbar','Pop Music Quiz - Esquire (UK)')">1</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/2.jpg','topbar','Ronnie Wood - Personal')">2</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/3.jpg','topbar','Denys Lasdun - Guardian Review')">3</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/4.jpg','topbar','Sam West - Guardian Review')">4</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/5.jpg','topbar','Alan Lamb - Brown Shipley Bank ')">5</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/6.jpg','topbar','Tony Blair V’s Gordon Brown - FT ')">6</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/7.jpg','topbar','Bruce Willis - Times Eye')">7</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/8.jpg','topbar','The Thick Of It - Guardian Guide')">8</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/9.jpg','topbar','President Mugabe - Personal')">9</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/10.jpg','topbar','Conrad Black - FT')">10</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/11.jpg','topbar','Ricardo Mutti - Independent')">11</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/12.jpg','topbar','Gordon Brown and Alistair Darling - GQ')">12</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/13.jpg','topbar','Mickey Rourke - Jack')">13</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/14.jpg','topbar','Brits and Germans - Legal Business')">14</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/15.jpg','topbar','Orphan Pamuk - Guardian Guide')">15</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/16.jpg','topbar','Jude Law - Independent ')">16</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/17.jpg','topbar','Yasser Arafat - Personal')">17</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/18.jpg','topbar','Graham Greene - Guardian Review ')">18</a
> - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/19.jpg','topbar','Russian Presidents - FT')">19</a>
- <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/20.jpg','topbar','Wacko Jacko - Personal')">20</a>&nbsp;&nbsp;&nbsp;<a href="../../index.html" target="_parent">[ home ]</a></div>


</div>



</div>
<!-- End Wrapper -->

</body>
</html>

jscheuer1
11-10-2012, 09:17 AM
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

vwphillips
11-10-2012, 12:00 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>



<head>

<title>:: my gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="../css/gallery.css">
<script type="text/javascript">
// Gallery script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var myary=[
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Pop Music Quiz - Esquire (UK)'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Ronnie Wood - Personal'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Denys Lasdun - Guardian Review'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Sam West - Guardian Review'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','Pop Music Quiz - Esquire (UK)'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg','Alan Lamb - Brown Shipley Bank']
];

function LoadGallery(pictureName,titleCaption,ary,nu)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = ary[nu][0];
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=ary[nu][1];
picture.nu=nu;
}

function LoadGalleryNext(pictureName,titleCaption,ary,ud){
var picture = document.getElementById(pictureName),nu=(picture.nu||0)+(typeof(ud)=='number'&&ud<0?-1:1),nu=nu<0?ary.length-1:nu>ary.length-1?0:nu;
LoadGallery(pictureName,titleCaption,ary,nu);
}

</script>





<script type="text/JavaScript">
function activate(link){
if(document.getElementById)
document.getElementById(link).focus();
else if (document.all)
document.all(link).focus();
}
</script>





</head>




<body onload="activate('act');">

<!-- Begin Wrapper -->
<div id="wrapper">



<!-- Begin Left Column -->
<div id="topbar" class="center"><a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">Pop Music Quiz - Esquire (UK)
</a> </div>



<div id="content_holder">


<div id="content_box2"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Photo gallery" name="portraits1" width="666" height="450" id="portraits1"> </div>


<div id="footer" align="center">

<a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" href="#_self" onclick="LoadGallery('portraits1','topbar',myary,0);">1</a>
- <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,1)">2</a>
- <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,2)">3</a>
- <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,3)">4</a>
- <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,4)">5</a>
- <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,5)">6</a>
<br>
<input type="button" name="" value="Next" onmouseup="LoadGalleryNext('portraits1','topbar',myary,1)">
<input type="button" name="" value="Back" onmouseup="LoadGalleryNext('portraits1','topbar',myary,-1)">

</div>

</div>
<!-- End Wrapper -->

</body>
</html>