How to find Next Image src with Javascript

advertisements

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

$(".image-container").find("img[src=" + Img + "]").next('img').attr('src');

but still no go.

This is what i have come up with so far, any help would be great, Thank's

<div id="removed-container" style="height: 600px;">
<div id="removed" style="height: 600px;">
<div style="float: left; width: 200px;">
  <h1> <span>The Gallery</span> </h1>
  <ul id="nav">
    <li><a href="" id="here">Gallery</a>
      <ul>
        <li><a href="#" data-albumid="gallery/fld01/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld02/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld03/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld04/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld05/">2015</a></li>
      </ul>
    </li>
    <li><a href="index.html">Back to home</a></li>
  </ul>
</div>
<div class="image-container"></div>

<script type="text/javascript"> $(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($("<a href='java<!-- no -->script:;' class='thumb' data-src='"+file+"'><img src='"+file+"' title='Click to enlarge' alt='#'/></a>"));

                if ($(".image-container").children("a").length == 30) {
                    return false;
                }
            });

            $(".thumb").bind('click', function() {
                var Popup="<div class='bg'></div>"+"<div class='wrapper'><img src='<img src=''/>"+"<label href='javascript:;' class='prev-image'>&laquo;</label><label href='javascript:;' class='next-image'>&raquo;</label><a href='java<!-- no -->script:;' class='close' title='Close'>Close</a>";
                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();
                });
            });
        }
    });
} </script>
<div class="clear"></div>


The problem is in the usage of next().

From documentation - Get the immediately following sibling of each element in the set of matched elements.

And as in your case, img are not siblings, hence, there are no matched set of elements.

If your hierarchy is strict and is not going to change, then you can do something like following

/* Find image - go its parent - go to next anchor - get the image - get the source */
$(".image-container").find("img[src='" + Img + "']").parent().next('a').find("img").attr('src');

Else you can iterate over the images.

For reference - http://plnkr.co/edit/onUeWl8mPqVhtaHf37xp?p=preview