Hello!
I renew my support just to solve this problem.
I need a "photo gallery" - and I try to use the flexslider gallery.
And Create each "Album Gallery" like this:
<article class="portfolio-item pf-icons pf-illustrations clearfix">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-speed="400" data-pause="4000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><img src="images/2016-12-22/001.jpg" alt="Gallery 01"></div>
<div class="slide"><img src="images/2016-12-22/002.jpg" alt="Gallery 01"></div>
<div class="slide"><img src="images/2016-12-22/003.jpg" alt="Gallery 01"></div>
<div class="slide"><img src="images/2016-12-22/004.jpg" alt="Gallery 01"></div>
</div>
</div>
</div>
<div class="portfolio-overlay" data-lightbox="gallery">
<a href="images/2016-12-22/001.jpg" class="center-icon" data-lightbox="gallery-item" title="Person 01"><i class="icon-line-stack-2"></i></a>
<a href="images/2016-12-22/002.jpg" class="hidden" data-lightbox="gallery-item" title="Person 02"><i class="icon-line-stack-2"></i></a>
<a href="images/2016-12-22/003.jpg" class="hidden" data-lightbox="gallery-item" title="Person 03"><i class="icon-line-stack-2"></i></a>
<a href="images/2016-12-22/004.jpg" class="hidden" data-lightbox="gallery-item" title="Person 04"><i class="icon-line-stack-2"></i></a>
<a href="images/2016-12-22/005.jpg" class="hidden" data-lightbox="gallery-item" title="Person 05"><i class="icon-line-stack-2"></i></a>
<a href="images/2016-12-22/006.jpg" class="hidden" data-lightbox="gallery-item" title="Person 06"><i class="icon-line-stack-2"></i></a>
</div>
</div>
<div class="portfolio-desc">
<h3 style="color: #BA9058">Gallery 01</h3>
<span>DECEMBER 2016</span>
</div>
</article>This works fine - but with TWO ISSUES:
1 - IT'S NOT RESPONSIVE. If I open in small devices each album appears very very small on screen
2 - I want to click on each photo - and open the same photo - not the first photo of the album (because this is a little confuse for the user - click to see a photo and open another)
I GOT A SOLUTION (RESPONSIVE + ZOOM SELECTED IMAGE / not first of the album) - BUT.. Its appears to have a bug - because its DUPLICATE first and last photo - and sometimes the "selected image" - when clicked - disappear from the slider.
<div class=”col-md-4″>
<div class=”oc-item”>
<div class=”iportfolio”>
<div class=”portfolio-image”>
<div class=”fslider” data-arrows=”false” data-speed=”400″ data-pause=”4000″>
<div class=”flexslider”>
<div class=”slider-wrap” data-lightbox=”gallery”>
<div class=”slide”>
<div>
<img src="images/2016-12-18/001.jpg" alt="PERSON 01">
</div>
<div class=”portfolio-overlay”>
<a href="images/2016-12-18/001.jpg" class="center-icon" data-lightbox="gallery-item" title="PERSON 01">
<i class=”icon-line-stack-2″></i>
</div>
</div>
<div class=”slide”>
<div>
<img src="images/2016-12-18/002.jpg" alt="PERSON 02">
</div>
<div class=”portfolio-overlay”>
<a href="images/2016-12-18/002.jpg" class="center-icon" data-lightbox="gallery-item" title="PERSON 02">
<i class=”icon-line-stack-2″></i>
</div>
</div>
<div class=”slide”>
<div>
<img src="images/2016-12-18/003.jpg" alt="PERSON 03">
</div>
<div class=”portfolio-overlay”>
<a href="images/2016-12-18/003.jpg" class="center-icon" data-lightbox="gallery-item" title="PERSON 03">
<i class=”icon-line-stack-2″></i>
</div>
</div>
<div class=”slide”>
<div>
<img src="images/2016-12-18/004.jpg" alt="PERSON 04">
</div>
<div class=”portfolio-overlay”>
<a href="images/2016-12-18/004.jpg" class="center-icon" data-lightbox="gallery-item" title="PERSON 04">
<i class=”icon-line-stack-2″></i>
</div>
</div>
<div class=”slide”>
<div>
<img src="images/2016-12-18/001.jpg" alt="PERSON 05">
</div>
<div class=”portfolio-overlay”>
<a href="images/2016-12-18/005.jpg" class="center-icon" data-lightbox="gallery-item" title="PERSON 05">
<i class=”icon-line-stack-2″></i>
</div>
</div>
</div>
</div>
</div>
<div class=”portfolio-desc”>
<h3 style=”color: #BA9058″>Gallery 01</h3>
<span>DECEMBER 2016</span>
</div>
</div>
</div>
</div>
</div>any idea?
tks a lot!
Daniel
EDIT:
I forgot - I got this solution too - but without the overlay with "zoom icon" - to inform the user if he click the image will be enlarged..
This is as far as I could go to solve this.. but - missing the overlay.
<div class="col-md-4">
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-image">
<div class="fslider" data-arrows="false" data-speed="400" data-pause="4000">
<div class="flexslider">
<div class="slider-wrap" data-lightbox="gallery">
<div class="slide">
<a href="images/2016-12-18/001.jpg" class="center-icon" data-lightbox="gallery-item" title="PERSON 01">
<img src="images/2016-12-18/001.jpg" alt="PERSON 01">
</a>
</div>
<div class="slide">
<a href="images/2016-12-18/002.jpg" class="center-icon" data-lightbox="gallery-item" title="PERSON 02">
<img src="images/2016-12-18/002.jpg" alt="PERSON 02">
</a>
</div>
</div>
</div>
</div>
<div class="portfolio-desc">
<h3 style="color: #BA9058">GALLERY 01</h3>
<span>DECEMBER 2016</span>
</div>
</div>
</div>
</div>
</div>and this solution have the "missing image" bug too.. It's not a missing image - It's not happens every time, but - if you click in image2 - zoom image2 - navigate in the complete gallery - foward, backward, foward.. - and close - when you go back to site - the slider put image2 as first image, then the second image was image1 - then we have now a 3rd image (none appears) - and then return to image2 (as first now) > image1 > none > image2 > image1 > none...
If the slider has 10 images and you click on image4.. when returns >
image4 > image1 > none > none > none > none > none > none > none > none > image4 > image1 > none...
The clicked image goes to first - image1 to second - and no more images appears.. 2,3,5,6,7,8,9,10... then image4 appears in first - image1 in second, and none again..
I dont know how to "active" this bug.. sometimes happens - sometimes no..