포트폴리오 페이지 MagnificPopup 사용 - 팝업을 사용하여 각 포트폴리오 항목의 이미지로 링크 및 팝업

Question

가능한 한 명확하게 작성할 수 있기를 바랍니다. 내 포트폴리오의 한 페이지 스크롤 포트폴리오 페이지에 포트폴리오 섹션이 있습니다. 각 포트폴리오 항목 div에 두 개의 링크가있어서, 마우스를 올리면 표시됩니다 ... 이미지 팝업을 트리거하는 링크 하나가 개별 세부 정보 이미지를 표시합니다. 프로젝트와 내가 보여주고있는 완성 된 작품의 URL에 링크 될 것입니다. Magnificopopup에는 하나의 방아쇠 또는 다른 방아쇠 만있을 수 있습니다. 도와 주셔서 감사합니다!

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

그래서 내 질문을 통해 독서에, 나는 아주 잘 명확히하지 않았다. 호기심 많은 분들. 내 로고가 이미지 모달에 팝업되게하고 웹 사이트가 별도의 URL로 이동하도록 다른 초기화를 만들어야했습니다.

// 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' 
    } 




});