Image Rotation on the Click of Next and Previous Buttons [Archive]

creative1977

10-09-2012, 09:19 AM

Hello JavaScript Experts,

Greetings!

What should I do to make this Change upon Clicking Next and Previous Buttons? There are 2 more Files inside "images" Folder:

* rod3.jpg
* rod6.jpg

<!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=utf-8" />
<title>Rotating Images</title>

<style type="text/css">

#container {
border: 1px solid #C3C3C3;
width: 272px;
margin: 0 auto;
}

.FloatLeft
{
float:left;
}

.FloatRight
{
float:right;
}

.NoBorder {
border-width: 0px;
}

</style>

</head>

<body>

<div id="container">
<div>
<span class="FloatLeft"><a href="#"><img alt="" src="images/prev.jpg" width="29" height="29" class="NoBorder" /></a></span>
<span class="FloatRight"><a href="#"><img alt="" src="images/next.jpg" width="29" height="29" class="NoBorder"/></a></span>
</div>
<div><img alt="Product 1" src="images/prod1.jpg" width="272" height="326" /></div>
</div>

</body>

</html>

vwphillips

10-09-2012, 10:57 AM

<!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=utf-8" />
<title>Rotating Images</title>

<style type="text/css">

#container {
border: 1px solid #C3C3C3;
width: 272px;
margin: 0 auto;
}

.FloatLeft
{
float:left;
}

.FloatRight
{
float:right;
}

.NoBorder {
border-width: 0px;
}

#tst {
position:relative;width:272px;height:326px;
}

#tst DIV{
position:absolute;left:0px;top:0px;width:272px;height:326px;
}

.nav {
height:30px;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/

function Swap(id,ud){
var o=Swap['zxc'+id],obj=document.getElementById(id);
if (!o&&obj){
var clds=obj.childNodes,ary=[],z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push(clds[z0]);
}
}
o=Swap['zxc'+id]={
obj:obj,
ary:ary.reverse(),
lgth:ary.length-1,
cnt:0
}
}
if (o){
o.ary[o.cnt].style.zIndex='0';
o.cnt+=ud;
o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
o.ary[o.cnt].style.zIndex='1';
}
return false;
}

/*]]>*/
</script>
</head>

<body>

<div id="container">
<div class="nav">
<div class="FloatLeft"><img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst',1);" /></div>
<div class="FloatRight"><img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst',-1);" /></div>
</div>
<div id="tst" >
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="272" height="326" /></div>
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="272" height="326" /></div>
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="272" height="326" /></div>
</div>
</div>

</body>

</html>

creative1977

10-09-2012, 02:01 PM

Hello vwphillips,

Thank you!

I made little bit of Updates as per the Requirement. Now the CODE looks liks this:

<!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=utf-8" />
<title>Rotating Images</title>

<style type="text/css">

#container01 {
border: 1px solid #C3C3C3;
width: 272px;
margin: 0 auto;
}

.FloatLeft
{
float:left;
}

.FloatRight
{
float:right;
}

.NoBorder {
border-width: 0px;
}

#tst {
position:relative;width:272px;height:326px;
}

#tst DIV{
position:absolute;left:0px;top:0px;width:272px;height:326px;
}

.nav {
height:30px;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/

function Swap(id,ud){
var o=Swap['zxc'+id],obj=document.getElementById(id);
if (!o&&obj){
var clds=obj.childNodes,ary=[],z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push(clds[z0]);
}
}
o=Swap['zxc'+id]={
obj:obj,
ary:ary.reverse(),
lgth:ary.length-1,
cnt:0
}
}
if (o){
o.ary[o.cnt].style.zIndex='0';
o.cnt+=ud;
o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
o.ary[o.cnt].style.zIndex='1';
}
return false;
}

/*]]>*/
</script>
</head>

<body>

