Вопрос? Вставка скриншотов из фильма.

Добрый вечер, не могу справится с проблемой, вставляю скриншоты в заранее созданное доп поле через [thumb].
Должно работать так:
View: https://youtu.be/y2Fruei1esg?t=116
(смотреть с 1:56)
А у меня так :
View: https://youtu.be/g3jrn-umeEs

Код вывода скриншотов :

HTML:

        <ul class="tabs">
            [xfgiven_screens]<li class="current"><span>Скриншоты</span></li>[/xfgiven_screens]
            [xfgiven_trailer]<li><span>Трейлер</span></li>[/xfgiven_trailer]
        </ul>
        [xfgiven_screens]
        <div class="box visible box-screens">
            [xfvalue_screens]
        </div>
        [/xfgiven_screens]

Как сделать так чтобы изначально была уменьшенная копия изображения, а при нажатии увеличивалась, так как показано на видео ?

 

настройка системы - изображения:


Активируешь данный пункт и всё должно быть! Если нет - то возможно что в стилях чего-то не хватает.

 

Сделал, но не помогло, вот как в стилях:

HTML:

.box {display:none; padding:0; margin-bottom:0 !important;}
.box.visible {display:block;}
.box-screens {text-align:center; margin-right:-12px;}
.box img {}
.box .highslide {display:inline-block; width:23.1%; height:110px; overflow:hidden; margin-right:1.5%; margin-bottom:5px;}
.box-screens .highslide + br {display:none;}

 

Исправлено.
В папке /medium не хватало уменьшенных копий изображений, поэтому они не выводились.

 

Если решено,пожалуйста оставляйте решение