Wie öffne ich ein Karussell in einer .magnificPopup (oder anderen Methode)?

Question

Ich versuche auf meiner Website ein Karussell zu öffnen, nachdem ich auf ein Miniaturbild (in einem Portfolio) geklickt habe. Mein Problem ist, dass die .magnificPopup verwendet ein 'Bild' als Typ:

// 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.' 
    } 
}); 

Hier ist der Code der Portfolios-Box (6 insgesamt aber 1 auf exemple hier):

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

Und hier ist der Code meines Karussells, den ich versuche, wie das Bild-Popup anzuzeigen:

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

Answer 1

BTW, es war nicht mein Code! :) Ich habe deine Funktion mit meinen Bildern verändert und es funktioniert einwandfrei. Versuchen Sie, diese -

   // 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 
      }); 

Answer 2

ich es tat !! Es ist nicht genau das, was ich für jetzt will, aber ich habe einen Anfang dank dir! (eigentlich hätte es von Anfang an funktionieren sollen, aber ich hatte zwei Dateien mit den Namen "creative.js" und "creative.min.js", also hat das min das andere übergangen ... -_- 'Ich war nicht vorsichtig Genug ... Ich poste die Sache, die ich tun möchte, wenn es fertig ist, damit es anderen helfen kann :)