Results 1 to 7 of 7

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

  1. #1
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    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

  2. #2
    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/

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

    creative1977 (10-09-2012)

  4. #3
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    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 :)

  5. #4
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    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?

  6. #5
    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/

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

    creative1977 (10-09-2012)

  8. #6
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    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>

  9. #7
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    ISSUE Resolved! Thank vwphillips!

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
  •