title: Showing and Hiding images in an image gallery works initially but second time all images vanish
body: <p>I am using an image gallery to show and display images, which can be seen at this link: </p>
  
  <p><a href="http://codepen.io/maudulus/pen/qJkuL" rel="nofollow">http://codepen.io/maudulus/pen/qJkuL</a> </p>
  
  <p>I want the images to disappear when they are to the left or right of the arrow locations <code>&lt;div id="arrow-left"&gt;</code> and <code>&lt;div id="arrow-right"&gt;</code>, respectively. </p>
  
  <p>I was trying something like the following in a lot of different variations: </p>
  
  <pre><code>$('.gallery-tmb').each(function showHideImages() {
      arrowRightPosition = $('#arrow-right-small').offset().left;
      arrowLeftPosition = $('#arrow-left-small').offset().left;
      if ($(this).offset().left &lt; arrowLeftPosition || $(this).offset().left &gt; arrowRightPosition ){
          $( this ).hide();
      } else {
          $( this ).show();
      }
  });
  </code></pre>
  
  <p>I also tried using the following library <a href="https://github.com/kevinmarx/overflowing" rel="nofollow">https://github.com/kevinmarx/overflowing</a>, which allowed me to do something like <code>$('.gallery-tmb').overflowing('.gallery-outer')</code> to hide the elements outside of <code>&lt;div class="gallery-outer"&gt;</code>, but <strong>what keeps happening</strong> is that all of the elements disappear if you run the function after clicking one of the arrows. </p>
  
  <p>How can I make the images disappear when they are to the left or right of the arrow locations, but stay showing while in between? </p>
  
  <p><strong>HTML</strong>: </p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
  
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;&lt;/style&gt;
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"&gt;&lt;/script&gt;&lt;script src="/javascripts/json2.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400" rel="stylesheet" type="text/css"&gt;
        &lt;script src="/javascripts/prefixfree.dynamic-dom.min.js"&gt; &lt;/script&gt;&lt;script src="/javascripts/prefixFreePlugin.js"&gt; &lt;/script&gt;&lt;script src="/javascripts/overflowing.js"&gt; &lt;/script&gt;&lt;script src="/javascripts/survey4_main.js"&gt; &lt;/script&gt;
        &lt;link rel="stylesheet" href="/stylesheets/survey4style.css"&gt;
        &lt;link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.css"&gt;
        &lt;div id="gallery_div_holder"&gt;
           &lt;div id="gallery_div"&gt;
              &lt;div id="gallery"&gt;
                 &lt;div id="arrow-left" style="display: none;"&gt;
                    &lt;div id="arrow-left-small"&gt;&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div class="gallery-outer"&gt;
                    &lt;div class="gallery-inner"&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt; &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;                                     &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://wwwdelivery.superstock.com/WI/223/1598/PreviewComp/SuperStock_1598R-92232.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://ecx.images-amazon.com/images/I/41UFfdIBHEL._SY300_.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://thumbs.dreamstime.com/x/parking-place-sign-8298726.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://www.centerlinesupply.com/highway_products/signs/warning_signs/warning_signs_w10_w15/1444d36e8ad15d/1/w13_4_on_ramp_t.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://rlv.zcache.com/phoenix_az_road_sign_sticker-rae72c4928a614add87176050ec4092d5_v9wf3_8byvr_512.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://www.centerlinesupply.com/highway_products/pavement_marking_supplies/traffic/signs/route_markers/independent_mount_route_markers/144063631495c9/1/m1_6r_ranch_road_marker.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;      &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt; &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;                                     &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://wwwdelivery.superstock.com/WI/223/1598/PreviewComp/SuperStock_1598R-92232.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://ecx.images-amazon.com/images/I/41UFfdIBHEL._SY300_.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://thumbs.dreamstime.com/x/parking-place-sign-8298726.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://www.centerlinesupply.com/highway_products/signs/warning_signs/warning_signs_w10_w15/1444d36e8ad15d/1/w13_4_on_ramp_t.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://rlv.zcache.com/phoenix_az_road_sign_sticker-rae72c4928a614add87176050ec4092d5_v9wf3_8byvr_512.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="http://www.centerlinesupply.com/highway_products/pavement_marking_supplies/traffic/signs/route_markers/independent_mount_route_markers/144063631495c9/1/m1_6r_ranch_road_marker.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div class="gallery-tmb"&gt;
                          &lt;img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
                          &lt;div class="texte"&gt; &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div id="arrow-right"&gt;
                    &lt;div id="arrow-right-small"&gt;               &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div id="lowerDiv"&gt;
              &lt;div id="picDropDiv" class="ui-droppable"&gt; &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code> (function ($) {
      $.fn.thumbGallery = function (settings) {
          var $this = $(this);
          return this.each(function () {
              settings = jQuery.extend({
                  speed: 900,
                  leftArrow: $this.find('#arrow-left'),
                  rightArrow: $this.find('#arrow-right'),
                  galleryContainer: $this.find('.gallery-inner'),
                  visibleImagesSize: 7
              }, settings);
  
              var imgElements = settings.galleryContainer.find('img').length;
              var size = settings.visibleImagesSize;
  
              settings.leftArrow.hide();
  
              if (imgElements &gt; settings.visibleImagesSize) {
                  settings.rightArrow.show();
                  // .css("opacity","1");
              } else {
                  settings.rightArrow.hide();
              }
  
              function animateLeft() {
                  var el = settings.galleryContainer.children(":last");
  
                  settings.galleryContainer.animate({
                      left: '+=' + el.outerWidth(true) + 'px'
                  },
                  settings.speed);
              }
  
              function animateRight() {
                  var el = settings.galleryContainer.children(":first");
                  settings.galleryContainer.animate({
                      left: '-=' + el.outerWidth(true) + 'px'
                  },
                  settings.speed);
              }
  
              function checkArrows() {
                  if (size === settings.visibleImagesSize) {
                      settings.leftArrow.hide();
                  } else {
                      settings.leftArrow.show();
                  }
  
                  if (size === imgElements) {
                      settings.rightArrow.hide();
                  } else {
                      settings.rightArrow.show();
                  }
              }
  
              settings.leftArrow.click(function () {
                  animateLeft();
                  size--;
                  checkArrows();
              });
  
              settings.rightArrow.click(function () {
                  animateRight();
                  size++;
                  checkArrows();
              });
  
          });
      };
  })(jQuery);
  
  $(document).ready(function () {
      $('#gallery').thumbGallery();
  });
  
  $(function() {
      $( ".gallery-tmb img" ).draggable({ start: function(){increaseZindex(this)}, revert: "invalid" });
      $( "#picDropDiv" ).droppable({
          tolerance: "fit",
          activeClass: "ui-state-default",
          hoverClass: "ui-state-hover",
          out: function(event, ui) {
              $(ui.helper).mouseup(function() {
                  doSomethingTo(ui.draggable);
              });
          },
          drop: function( event, ui ) {
              $( this )
              .addClass( "ui-state-highlight" )
          }
      });
  });
  
  count = 0; 
  $(document).on('click', '.mini_div', function(e) {
      $(this).zIndex( count );
      count+=1;
      console.log("z-index for this picture has been increased to " + count)
  });
  function increaseZindex(myElement){
      $(myElement).zIndex( count );
      count+=1;
      console.log("z-index for this picture has been increased to " + count)
      miniDivPosition = $(myElement).position()
      miniDivPositionLeft = miniDivPosition.left
      if (miniDivPositionLeft &lt; 0) {
          $(this).addClass("hasMoved")
      }
  }
  
  /*var galleryCount = 0;
  $('.gallery-tmb').each(function() {
      $(this).attr('id', String(galleryCount))
      galleryCount++
  });
  $('.gallery-tmb').each(function showHideImages() {
      arrowRightPosition = $('#arrow-right-small').offset().left;
      arrowLeftPosition = $('#arrow-left-small').offset().left;
      if ($(this).offset().left &lt; arrowLeftPosition || $(this).offset().left &gt; arrowRightPosition ){
          $( this ).hide();
      } else {
          $( this ).show();
      }
  });
  */
  </code></pre>
  
  <p><a href="http://codepen.io/maudulus/pen/qJkuL" rel="nofollow">http://codepen.io/maudulus/pen/qJkuL</a></p>