mero mero - 1 year ago 72
Javascript Question

How to create a slideshow with drag drop clones

I want to create a page where the user can choose the images that will be shown in a slideshow. I am attempting to use mootools drag and drop and would like to use lightgallery.js.

How can I pass an array of dropped images into the dynamicEL?
Is there a way to load the images using the id/class of #cart.item?

Any help is greatly appreciated. And apologies in advance for being new at coding.

Here is a codepen that only seems to be slightly working

$(function() {

jQuery('#dynamic').on('click', function() {
var selected_image = [];
jQuery( "#cart.item img" ).each(function() {
var item1 = {
src: $(this).find('img').attr('src'),
thumb: $(this).find('img').attr('data-thumb'),
subHtml: '<h4></h4>'

dynamic: true,
dynamicEl: selected_image


var drop = $('cart');
var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,


item.addEvent('mousedown', function(e) {
e = new Event(e).stop();

var clone = this.clone()
.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
.setStyles({'opacity': 0.7, 'position': 'absolute'})
.addEvent('emptydrop', function() {

'drop': function() {
dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
'over': function() {
'leave': function() {

var drag = clone.makeDraggable({
droppables: [drop]
}); // this returns the dragged element

drag.start(e); // start the event manual


Answer Source

You can launch light box in two ways.

  1. when dropping item you can populate array for dynamicEl, or
  2. when dynamic button clicked create array of elements.

Here option 2 implemented: The logic behind this implementations as per as the html you copied to dropped area.

Please let me know for any explanations.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download