如何使用拖放克隆创建幻灯片 [英] How to create a slideshow with drag drop clones

问题描述

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

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.

如何将一系列放置的图像传递到dynamicEL中? 有没有一种方法可以使用#cart.item的ID/类加载图片?

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.

这是一个似乎只是稍微起作用的Codepen http://codepen.io/ssab/笔/QGyKVO

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
});

});

推荐答案

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

You can launch light box in two ways.

1. 放置项目时，您可以为dynamicEl填充数组，或者
2. 单击动态按钮时，将创建元素数组.

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

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

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.

请让我知道任何解释.

这篇关于如何使用拖放克隆创建幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！