Selector scope problem I think

Selector scope problem I think

I am creating a little slideshow with jQuery and I had everything working fine. At first I had the slideshow visible on document ready, but really I want it to appear only when a user clicks on an image. As soon as I put my code in a .click() event, it stopped working. If I merely comment out the .click() event the code works fine and the slideshow is visible..After debugging, it appears that the only difference is that during execution the variable slideWidth is initially set to 0 instead of the size of the image as it should. Any know what it could be?

  1. $(document).ready(function(){
  2. var currentPosition;
  3. var slides = $('.slide')
  4. var currentSlide;
  5. var currentImg;
  6.  var slideWidth;
  7.  var numberOfSlides = slides.length;
  8.  
  9. $('#filter').hide();
  10. $('#photoWrap').hide();

  12. $('.imgHolder').click(function(){
  13. currentPosition = $('.imgHolder').index(this);
  14. currentSlide = $('.slide').get(currentPosition);
  15. currentImg = $(currentSlide).children('img');
  16. slideWidth = $(currentImg).width();
  18. $('#slideShow').width(slideWidth);

  20.  // Remove scrollbar in JS
  21.  $('#slideContainer').css('overflow', 'hidden');

  23.  // Wrap all .slides with #slideInner div
  24.  slides
  25.  .wrapAll('<div id="slideInner"></div>')
  26.  // Float left to display horizontally, readjust .slides width
  27.  .css({
  28. 'float' : 'left',
  29. 'width' : slideWidth
  30.  });

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

  35. // Hide left arrow control on first load
  36. manageControls(currentPosition);
  37. $('#slideInner').css('margin-left' , slideWidth*(-currentPosition));
  38.  
  39. $('#filter').show();
  40. $('#photoWrap').show();
  41. });




  46.   // Create event listeners for .controls clicks
  47.   $('.control')
  48.     .bind('click', function(){
  49.     // Determine new position
  50. currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
  51.   
  52. currentSlide = $('.slide').get(currentPosition);
  53. currentImg = $(currentSlide).children('img');
  54. var preWidth = slideWidth;
  55. slideWidth  = $(currentSlide).width();
  56. $('#slideShow').width(slideWidth);
  58.       // Hide / show controls
  59.       manageControls(currentPosition);
  60.       // Move slideInner using margin-left
  61.       $('#slideInner').animate({
  62.         'marginLeft' : slideWidth*(-currentPosition)
  64.       }, 'slow');
  65.  
  66.  
  69.     });
  70. $('#filter').click(function(){
  71. $(this).hide();
  72. $('#photoWrap').hide();
  73. });

  75.   // manageControls: Hides and shows controls depending on currentPosition
  76.   function manageControls(position){
  77.     // Hide left arrow if position is first slide
  78.     if(position==0){ $('#leftControl').hide() }
  79.     else{ $('#leftControl').show() }
  80.     // Hide right arrow if position is last slide
  81.     if(position==numberOfSlides-1){ $('#rightControl').hide() }
  82.     else{ $('#rightControl').show() }
  83.     }
  84. });