Comment créer un diaporama avec des clones de glisser-déposer

Question

Je souhaite créer une page dans laquelle l'utilisateur peut choisir les images qui seront affichées dans un diaporama. J'essaie d'utiliser mootools glisser et déposer et voudrais utiliser lightgallery.js.

Comment puis-je transmettre un tableau d'images déposées dans le dynamicEL? Existe-t-il un moyen de charger les images en utilisant l'id/class de # cart.item?

Toute aide est grandement appréciée. Et des excuses d'avance pour être nouveau au codage.

Voici un codepen qui semble seulement travailler un peu 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

Vous pouvez lancer la boîte de lumière de deux façons.

1. lors de la suppression élément que vous pouvez remplir tableau pour dynamicEl ou
2. lorsque le bouton dynamique cliquée créer une matrice d'éléments.

Ici l'option 2 mises en œuvre: http://codepen.io/imranweb7/pen/zorRLG?editors=1111 La logique derrière cette mise en oeuvre selon que le code HTML copié à la zone abandonnée.

S'il vous plaît laissez-moi savoir pour des explications.