如何使用拖放克隆创建幻灯片

Question

我想创建一个页面，用户可以在其中选择要在幻灯片中显示的图像。我正在尝试使用 mootools 拖放并想使用 lightgallery.js。

如何将一组放置的图像传递到 dynamicEL 中？有没有办法使用#cart.item的id/class加载图像？

非常感谢任何帮助。并提前为编码新手道歉。

这是一个代码笔，似乎只是有点工作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

您可以通过两种方式启动灯箱。

当放下项目时，您可以为 dynamicEl 或
单击动态按钮时创建元素数组。

此处实施了选项 2： http://codepen.io/imranweb7/pen/zorRLG?editors=1111 根据您复制到放置区域的 html，此实现背后的逻辑。

如有任何解释，请告诉我。

如何使用拖放克隆创建幻灯片

How to create a slideshow with drag drop clones

javascript

jquery

mootools

lightgallery