Помощь Как сделать открытие фотки в полный размер?

[ZveeeeR]

Вопрос заключается в том что, имеется шаблон, в нем красиво сделан вывод трейлеров, хочу переделать под картинки, что бы при нажатии на краткую новость открывалась полная картинка.


Часть кода в main.tpl

<section class="layout">
                   <div class="row">
                       <div class="col-md-12">
                           <header class="header-title fx-row fx-middle">
                               <h2 class="title red">Трейлеры</h2> <span> <a href="/podborki/" class="see-all">Еще Трейлеры</a></span> </header>
                           <div class="movies-colections">
                               <ul class="latest-trailers"> {custom category="12" limit="8" template="modules/trailers" navigation="no" cache="no"} </ul>
                           </div>
                       </div>
                   </div>
</section>

вот вторая часть кода из modules/trailers

<li>
   <a class="showTrailer" title="Смотреть трейлер {title}" data-src="{full-link}">
       <div class="img img-fit">
           <img data-src="[xfvalue_image_url_poster]" src="[xfvalue_image_url_poster]" alt="{title}" class="imgloaded">
       </div>
       <div class="title">{title}</div>
       <small class="desktop-only">Сезон 1</small>
   </a>
</li>

А вот так это все выглядит на сайте


а так выглядит при нажатии на пост

 

[DENISSISS2]

Чтобы помочь нужны css стили из шаблона, как минимум.
Полная картинка может выглядеть ошибочно из-за конфликта стилей шаблона.