Работя върху галерия magnific-popup и се опитвам да постигна дизайн на галерията, както е показано на изображението по-долу
Досега успях да го направя така, както е показано на изображението. Но винаги показва изображение от първото изображение, независимо на кой магьосник кликваме в галерията с изображения.
ето примера за codepen http://codepen.io/anon/pen/LvFxH
Не съм сигурен как да го поправя, така че да може да започне последователността от изображението, върху което щракне потребителят, и също така да скрие лявата или дясната стрелка, това е първото или последното изображение в галерията
КОД
<div id="gallery1" class="mfp-hide">
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is the caption of the image along with some other information</span>
<span class="d-hr">Download</span>
<span class="d-date">01-01-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image two</span>
<span class="d-hr">Download</span>
<span class="d-date">02-02-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image three</span>
<span class="d-hr">Download</span>
<span class="d-date">03-03-2014</span>
</div>
</div>
</div>
<a href="/bg#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" width="172" height="115" />
</a>
<a href="/bg#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" width="172" height="115" />
</a>
<a href="/bg#gallery1" class="open-gallery-link">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" width="172" height="115" />
</a>