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

Question

我希望我能把这个说得尽可能清楚。我的单页滚动投资组合页面上有一个投资组合部分，我想在每个投资组合项目 div 上有两个 link，当鼠标悬停在...上时会显示一个 link触发图像弹出窗口将显示 individual 项目的细节图像，以及将 link 到我正在展示的完成作品的 url 的图像。对于 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

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




});

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

Portfolio Page Using MagnificPopup - Popup to link and popup to image on each portfolio item

javascript

jquery

magnific-popup