Portfolio pop up gallery

Below is portfolio pop up gallery code example. Apply popgallery-widget class as display in below code example highlighted line no. 5. It is javascript hook to apply pop up on thumb images.

image

<!-- Portfolio section -->
<section class="portfolio-section portfolio-section-2">
    <div class="container">
        ...
        <ul class="rw eq3 mb10 gt10 popgallery-widget">
 
            <li class="cl">
                <div class="portfolio-box portfolio-box1">
                    <div class="overlay">
                        <a href="images/800x800_1.jpg" title="This is title of image" class="pop-img"><i class="fa fa-search"></i></a>
                        <div class="caption">
                            <h3 class="hd">Consetetur sadipscing</h3>
                            <p class="txt">Lorem ipsum dolor sit amet</p>
                        </div>
                    </div><!-- /.overlay -->
                    <img src="images/800x800_1.jpg" alt="image" >
                </div><!-- /.portfolio-box -->
            </li><!-- /.cl -->
             
            <li class="cl">
            ...
            </li><!-- /.cl -->
             
        </ul><!-- /.rw -->
    </div>
</section>
<!-- / Portfolio section -->
  • Set large pop up image path on href=”images/800x800_1.jpg” and title=”…” as display on line no. 10
  • Add caption details which display on hover of thumb image as display on line no. 12 & 13
  • Set thumb image as display on line no. 16

 

Related Articles