Slideshow Control problem, one side does not work

Slideshow Control problem, one side does not work

Hi! I am new to jQuery and am trying to adapt a slideshow to fit my layout. I have one end of the slideshow working fine, as you can scroll left with no issue. However, on the right control, the button does not seem to be clickable.

The link to the page is  here.

Here is the template page's code:

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <!-- TemplateBeginEditable name="doctitle" -->
  7. <title>DAVIDE MARCHETTI ARCHITETTO</title>
  8. <!-- TemplateEndEditable -->
  9. <style type="text/css">
  10. <!--
  11. /** 
  12.  * Slideshow style rules.
  13.  */
  14. #slideshow {
  15. margin: 0 auto;
  16. width: 702px;
  17. height: 346px;
  19. position: relative;
  20. background-image: url(../images/Davide-border.png);
  21. }
  22. #slideshow #slidesContainer {
  23. margin: 23px auto;
  24. width: 702px;
  25. height: 323px; /* allow scrollbar */
  26. position: relative;
  27. }

  29. /** 
  30.  * Slideshow controls style rules.
  31.  */
  32. .control {
  33.   display:block;
  34.   width:39px;
  35.   height:39px;
  36.   text-indent:-10000px;
  37.   position:absolute;
  38.   cursor: pointer;
  39. }
  40. #leftControl {
  41.   top:0;
  42.   left:650px;
  43.   background:transparent url(images/left_control.png) no-repeat 0 0;
  44. }
  45. #rightControl {
  46.   top:0;
  47.   right:-40px;
  48.   background:transparent url(images/right_control.png) no-repeat 0 0;
  49. }

  51. #slideshow #slidesContainer .slide {
  52.   margin:23px auto;
  53.   width:700px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  54.   height:300px;
  55. }

  57. /** 
  58.  * Style rules for Demo page
  59.  */
  60. * {
  61. margin: 0;
  62. padding: 0;
  63. color: #000;
  64. font-family: "Courier New", Courier, monospace;
  65. font-size: xx-small;
  66. font-style: normal;
  67. font-weight: normal;
  68. font-variant: normal;
  69. }
  70. a {
  71.   color: #fff;
  72.   font-weight:bold;
  73.   text-decoration:none;
  74. }
  75. a:hover {
  76.   text-decoration:underline;
  77. }
  78. body {
  79.   background:#FFFFFF;
  80. }
  81. #pageContainer {
  82.   margin:0 auto;
  83.   width:960px;
  84. }
  85. #pageContainer h1 {
  86.   display:block;
  87.   width:960px;
  88.   height:114px;
  89.   background:#FFFFFF;
  90.   text-indent: -10000px;
  91. }
  92. .slide h2, .slide p {
  93.   margin:15px;
  94. }
  95. .slide h2 {
  96.   font:italic 24px Georgia, "Times New Roman", Times, serif;
  97.   color:#ccc;
  98.   letter-spacing:-1px;
  99. }
  100. .slide img {
  101.   float:right;
  102.   margin:0 15px;
  103. }
  104. #footer {
  105.   height:100px;
  106. }
  107. #footer p {
  108. margin: 30px auto 0 auto;
  109. display: block;
  110. width: 703px;
  111. height: 40px;
  112. color: #000;
  113. font-family: "Courier New", Courier, monospace;
  114. }
  115. body,td,th {
  116. color: #000000;
  117. }
  118. #pageContainer #footer p a {
  119. color: #000;
  120. }
  121. #apDiv1 {
  122. position: absolute;
  123. width: 32px;
  124. height: 1px;
  125. z-index: 1;
  126. left: 130px;
  127. top: 441px;
  128. }
  129. #apDiv2 {
  130. position: absolute;
  131. width: 22px;
  132. height: 4px;
  133. z-index: 1;
  134. left: 0px;
  135. top: 327px;
  136. }
  137. #apDiv3 {
  138. position: absolute;
  139. width: 3px;
  140. height: 0px;
  141. z-index: 1;
  142. left: 214px;
  143. top: 328px;
  144. }
  145. #apDiv4 {
  146. position: absolute;
  147. width: 0px;
  148. height: 0px;
  149. z-index: 1;
  150. left: 442px;
  151. top: 328px;
  152. }
  153. #apDiv5 {
  154. position: absolute;
  155. width: 0px;
  156. height: 4px;
  157. z-index: 1;
  158. left: 655px;
  159. top: 328px;
  160. }
  161. #apDiv6 {
  162. position: absolute;
  163. width: 49px;
  164. height: 3px;
  165. z-index: 1;
  166. left: 1px;
  167. top: 0px;
  168. }
  169. -->
  170. </style>
  171. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  172. <script type="text/javascript">
  173. $(document).ready(function(){
  174.   var currentPosition = 0;
  175.   var slideWidth = 723;
  176.   var slides = $('.slide');
  177.   var numberOfSlides = slides.length;

  179.   // Remove scrollbar in JS
  180.   $('#slidesContainer').css('overflow', 'hidden');

  182.   // Wrap all .slides with #slideInner div
  183.   slides
  184.     .wrapAll('<div id="slideInner"></div>')
  185.     // Float left to display horizontally, readjust .slides width
  186. .css({
  187.       'float' : 'left',
  188.       'width' : slideWidth
  189.     });

  191.   // Set #slideInner width equal to total width of all slides
  192.   $('#slideInner').css('width', slideWidth * numberOfSlides);

  194.   // Insert controls in the DOM
  195.   $('#slideshow')
  196.     .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
  197.     .append('<span class="control" id="rightControl">Clicking moves right</span>');

  199.   // Hide left arrow control on first load
  200.   manageControls(currentPosition);
  201.   
  202. $('slideInner').animate({
  203. 'marginLeft' : slideWidth*(-currentPosition)
  204. });

  206.   // Create event listeners for .controls clicks
  207.   $('.control')
  208.     .bind('click', function(){
  209.     // Determine new position
  210. currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
  211.     
  212. // Hide / show controls
  213.     manageControls(currentPosition);
  214.     // Move slideInner using margin-left
  215.     $('#slideInner').animate({
  216.       'marginLeft' : slideWidth*(-currentPosition)
  217.     });
  218.   });

  220.   // manageControls: Hides and Shows controls depending on currentPosition
  221.   function manageControls(position){
  222.     // Hide left arrow if position is first slide
  223. if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
  224. // Hide right arrow if position is last slide
  225.     if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  226.   }
  227. });

  229. function autoshow(){
  230. //alert(‘start’);
  231. currentPosition = currentPosition+1 ;
  232. if(currentPosition==numberOfSlides){
  233. currentPosition=0;
  234. }
  235. // Hide / show controls
  236. manageControls(currentPosition);
  237. // Move slideInner using margin-left
  238. $('#slideInner').animate({
  239. 'marginLeft' : slideWidth*(-currentPosition)
  240. });
  241. setTimeout(autoshow, 5000);
  242. }

  244. </script>
  245. <!-- TemplateBeginEditable name="head" -->
  246. <!-- TemplateEndEditable -->
  247. </head>
  248. <body text="#000000">
  249. <div id="pageContainer">
  250.   <h1><a href="">Davide Marchetti Architetto</a></h1>
  251.   <!-- Slideshow HTML -->
  252.   
  253.   <div id="slideshow"><!-- TemplateBeginEditable name="EditRegion1" -->
  254.   
  255.      <div id="apDiv6"><a href="index.html"><img src="../images/hd-main.png" width="178" height="20" /></a></div>
  256.     <div id="apDiv5"><a href="contact.html"><img src="../images/hd-contact.png" width="47" height="19" usemap="#Map2" border="0" />
  257.         <map name="Map2" id="Map2">
  258.           <area shape="rect" coords="-5,-1,62,30" href="contact.html" />
  259.     </map>
  260.   </a></div>
  261.   <div id="apDiv4"><a href="projects.html"><img src="../images/hd-projects.png" width="55" height="19" usemap="#Map" border="0" />
  262.         <map name="Map" id="Map">
  263.           <area shape="rect" coords="-2,-1,60,19" href="#" />
  264.         </map>
  265.     </a></div>
  266.   <div id="apDiv3"><a href="studio.html"><img src="../images/hd-studio.png" width="41" height="19" usemap="#studioMap" longdesc="studio.html" border="0" />
  267.         <map name="studioMap" id="studioMap">
  268.           <area shape="rect" coords="-8,-2,78,22" href="#" target="studio.html" />
  269.         </map>
  270.     </a></div>
  271.     <div id="apDiv2"><a href="news.html"><img src="../images/hd-news.png" width="78" height="19" usemap="#newsMap" border="0" />
  272.         <map name="newsMap" id="newsMap">
  273.           <area shape="rect" coords="-12,-10,164,65" href="#" />
  274.         </map>
  275.        
  276.     </a></div>

  278.     <div id="slidesContainer">
  279.       <div class="slide">
  280.         <!-- IMAGE ONE -->
  281.       </div>
  282.       <div class="slide">
  283.         <!-- IMAGE ONE -->
  284.       </div>
  285.       <div class="slide">
  286.         <!-- IMAGE ONE -->
  287.       </div>
  288.       <div class="slide">
  289.         <!-- IMAGE ONE -->
  290.       </div>
  291.     </div>

  293.   <!-- TemplateEndEditable --></div>
  294.   <!-- Slideshow HTML -->
  295.   <div id="footer">
  296.     <p align="right"><a href="http://erinpellegrino.com">Website  by Erin Pellegrino</a></p>
  297.   </div>
  298.    

  300. </div>
  301. </body>
  302. </html>

Above is the code.