Portfolio-Seite Verwenden von MagnificPopup - Popup zum Verknüpfen und Popup-Bild für jedes Portfolio-Objekt

Question

Ich hoffe, ich kann dies so klar wie möglich machen. Ich habe einen Portfolio-Bereich auf meiner Seite Scroll-Portfolio-Seite, ich möchte zwei Links auf jedem Portfolio-Element div, die zeigen, wenn über ... ein Link, der ein Bild-Popup wird ein Bild von Details des Individuums zeigt Projekt und eines, das auf die URL der fertigen Arbeit verlinken wird, die ich präsentiere. Für MagnificPopup scheint es, dass ich nur einen oder den anderen Auslöser haben kann. Danke für die Hilfe!

Javascript 

    // Initialize MagnificPopup Plugin 
    $('.filtr-container').magnificPopup({ 
     type:'inline', 
     delegate: 'a', 
     gallery:{enabled:true}, 
     zoom:{ 
      enabled:true, 
      duration: 300, 
      easing: 'ease-in-out' 
     } 
    }); 

HTML 




    <!-- ============================= 
     5. Start Portfolio 
    =============================== --> 
    <div class="portfolio section" id="4"> 
     <div class="container-fluid"> 
     <div class="row portfolio-holder"> 
      <h1 class="wow fadeInUp" data-wow-duration="1.5s">PORTFOLIO</h1> 
     <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1"> 
     <div class="row filtr-container wow fadeInUp" data-wow-duration="1.5s"> 

     <!-- ===== Single Portfolio Item Start ===== --> 
       <div class="col-sm-4 col-xs-6 filtr-item" data-category="1"> 
       <div class="item-holder"> 

<!-- ===== First Link I want ===== --> 
<a href="https://www.testingtest.com/" target="blank" title="Project Title 04"> 

<!-- ===== Second Link I want ===== --> 
<a href="image/Portfolio/item3.jpg" title="Project Title 03"> 


           <img src="image/Portfolio/item1.jpg" alt="item1"> 
        <div class="item-caption"> 
         <h2>Project <br> Title</h2> 

         <p>Graphic Design</p> 
          <p>Tools Used: HTML, CSS, JSS</p> 
         <div class="item-created">Jan 2017 </div> 

        </div> 
<!-- item-caption --> 
        </a> 
       </div> <!-- item-holder --> 
       </div> <!-- filtr-item --> 

       <!-- ===== Single Portfolio Item End ===== --> 




      </div> <!-- filtr-container --> 
      </div> <!-- col-sm-10 --> 
     </div> <!-- row portfolio-holder --> 
     </div> <!-- container-fluid --> 
    </div> <!-- portfolio --> 

Answer 1

So beim Lesen über meine Frage, ich habe nicht sehr gut klären. Diejenigen von euch, die neugierig sind. Ich musste nur eine weitere Initialisierung erstellen, damit meine Logos zu einem Image-Modal werden und meine Websites auf eine separate URL gehen.

// Initialize MagnificPopup Plugin 
$('.filtr-container').magnificPopup({ 
    type:'div', 
    delegate: 'button', 
    gallery:{enabled:true}, 
    zoom:{ 
     enabled:true, 
     duration: 300, 
     easing: 'ease-in-out' 
    } 

     }); 

    $('.image-item').magnificPopup({ 

    type:'image', 
    delegate: 'a', 
    gallery:{enabled:true}, 
    zoom:{ 
     enabled:true, 
     duration: 300, 
     easing: 'ease-in-out' 
    } 




});