<div id="container01">
<div class="nav">
<div class="FloatLeft"><a href="#" class="NoBorder"><img alt="" src="images/prev.jpg" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst',1);" /></a></div>
<div class="FloatRight"><a href="#" class="NoBorder"><img alt="" src="images/next.jpg" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst',-1);" /></a></div>
</div>
<div id="tst" >
<div><img alt="Product 6" src="images/prod6.jpg" width="272" height="326" /></div>
<div><img alt="Product 3" src="images/prod3.jpg" width="272" height="326" /></div>
<div><img alt="Product 1" src="images/prod1.jpg" width="272" width="272" height="326" /></div>
</div>
</div>

</body>

</html>

creative1977

10-09-2012, 02:12 PM

Hello Again vwphillips,

If I make this:

#tst {
position:relative;width:272px;height:326px;
}

#tst DIV{
position:absolute;left:0px;top:0px;width:272px;height:326px;
}

<div id="tst" >

as this:

#container02 {
position:relative;width:272px;height:326px;
}

#container02 DIV{
position:absolute;left:0px;top:0px;width:272px;height:326px;
}

<div id="container02" >

it does not work. Could you please tell me what could be the reason?

vwphillips

10-09-2012, 04:03 PM

<!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=utf-8" />
<title>Rotating Images</title>

<style type="text/css">

#container {
border: 1px solid #C3C3C3;
width: 272px;
margin: 0 auto;
}

#container2 {
border: 1px solid #C3C3C3;
width: 272px;
margin: 0 auto;
}

.FloatLeft
{
float:left;
}

.FloatRight
{
float:right;
}

.NoBorder {
border-width: 0px;
}

#tst {
position:relative;width:272px;height:326px;
}

#tst DIV{
position:absolute;left:0px;top:0px;width:272px;height:326px;
}

#tst2 {
position:relative;width:272px;height:326px;
}

#tst2 DIV{
position:absolute;left:0px;top:0px;width:272px;height:326px;
}

.nav {
height:30px;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/

function Swap(id,ud){
var o=Swap['zxc'+id],obj=document.getElementById(id);
if (!o&&obj){
var clds=obj.childNodes,ary=[],z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push(clds[z0]);
}
}
o=Swap['zxc'+id]={
obj:obj,
ary:ary.reverse(),
lgth:ary.length-1,
cnt:0
}
}
if (o){
o.ary[o.cnt].style.zIndex='0';
o.cnt+=ud;
o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
o.ary[o.cnt].style.zIndex='1';
}
return false;
}

/*]]>*/
</script>
</head>

<body>

<div id="container">
<div class="nav">
<div class="FloatLeft"><img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst',1);" /></div>
<div class="FloatRight"><img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst',-1);" /></div>
</div>
<div id="tst" >
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="272" height="326" /></div>
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="272" height="326" /></div>
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="272" height="326" /></div>
</div>
</div>
<br />
<div id="container2">
<div class="nav">
<div class="FloatLeft"><img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst2',1);" /></div>
<div class="FloatRight"><img alt="" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="29" height="29" class="NoBorder" onmouseup="return Swap('tst2',-1);" /></div>
</div>
<div id="tst2" >
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="272" height="326" /></div>
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="272" height="326" /></div>
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="272" height="326" /></div>
<div><img alt="Product 1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="272" height="326" /></div>
</div>
</div>

</body>

</html>

on holiday from tomorrow so hope someone else can keep an eye on this post

creative1977

10-09-2012, 04:30 PM

Hello vwphillips,

Thank you and Enjoy your Holiday! I found the BUG and I have Fixed it. Please see the following:

<div class="FloatLeft"><a href="#" class="NoBorder"><img alt="" src="images/prev.jpg" width="29" height="29" class="NoBorder" onmouseup="return Swap('container02',1);" /></a></div>
<div class="FloatRight"><a href="#" class="NoBorder"><img alt="" src="images/next.jpg" width="29" height="29" class="NoBorder" onmouseup="return Swap('container02',-1);" /></a></div>

creative1977

10-09-2012, 04:33 PM

ISSUE Resolved! Thank vwphillips!