如何在.magnificPopup（或其他方法）內打開傳送帶？

我試圖在我的網站上點擊縮略圖（投資組合內）後打開旋轉木馬。我的問題是，.magnificPopup使用「圖像」類型：（上爲例共6個，但1此處）如何在.magnificPopup（或其他方法）內打開傳送帶？

// Code used to load, for now, an image 
$('.popup-gallery').magnificPopup({ 
    delegate: 'a', 
    type: 'image', 
    tLoading: 'Loading image #%curr%...', 
    mainClass: 'mfp-img-mobile', 
    gallery: { 
     enabled: true, 
     navigateByImgClick: true, 
     preload: [0, 1] // Will preload 0 - before current, and 1 after the current image 
    }, 
    image: { 
     tError: '<a href="%url%">The image #%curr%</a> could not be loaded.' 
    } 
});

這裏的投資組合框的代碼：

<section class="no-padding" id="portfolio"> 
    <div class="container-fluid"> 
     <div class="row no-gutter popup-gallery"> 
      <div class="col-lg-4 col-sm-6"> 
       <a href="img/portfolio/fullsize/Multiples_App/multiples-1.png" class="portfolio-box"> 
        <img src="img/portfolio/thumbnails/Multiples_App/multiples-1.png" class="img-responsive" alt=""> 
        <div class="portfolio-box-caption"> 
         <div class="portfolio-box-caption-content"> 
          <div class="project-category text-faded"> 
           Category 
          </div> 
          <div class="project-name"> 
           Project Name 
          </div> 
         </div> 
        </div> 
       </a> 
      </div> 
     </div> 
    </div> 
</section>

而這裏的我試圖展示的圖像的彈出式代碼：

<div id="carousel-0" class="carousel slide" style="display:none;"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel-0" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-0" data-slide-to="1"></li> 
      <li data-target="#carousel-0" data-slide-to="2"></li> 
      <li data-target="#carousel-0" data-slide-to="3"></li> 
      <li data-target="#carousel-0" data-slide-to="4"></li> 
      <li data-target="#carousel-0" data-slide-to="5"></li> 
      <li data-target="#carousel-0" data-slide-to="6"></li> 
     </ol> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div class="fill"><img src="img/portfolio/fullsize/Multiples_App/multiples-1.png" alt="" /></div> 
       <div class="carousel-caption"> 
        <h2>Caption 1</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill"><img src="img/portfolio/fullsize/Multiples_App/multiples-2.png" alt="" /></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill"><img src="img/portfolio/fullsize/Multiples_App/multiples-3.png" alt="" /></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill"><img src="img/portfolio/fullsize/Multiples_App/multiples-4.png" alt="" /></div> 
       <div class="carousel-caption"> 
        <h2>Caption 4</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill"><img src="img/portfolio/fullsize/Multiples_App/multiples-5.png" alt="" /></div> 
       <div class="carousel-caption"> 
        <h2>Caption 5</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill"><img src="img/portfolio/fullsize/Multiples_App/multiples-6.png" alt="" /></div> 
       <div class="carousel-caption"> 
        <h2>Caption 6</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="fill"><img src="img/portfolio/fullsize/Multiples_App/multiples-7.png" alt="" /></div> 
       <div class="carousel-caption"> 
        <h2>Caption 7</h2> 
       </div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#carousel-0" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#carousel-0" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
    </div>

來源

2016-07-12 Pomanks

這裏的的jsfiddle的鏈接，但我不能加載任何圖像，比較遺憾的是顯示... https：//開頭的jsfiddle .NET/3dr3swns/2/ – Pomanks

http://codepen.io/dimsemenov/pen/vKrqs –

感謝您的幫助，我想你的工作，然後我修改，但我不能讓這兩個工作......當我按一下按鈕什麼都沒發生。 – Pomanks

順便說一句，這不是我的代碼！ :)我用我的圖像修改了你的功能，它工作正常。試試這個 -

   // Code used to load, for now, an image 
      $('.popup-gallery').magnificPopup({ 
      items: [ 
       { 
       src: 'images/book2.jpg', 
       title: 'Peter & Paul fortress in SPB' 
       }, 
       { 
       src: 'images/book3.jpg', 
       title: 'book 3 ' 
       }, 
       { 
       src: 'images/book2.jpg', 
       title: 'Peter & Paul fortress in SPB' 
       }, 
       { 
       src: 'images/book3.jpg', 
       title: 'book 3 ' 
       } 
      ], 
      gallery: { 
       enabled: true 
      }, 
      type: 'image' // this is a default type 
      });

來源

2016-07-12 14:03:20

我做到了！這不正是我現在想要的，但我有一個開始感謝你！（事實上，它應該從一開始就工作，但我有2個文件命名爲「creative.js」和「creative.min.js」，所以當然min是重寫另一個文件... -_-'我不小心夠了......我會後我要當它這樣做我們該做的，因此它可以幫助別人:)

來源

2016-07-13 12:27:23 Pomanks

好的，所以我想在一個項目中動態地創建一個旋轉木馬，但我認爲這是不可能的，因爲可用的類型..我只是用地雷取代了src引用，並且我有某種旋轉木馬，所以......太棒了！：d – Pomanks

如何在.magnificPopup（或其他方法）內打開傳送帶？

回答

相關問題