2

プロジェクトを表示するためにOWL Carouselを使用していますが、この埋め込みコードをクリックした画像に置き換えたいと考えています。

<embed src="http://sample.biz/scratch.swf" wmode="direct" quality="high" flashvars="project_filePath=http://sample.biz/public/upload/scratchproject/2016/02/Ignition.sb2" width="480px" height="400px" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash">

ユーザーがいずれかの画像をクリックしたときに埋め込みコードを表示したい。

でこれを行う方法についてのアイデアOWL Carousel。

私の JSFiddle。

HTML 部分:

<div id="example" class="carousel">
  <div class="item">
    <img src="http://dummyimage.com/vga" alt="" />
  </div>
  <div class="item">
    <img src="http://dummyimage.com/vga" alt="" />
  </div>
  <div class="item">
    <img src="http://dummyimage.com/vga" alt="" />
  </div>
  <div class="item">
    <img src="http://dummyimage.com/vga" alt="" />
  </div>
</div>

jQuery の部分:

var currentIndex = 0;
$(document).ready(function() {

  $("#example").owlCarousel({
    items: 5,
    singleItem: true,
    afterMove: function() {
      currentIndex = this.currentItem;
    }
  }).on('changed.owl.carousel', function(property) {
    currentIndex = property.item.index;
    console.log(currentIndex);
  });

});

$(document.body).on('click', '#example .item img', function() {
  var embedData = '<embed src="http://sample.biz/scratch.swf" wmode="direct" quality="high" flashvars="project_filePath=http://sample.biz/public/upload/scratchproject/2016/02/Ignition.sb2" width="480px" height="400px" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash">';
});
4

1 に答える 1

0

更新されたフィドル

次を使用できますreplaceWith。

$(this).replaceWith(embedData);

お役に立てれば。

于 2016-03-02T10:13:24.247 に答える