Я работаю над галереей 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="#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="#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="#gallery1" class="open-gallery-link">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" width="172" height="115" />
</a>