File: templates/wggallery_gallery_jssor_thumbnails.tpl

<!--#region Thumbnail Navigator Skin Begin -->
<!-- Help: https://www.jssor.com/development/slider-with-thumbnail-navigator.html -->

<{if $jssor_thumbnails == 'thumbnail-051'}>
        <style>
            .jssort051 .p {position:absolute;top:0;left:0;background-color:#000;}
            .jssort051 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.45;}
            .jssort051 .p:hover .t{opacity:.8;}
            .jssort051 .pav .t, .jssort051 .pdn .t, .jssort051 .p:hover.pdn .t{opacity:1;}
        </style>
        <div data-u="thumbnavigator" class="jssort051" style="position:absolute;left:0;bottom:0;width:<{$jssor_maxwidth}>px;height:100px;" data-autocenter="1" data-scale-bottom="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p" style="width:200px;height:100px;">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
        </div>
<{/if}>

<{if $jssor_thumbnails == 'thumbnail-052'}>
        <style>
            .jssort052 .p {position:absolute;top:0;left:0;background-color:#fff;}
            .jssort052 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.45;}
            .jssort052 .p:hover .t{opacity:.8;}
            .jssort052 .pav .t, .jssort052 .pdn .t, .jssort052 .p:hover.pdn .t{opacity:1;}
        </style>
        <div data-u="thumbnavigator" class="jssort052" style="position:absolute;left:0;bottom:0;width:<{$jssor_maxwidth}>px;height:100px;" data-autocenter="1" data-scale-bottom="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p" style="width:200px;height:100px;">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
        </div>
<{/if}>

