CSS Codes
CSS Layouts
Results 1 to 7 of 7

Thread: Image Rotation on the Click of Next and Previous Buttons

  1. 10-09-2012, 09:19 AM #1
    creative1977
    creative1977 is offline Junior Coders
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Question Image Rotation on the Click of Next and Previous Buttons

    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

    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=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>
    Last edited by jscheuer1; 10-09-2012 at 10:05 AM. Reason: Format
    Reply With Quote Reply With Quote
  2. 10-09-2012, 10:57 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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=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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    creative1977 (10-09-2012)
  4. 10-09-2012, 02:01 PM #3
    creative1977
    creative1977 is offline Junior Coders
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default

    Hello vwphillips,

    Thank you!

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

    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=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>
    Last edited by creative1977; 10-09-2012 at 02:36 PM. Reason: Changed from QUOTE to CODE :)
    Reply With Quote Reply With Quote
  5. 10-09-2012, 02:12 PM #4
    creative1977
    creative1977 is offline Junior Coders
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default

    Hello Again vwphillips,

    If I make this:

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

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

<div id="tst" >
    as this:

    Code:
    #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?
    Reply With Quote Reply With Quote
  6. 10-09-2012, 04:03 PM #5
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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=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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote

  7. The Following User Says Thank You to vwphillips For This Useful Post:

    creative1977 (10-09-2012)
  8. 10-09-2012, 04:30 PM #6
    creative1977
    creative1977 is offline Junior Coders
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default

    Hello vwphillips,

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

    Code:
    <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>
    Reply With Quote Reply With Quote
  9. 10-09-2012, 04:33 PM #7
    creative1977
    creative1977 is offline Junior Coders
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default

    ISSUE Resolved! Thank vwphillips!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Move up the Next/Previous Buttons
    By vlane95678 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-15-2010, 12:10 AM
  2. Lightbox-How to put Previous and Next buttons outside image area?
    By ian_6500 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-26-2010, 02:39 AM
  3. Previous and Next buttons
    By dee_em in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 04-21-2009, 04:45 PM
  4. Lightbox image viewer next and previous buttons
    By Dman9999 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-24-2008, 06:44 AM
  5. Change image using previous/next buttons
    By GordonBennett in forum JavaScript
    Replies: 13
    Last Post: 08-19-2008, 10:02 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules