Click here to Skip to main content
15,896,557 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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, no editing and no re-sizing to do, Simple!
I have tried many ways but nothing works, my latest attempt is next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src'); but still no good.

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

HTML
<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'>«</label><label href='javascript:;' class='next-image'>»</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>
  </div>
</div>
Posted
Comments
Amit Jadli 28-Nov-15 8:24am    
I think this will work...didnt tested..

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

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900