Erstellen einer Diashow mit Drag-Drop-Klonen

Question

Ich möchte eine Seite erstellen, auf der der Benutzer die Bilder auswählen kann, die in einer Diashow angezeigt werden. Ich versuche mootools drag and drop zu verwenden und möchte lightgallery.js verwenden.

Wie kann ich ein Array von dropped Bildern in die dynamischeEL übergeben? Gibt es eine Möglichkeit, die Bilder mit der ID/Klasse von # cart.item zu laden?

Jede Hilfe wird sehr geschätzt. Ich entschuldige mich im Voraus dafür, dass ich neu im Coding bin.

ist hier ein codepen die http://codepen.io/ssab/pen/QGyKVO scheint nur

$(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

Sie können starten Lichtbox auf zwei Arten leicht zu arbeiten.

1. beim Löschen Element, das Sie Array für dynamicEl oder
2. wenn dynamische Schaltfläche erstellen geklickt Array von Elementen bevölkern können.

Hier Option 2 implementiert: http://codepen.io/imranweb7/pen/zorRLG?editors=1111 Die Logik hinter diesen Implementierungen wie pro als html Sie fiel Bereich kopiert.

Bitte lassen Sie mich für irgendwelche Erklärungen wissen.