mero mero - 28 days ago 10
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 http://codepen.io/ssab/pen/QGyKVO

$(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>'
};
selected_image.push(item1);
});


jQuery(this).lightGallery({
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').each(function(item){

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() {
this.remove();
drop.removeEvents();
}).inject(document.body);

drop.addEvents({
'drop': function() {
drop.removeEvents();
clone.remove();
item.clone().inject(drop);
dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
},
'over': function() {
dropFx.start('98B5C1');
},
'leave': function() {
dropFx.start('ffffff');
}
});

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

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

});

Answer

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: http://codepen.io/imranweb7/pen/zorRLG?editors=1111 The logic behind this implementations as per as the html you copied to dropped area.

Please let me know for any explanations.