投资组合页面使用MagnificPopup - 弹出窗口链接并弹出到每个投资组合项目的图像

Question

我希望我能尽可能清楚地说明这一点。我在我的单页滚动投资组合页面上有一个投资组合部分，我想在每个投资组合项目div上有两个链接，显示何时悬停...一个链接将触发图像弹出窗口将显示个人详细信息的图像项目和一个将链接到我正在展示的已完成工作的网址。对于MagnificPopup，似乎我只能有一个触发器或另一个触发器。感谢您的帮助！

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

所以在阅读我的问题时，我并没有很好地澄清。那些好奇的人。我只需要创建另一个初始化，让我的徽标弹出一个图像模式，我的网站转到一个单独的网址。

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




});