how to random magnific popup items in gallery onClick

[amine-damani]

i use multipes items popup and I want to change index items whenever click

[ghost]

You could shuffle the array of images: https://codepen.io/ChubbyNinja/pen/vmXJyQ

---

Shuffle function (copied from css-tricks)

// https://css-tricks.com/snippets/javascript/shuffle-array/
function Shuffle(o) {
  for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

$(document).ready(function(e) {

// array of images
  images = [{
    src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image1&w=350&h=250'
  }, {
    src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image2&w=350&h=350'
  }, {
    src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image3&w=350&h=450'
  }, {
    src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image4&w=350&h=550'
  }, {
    src: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Image5&w=350&h=650'
  }];

// when the item is clicked
  $('button').on('click', function(e) {

// launch magnificPopup with shuffled items
    $.magnificPopup.open({
      items: Shuffle(images),
      type: 'image',
      gallery: {
        enabled: true
      }
    });

  });

});

[amine-damani]

@ChubbyNinja thank you very much for your help i really appreciate it (y)

[ghost]

No problem :smile: