Как создать динамическое слайд-шоу, созданное пользователем
Я хочу создать страницу, где пользователь может выбрать изображения, которые будут показаны в слайд-шоу. Я пытаюсь использовать MooTools drag and drop и хотел бы использовать lightgallery.js.
Как я могу передать массив отброшенных изображений в динамикель?
Есть ли способ загрузить изображения с помощью идентификатора / класса #cart. item?
Любая помощь очень ценится. И заранее извиняюсь за то, что я новичок в кодировании.
Вот кодовый код, который только кажется немного работающим [^]
Что я уже пробовал:
$(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 }); });