如何使用拖放克隆創建幻燈片

我想創建一個頁面，用戶可以選擇將以幻燈片形式顯示的圖像。我正在嘗試使用mootools拖放操作並希望使用lightgallery.js。如何使用拖放克隆創建幻燈片

如何將一張丟棄的圖像傳遞給動態EL？有沒有辦法使用＃cart.item的id/class加載圖像？

任何幫助，非常感謝。並且在編碼方面提前致歉。

這裏是一個codepen只似乎是稍稍工作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 
}); 

});

來源

2016-11-10 mero

您可以通過兩種方式推出燈箱。

下降時，項目就可以填充陣列爲dynamicEl，或
當動態按鈕點擊創建元素的數組。

這裏選擇2實現： http://codepen.io/imranweb7/pen/zorRLG?editors=1111 本實施背後的邏輯，每個作爲HTML複製到放置的區域。

請讓我知道任何解釋。

來源

2016-11-11 06:04:30

是的！這很棒！ – mero

如何使用拖放克隆創建幻燈片

回答

相關問題