如何在點擊貓頭鷹傳送帶中的圖像後在引導模式中打開精確圖像？

我在Bootstrap項目中使用貓頭鷹旋轉木馬。我希望當我點擊旋轉木馬的圖像時，即正在打開的模式，必須向我顯示之前點擊過的確切圖像（更大），而不是旋轉木馬的第一個圖像。如何在點擊貓頭鷹傳送帶中的圖像後在引導模式中打開精確圖像？

有人可以幫我嗎？

我做了一個FIDDLE

HTML

<div class="container GListFullWidth"> 
    <div class="row"> 
     <div class="col-md-12"> 

     <!-- owl-carousel --> 
     <div id="owl-onpage"> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/800/500/sports/6/" class="img-responsive" /></a></div> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/600/400/sports/7/" class="img-responsive" /></a></div> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/700/550/sports/8/" class="img-responsive" /></a></div> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/300/600/sports/9/" class="img-responsive" /></a></div> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/800/500/sports/6/" class="img-responsive" /></a></div> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/600/400/sports/7/" class="img-responsive" /></a></div> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/700/550/sports/8/" class="img-responsive" /></a></div> 
      <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/300/600/sports/9/" class="img-responsive" /></a></div> 
     </div> 
     <!-- /owl-carousel --> 

     <span class="caption text-muted">A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators.</span> 

     <!-- modalGallery --> 
     <div class="modal" id="GListModalGallery" tabindex="-1" role="dialog" aria-labelledby="GListModalGalleryLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        </div> 
        <div class="modal-body"> 
         <div id="owl-modal"> 
          <div class="item"><img src="http://lorempixel.com/800/500/sports/6/" /></div> 
          <div class="item"><img src="http://lorempixel.com/600/400/sports/7/" /></div> 
          <div class="item"><img src="http://lorempixel.com/700/550/sports/8/" /></div> 
          <div class="item"><img src="http://lorempixel.com/300/600/sports/9/" /></div> 
          <div class="item"><img src="http://lorempixel.com/800/500/sports/6/" /></div> 
          <div class="item"><img src="http://lorempixel.com/600/400/sports/7/" /></div> 
          <div class="item"><img src="http://lorempixel.com/700/550/sports/8/" /></div> 
          <div class="item"><img src="http://lorempixel.com/300/600/sports/9/" /></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /modalGallery --> 

    </div><!-- /col-md-12 --> 
</div><!-- /row -->

來源

2015-09-04 ferocesalatino

你必須清理你的HTML和刪除其ID是owl-modal在div裏面的一切。然後，你必須附加一個事件，當用戶點擊鏈接到div，該類別是item。

您將所有內容都準備好了。

Initialyze主轉盤

var owl = $("#owl-onpage"); 
owl.owlCarousel({ 
    itemsCustom : [ 
     [0, 2], 
     [979, 4] 
    ], 
    navigation : true, 
    pagination: false, 
    itemsScaleUp: true, 
    addClassActive: true, 
    navigationText: [ 
     "<i class='fa fa-chevron-left'></i>", 
     "<i class='fa fa-chevron-right'></i>" 
    ], 
});

當用戶點擊商品圖片添加事件

$('#owl-onpage .item a').on('click', function() {});

獲取當前項目的用戶點擊，並把它插入modal-body DIV

var theSrc = $(this).find('img').attr('src'); 
var owlModal = $('#owl-modal'); 
owlModal.empty(); 
var item = $('<div>', {'class' : 'item'}).appendTo(owlModal); 
$('<img>', {'src' : theSrc}).appendTo(item);

由於模態將學習HTML項目，您必須每次都清空它。我們還必須告訴它添加額外的圖像（即所有除一個用戶點擊）

// Add others images 
$('#owl-onpage .item a').each(function (i,e) { 
    var otherSrc = $(e).find('img').attr('src'); 
    var item = $('<div>', {'class' : 'item'}).appendTo(owlModal); 
    $('<img>', {'src' : otherSrc}).appendTo(item); 
});

調用模式中新傳送帶

// Call the carousel after clicked on 'a' 
owlModal.owlCarousel({ 
    singleItem:true, 
    navigation : true, 
    pagination: false, 
    navigationText: [ 
     "<i class='fa fa-chevron-left'></i>", 
     "<i class='fa fa-chevron-right'></i>" 
    ], 
});

然後，允許去除模態當傳送帶關閉或點擊close button時。

$('#GListModalGallery').unbind().on('hidden.bs.modal', function() { 
    owlModal.data('owlCarousel').destroy(); 
});

請注意，我已經添加unbind()去除附着在模式（一個或多個）事件。

FINAL JSFIDDLE

來源

2015-09-04 14:25:08 Zl3n

@ferocesalatino最終評論。我會更新我的帖子。成功 – Zl3n

如何在點擊貓頭鷹傳送帶中的圖像後在引導模式中打開精確圖像？

回答

相關問題