Retrieve array and output results to generate a set of html images

Question

Simply put I'm using a plugin called magnific popup, which is a lightbox popup, and you can initialise it from a set of options on dom ready:

$.magnificPopup.open({
    items: [
        { src: "img-src.jpg"  },
        { src: "img-src2.jpg" },
        { src: "img-src3.jpg" },
        etc
    ]
});

I've created an array of images in javascript held within a div which then need to be passed into that list. Only I'm not sure how. Heres what I've got.

var $zoomurl = $('.gallery').find('img').attr('src');

How do I get the contents of var $zoomurl into items options? An explanation of the answer would be of value also!

guest271314 · Accepted Answer · 2015-10-26 14:14:46Z

1

Try using $.map()

$.magnificPopup.open({
    items: $.map($(".gallery").find("img"), function(el) {
             return {"src":el.src}
           })

});

answered Oct 26, 2015 at 14:14

guest271314

1

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

15 Comments

Aaron Over a year ago

Thats worked! Thanks for your help. I have a slight problem with click event tho, it opens the gallery at the first image all the time. Theres an index selector that is accepted by magnific popup. Is there anyway of counting the items, 0 being the first entry, and using that to select the correct image?

Aaron Over a year ago

$.magnficPopup.open({ #items }, #index );

guest271314 Over a year ago

@Aaron Not tried $.magnificPopup , though should be able to select item within items using $.magnficPopup.open(items, 0)

Aaron Over a year ago

Yup, just not sure how to count the items with the above code and provide that index number.

$.magnificPopup.open({     items: $.map($(".gallery").find("img"), function(el) {         return {"src":el.src}     }) }, #count );

Aaron Over a year ago

Done it! Don't need to retrieve the index, because flickity already has a cellIndex function which we can use to tell magnific what image to open! Its all working... thanks for your help @guest271314 :)

|

Collectives™ on Stack Overflow

Retrieve array and output results to generate a set of html images

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related