如何创建动态用户创建的幻灯片 [英] How to create a dynamic user created slideshow

问题描述

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



如何将一系列已删除的图像传递到dynamicEL？

有没有办法使用＃cart.item的id /类加载图片？



非常感谢任何帮助。并且在编码时提前道歉。



这是一个似乎只是稍微有点工作的codepen [ ^ ]



我尝试过：

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 [^]

What I have tried:

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

   });

jQuery.noConflict();
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
	});
 
});

推荐答案

（function（）{


jQuery（'#dynamic'）。on（'click'，function（）{
var selected_image = [];
jQuery（＃cart.item img）。each（function（） {
var item1 = {
src：

(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('src'), thumb:

（this）.find（'img'）。attr（'data-thumb'），
subHtml：'< h4>< / h4>'
};
selected_image.push（item1）;
}）;


jQuery（this）.lightGallery（{
dynamic：true，
dynamicEl：selected_image
}）
}）;

}）;

(this).find('img').attr('data-thumb'), subHtml: '<h4></h4>' }; selected_image.push(item1); }); jQuery(this).lightGallery({ dynamic: true, dynamicEl: selected_image }) }); });

jQuery.noConflict();
var drop =

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