A
apradhanJan 11, 2017
Hello I need to add swipe gesture touch in Portfolio lightbox on gallery-item to swipe the images on touch devices (mobile & ipad).
<div id="portfolio" class="portfolio grid-container clearfix">
<article class="portfolio-item pf-graphics pf-illustrations">
<div class="portfolio-image">
<div class="fslider" data-arrows="false">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/6.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/6-1.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/6-2.jpg" alt="Shake It"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/6-3.jpg" alt="Shake It"></a></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery"> <!-- need touch swipe gesture on gallery items lightbox -->
<a href="images/portfolio/full/6.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
<a href="images/portfolio/full/6-1.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/full/6-2.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/full/6-3.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="portfolio-single-gallery.html" class="right-icon"><i class="icon-line-ellipsis"></i></a>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="portfolio-single-gallery.html">Shake It!</a></h3>
<span><a href="#">Illustrations</a>, <a href="#">Graphics</a></span>
</div>
</article>
<article class="portfolio-item pf-illustrations pf-icons">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-speed="650" data-pause="3500" data-animation="fade">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/9.jpg" alt="Bridge Side"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/9-1.jpg" alt="Bridge Side"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/9-2.jpg" alt="Bridge Side"></a></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<a href="images/portfolio/full/9.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
<a href="images/portfolio/full/9-1.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="images/portfolio/full/9-2.jpg" class="hidden" data-lightbox="gallery-item"></a>
<a href="portfolio-single-gallery.html" class="right-icon"><i class="icon-line-ellipsis"></i></a>
</div>
</div>
<div class="portfolio-desc">
<h3><a href="portfolio-single.html">Bridge Side</a></h3>
<span><a href="#">Illustrations</a>, <a href="#">Icons</a></span>
</div>
</article>
</div>