<{if $jssor_thumbnails == 'thumbnail-061'}>
        <style>
            .jssort061 .p {position:absolute;top:0;left:0;border:2px solid rgba(255,255,255,.5);box-sizing:border-box;}
            .jssort061 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}
            .jssort061 .p:hover {border-color:rgba(0,0,0,.6);}
            .jssort061 .pav, .jssort061 .p:hover.pdn{border-color:#000;}
            .jssort061 .pav .t, .jssort061 .p:hover.pdn .t{opacity:1;}
        </style>
        <div data-u="thumbnavigator" class="jssort061" style="position:absolute;left:0;bottom:0;width:<{$jssor_maxwidth}>px;height:100px;" data-autocenter="1" data-scale-bottom="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p" style="width:190px;height:84px;">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
        </div>
<{/if}>

<{if $jssor_thumbnails == 'thumbnail-062'}>
        <style>
            .jssort062 .p {position:absolute;top:0;left:0;border:2px solid rgba(0,0,0,.4);box-sizing:border-box;}
            .jssort062 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}
            .jssort062 .p:hover {border-color:rgba(255,255,255,.6);}
            .jssort062 .pav, .jssort062 .p:hover.pdn{border-color:#fff;}
            .jssort062 .pav .t, .jssort062 .p:hover.pdn .t{opacity:1;}
        </style>
        <div data-u="thumbnavigator" class="jssort062" style="position:absolute;left:0;bottom:0;width:<{$jssor_maxwidth}>px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p" style="width:190px;height:84px;">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
        </div>
<{/if}>

<{if $jssor_thumbnails == 'thumbnail-091'}>
        <div u="thumbnavigator" style="position:absolute;bottom:0;left:0;width:<{$jssor_maxwidth}>px;height:50px;color:#FFF;overflow:hidden;cursor:default;background-color:rgba(0,0,0,.5);">
            <div u="slides">
                <div u="prototype" style="position:absolute;top:0;left:0;width:<{$jssor_maxwidth}>px;height:50px;">
                    <div u="thumbnailtemplate" style="position:absolute;top:0;left:0;width:100%;height:100%;font-family:verdana;font-weight:normal;line-height:50px;font-size:16px;padding-left:10px;box-sizing:border-box;"></div>
                </div>
            </div>
        </div>
<{/if}>

<{if $jssor_thumbnails == 'thumbnail-092'}>
        <div u="thumbnavigator" style="position:absolute;bottom:0;left:0;width:<{$jssor_maxwidth}>px;height:50px;color:#000;overflow:hidden;cursor:default;background-color:rgba(255,255,255,.5);">
            <div u="slides">
                <div u="prototype" style="position:absolute;top:0;left:0;width:<{$jssor_maxwidth}>px;height:50px;">
                    <div u="thumbnailtemplate" style="position:absolute;top:0;left:0;width:100%;height:100%;font-family:verdana;font-weight:normal;line-height:50px;font-size:16px;padding-left:10px;box-sizing:border-box;"></div>
                </div>
            </div>
        </div>
<{/if}>

<{if $jssor_thumbnails == 'thumbnail-101'}>
        <style>
            .jssort101 .p {position: absolute;top:0;left:0;box-sizing:border-box;background:#000;}
            .jssort101 .p .cv {position:relative;top:0;left:0;width:100%;height:100%;border:2px solid #000;box-sizing:border-box;z-index:1;}
            .jssort101 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;visibility:hidden;}
            .jssort101 .p:hover .cv, .jssort101 .p.pdn .cv {border:none;border-color:transparent;}
            .jssort101 .p:hover{padding:2px;}
            .jssort101 .p:hover .cv {background-color:rgba(0,0,0,6);opacity:.35;}
            .jssort101 .p:hover.pdn{padding:0;}
            .jssort101 .p:hover.pdn .cv {border:2px solid #fff;background:none;opacity:.35;}
            .jssort101 .pav .cv {border-color:#fff;opacity:.35;}
            .jssort101 .pav .a, .jssort101 .p:hover .a {visibility:visible;}
            .jssort101 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}
            .jssort101 .pav .t, .jssort101 .p:hover .t{opacity:1;}
        </style>
        <div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0;bottom:0;width:<{$jssor_maxwidth}>px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p" style="width:190px;height:84px;">
                    <div data-u="thumbnailtemplate" class="t"></div>
                    <svg viewbox="0 0 16000 16000" class="cv">
                        <circle class="a" cx="8000" cy="8000" r="3238.1"></circle>
                        <line class="a" x1="6190.5" y1="8000" x2="9809.5" y2="8000"></line>
                        <line class="a" x1="8000" y1="9809.5" x2="8000" y2="6190.5"></line>
                    </svg>
                </div>
            </div>
        </div>
<{/if}>
<{if $jssor_thumbnails == 'thumbnail-111'}>
        <style>
            .jssort111 .p {position:absolute;top:0;left:0;width:200px;height:100px;background-color:#000;}
            .jssort111 .p img {position:absolute;top:0;left:0;width:100%;height:100%;}
            .jssort111 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.45;}
            .jssort111 .p:hover .t{opacity:.8;}
            .jssort111 .pav .t, .jssort111 .pdn .t, .jssort111 .p:hover.pdn .t{opacity:1;}
            .jssort111 .ti {position:absolute;bottom:0px;left:0px;width:100%;height:28px;line-height:28px;text-align:center;font-size:12px;color:#fff;background-color:rgba(0,0,0,.3)}
            .jssort111 .pav .ti, .jssort111 .pdn .ti, .jssort111 .p:hover.pdn .ti{color:#000;background-color:rgba(255,255,255,.6);}
        </style>
        <div data-u="thumbnavigator" class="jssort111" style="position:absolute;left:0;bottom:0;width:<{$jssor_maxwidth}>px;height:100px;cursor:default;" data-autocenter="1" data-scale-bottom="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
        </div>
<{/if}>
<{if $jssor_thumbnails == 'thumbnail-121'}>
        <style>
            .jssort121 .p {position:absolute;top:0;left:0;border-bottom:1px solid rgba(255,255,255,.2);box-sizing:border-box;color:#fff;background:rgba(0,0,0,.1);opacity:.7;}
            .jssort121 .p .t {position:absolute;padding:10px;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:24px;overflow:hidden;}
            .jssort121 .p .i {margin-right:10px;position:relative;top:0;left:0;width:96px;height:48px;border:none;float:left;}
            .jssort121 .pav, .jssort121 .p:hover {color:#000;background:rgba(255,255,255,.7);}
            .jssort121 .p:hover {opacity:.75;}
            .jssort121 .pav, .jssort121 .p:hover.pdn {opacity:1;}
            .jssort121 .ti {position:relative;font-size:14px;font-weight:bold;}
            .jssort121 .d {position:relative;font-size:12px;}
            /*.jssort121 .d:before {content:'\a';white-space:pre;}*/
        </style>
        <div data-u="thumbnavigator" class="jssort121" style="position:absolute;left:0;top:0;width:268px;height:380px;overflow:hidden;cursor:default;" data-autocenter="2" data-scale-left="0.75">
            <div data-u="slides">
                <div data-u="prototype" class="p" style="width:268px;height:68px;">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
        </div>
<{/if}>


















<!--#endregion Thumbnail Navigator Skin End -->