CODEWITHSUNDEEP
javascriptjquerymagnific-popup
Katie Sak
Katie Sak

Reputation: 119

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

I hope I can make this as clear as possible. I have a portfolio section on my one page scroll portfolio page, I want to have two links on each portfolio item div, which show when hovered over... one link which will trigger an image popup will show an image of details of the individual project and one which will link to the url of the finished work I am showcasing. For MagnificPopup it seems that I can only have one trigger or the other. Thank you for the help! picture of 

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

Upvotes: 1

Views: 695

Answers (1)

Katie Sak
Katie Sak

Reputation: 119

So in reading over my question, I didn't clarify very well. Those of you who are curious. I just needed to create another initialization to have my logos pop up to an image modal and my websites go to a seperate 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'
    }




});

Upvotes: 1

Related Questions