JavaScript reading multiple images and displaying them in different div

Question

My script:

$(document).ready(function(){
var folder = "/img/gallery/";
$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("#galleryColumnOne").append( "<img src='"+ folder + val +"'>" );
                $("#galleryColumnTwo").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});
});

html:

<body>
<div class="wrapGalleryList" id="galleryColumnOne"></div>
<div class="wrapGalleryList" id="galleryColumnTwo"></div>
</body>

Target: to load full set of images from the folder and display them in div like: pic1 in galleryColumnOne, pic2 in galleryColumnTwo, etc..

Current state: each div display complete full set of images.

Edit: current state of the script generate:
<div1> pic1, pic2, pic3, etc. ;  <div2> pic1, pic2, pic3, etc.
should be:
<div1>pic1, pic3, pic5, etc.   ; <div2> pic2, pic4, pic6, etc.

Can you describe which part you're having difficulty with? Given the code you've got, it seems you should be able to var col=1 col = col==1?2:1 if (col==1) {} else {} — fdomn-m
– fdomn-m, Commented Oct 25, 2019 at 13:33
@vincent-chinner I'm not pro dev. script I found and adapted it to my situation. So, answer like "loop the result from the ajax callback" doesn't help me a lot. — sensor
– sensor, Commented Oct 25, 2019 at 20:16

sensor · Accepted Answer · 2019-10-25 21:33:45Z

2

So, final working script for my problem (thanks to @cars10m)is:

<script>
$(document).ready(function(){
var folder = "/img/gallery/";
$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) {                   
                 $("#galleryColumn"+(i%2?'One':'Two')).append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});
});
</script>

answered Oct 25, 2019 at 21:33

sensor

1791 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carsten Massmann · Accepted Answer · 2019-10-26 04:40:28Z

1

As a simple fix you could change your success function to something like this:

function (data) {
    $(data).find("a").attr("href", function (i, val) {
        if( val.match(/\.(jpe?g|png|gif)$/) ) { 
            $("#galleryColumn"+(i%2?'One':'Two')).append( "<img src='"+ folder + val +"'>" );
        } 
    });

Although this will not be the quickest way of doing it and it would get "out of sync", when there are <a> links in data that do not point to images.

A better solution would be

function (data) { 
  var imgs=[];
  $(data).find("a").attr("href", function (i, val) {
    if( val.match(/\.(jpe?g|png|gif)$/) ) {
      imgs.push(folder+val);
    }
  });
  $("#galleryColumnOne").append( "<img src='"+imgs.filter((v,i)=>i%2).join("'><img src='")+"'>" );
  $("#galleryColumnTwo").append( "<img src='"+imgs.filter((v,i)=>(i+1)%2).join("'><img src='")+"'>" );
}

My answer is not tested, therefore no guarantees. But the main idea is to get the .append() part out of the loop over the individual links. This way the (slow).append() function will only be called once for each div. The contents (an HTML string) is prepared by using a fast Array.filter() and .join() operation.

There is one further point I would like to remark upon: You are using the expression

$(data).find("a").attr("href", function (i, val) {...});

to loop over <a> elements in your data HTML string. It works, as you have confirmed. I was puzzled, why you used this function, as its primary purpose is to set the href attribute of each matched element. After having had a closer look at the jQuery .attr documentation it became clear to me that this is a valid way to directly access the chosen attribute value for all matched elements and do something with it. As long as the function does not return anything, the attribute will remain unchanged. However, the more conventional way of looping over DOM elements with jQuery would be:

$(data).find("a").each(function (i, elm) {...});

elm is the DOM element and you would get its href attribute with elm.href.

edited Oct 26, 2019 at 4:40

answered Oct 25, 2019 at 20:54

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

10 Comments

sensor Over a year ago

In the answer is a little bug but after fix it's working for me perfectly. Thank @cars10m you got my +1 however you won't see it as I'm still a newbie (and down-voted today for I don't know what)

Carsten Massmann Over a year ago

Is it correct now? Otherwise, please let me know so I can fix my answer.

Carsten Massmann Over a year ago

Thanks! Fixed it - but have a look at the second part of my answer too. It might be more reliable and faster.

Carsten Massmann Over a year ago

Why downvote? Probably because the contents of data is unknown to us. We could only guess that you received some valid HTML text with <a> elements in it. Next time try to post a stackoverflow.com/help/minimal-reproducible-example

Carsten Massmann Over a year ago

It is usually better to keep everything self-contained within a single post. So, providing a sample data string would be best as external web sites might change or disappear over time.

|

Collectives™ on Stack Overflow

JavaScript reading multiple images and displaying them in different div

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related