title: How to find Next Image src with Javascript
body: <p>I have chosen this way of doing it so i can just drop a hand full of images in to a folder and that's it, I have tried many ways but nothing works, my latest attempt is using</p>
  
  <p><code>$(".image-container").find("img[src=" + Img + "]").next('img').attr('src');</code> </p>
  
  <p>but still no go.</p>
  
  <p>This is what i have come up with so far, any help would be great, Thank's</p>
  
  <pre><code>&lt;div id="removed-container" style="height: 600px;"&gt;
  &lt;div id="removed" style="height: 600px;"&gt;
  &lt;div style="float: left; width: 200px;"&gt;
    &lt;h1&gt; &lt;span&gt;The Gallery&lt;/span&gt; &lt;/h1&gt;
    &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="" id="here"&gt;Gallery&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" data-albumid="gallery/fld01/"&gt;2015&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-albumid="gallery/fld02/"&gt;2015&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-albumid="gallery/fld03/"&gt;2015&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-albumid="gallery/fld04/"&gt;2015&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-albumid="gallery/fld05/"&gt;2015&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Back to home&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="image-container"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt; $(document).ready(function () {
      $("a").click(function () {
          var dir_path=$(this).data("albumid");
          LoadGallery(dir_path);
          return false;
      });
  });
  
  function LoadGallery(dir_path) {
      $.ajax({
          url: dir_path,
          success: function(data) {
  
              $(".image-container").empty();
  
  $(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
                   this.href.replace(window.location.host,"").replace("http:///",""); file=dir_path+$(this).text();
                  $(".image-container").append($("&lt;a href='java&lt;!-- no --&gt;script:;' class='thumb' data-src='"+file+"'&gt;&lt;img src='"+file+"' title='Click to enlarge' alt='#'/&gt;&lt;/a&gt;"));
  
                  if ($(".image-container").children("a").length == 30) {
                      return false;
                  }
              });
  
              $(".thumb").bind('click', function() {
                  var Popup="&lt;div class='bg'&gt;&lt;/div&gt;"+"&lt;div class='wrapper'&gt;&lt;img src='&lt;img src=''/&gt;"+"&lt;label href='javascript:;' class='prev-image'&gt;&amp;laquo;&lt;/label&gt;&lt;label href='javascript:;' class='next-image'&gt;&amp;raquo;&lt;/label&gt;&lt;a href='java&lt;!-- no --&gt;script:;' class='close' title='Close'&gt;Close&lt;/a&gt;";
                  Img = $(this).attr("data-src"),
                  $("body").prepend(Popup);
                  $(".bg").height($(window).height()*4);
                  $(".wrapper img").attr("src", Img);
  
                  $(".prev-image").bind ('click',function() {
                      alert("Prev")
                  })
  
                  $(".next-image").bind ('click',function() {
                  next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
                  //alert(next) 
                  })
  
                  $(".close").bind ('click',function() {
                      $(this).siblings("img").attr("src", "")
                          .closest(".wrapper").remove();
                      $(".bg").remove();
                  });
              });
          }
      });
  } &lt;/script&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
  </p>