Как создать слайд-шоу с клонами перетаскивания

Question

Я хочу создать страницу, на которой пользователь может выбрать изображения, которые будут отображаться в слайд-шоу. Я пытаюсь использовать mootools drag and drop и хотел бы использовать lightgallery.js.

Как передать массив удаленных изображений в dynamicEL? Есть ли способ загрузить изображения, используя id/class # cart.item?

Любая помощь очень ценится. И заблаговременно приносим извинения за то, что вы новичок в кодировании.

Вот codepen, что только кажется, слегка работает 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 1

Вы можете запускать световой короб двумя способами.

1. при удалении детали вы можете заполнить массив для dynamicEl или
2. когда динамическая кнопка нажата создать массив элементов.

Здесь вариант 2 внедрен: http://codepen.io/imranweb7/pen/zorRLG?editors=1111 Логики этой реализации в соответствии как HTML, скопированный на упала области.

Пожалуйста, дайте мне знать для каких-либо объяснений.