File: templates/wggallery_gallery_jssor_bullets.tpl

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

<{if $jssor_bullets == 'bullet-031'}>
        <style>
            .jssorb031 {position:absolute;}
            .jssorb031 .i {position:absolute;cursor:pointer;}
            .jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
            .jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
            .jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
            .jssorb031 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb031" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-032'}>
        <style>
            .jssorb032 {position:absolute;}
            .jssorb032 .i {position:absolute;cursor:pointer;}
            .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
            .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
            .jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
            .jssorb032 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-033'}>
        <style>
            .jssorb033 {position:absolute;}
            .jssorb033 .i {position:absolute;cursor:pointer;}
            .jssorb033 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
            .jssorb033 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
            .jssorb033 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
            .jssorb033 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb033" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720,13800,11400,13800z"></path>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-034'}>
        <style>
            .jssorb034 {position:absolute;}
            .jssorb034 .i {position:absolute;cursor:pointer;}
            .jssorb034 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
            .jssorb034 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
            .jssorb034 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
            .jssorb034 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb034" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720,13800,11400,13800z"></path>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-035'}>
        <style>
            .jssorb035 {position:absolute;}
            .jssorb035 .i {position:absolute;cursor:pointer;}
            .jssorb035 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
            .jssorb035 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
            .jssorb035 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
            .jssorb035 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb035" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <rect class="b" x="2200" y="2200" width="11600" height="11600"></rect>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-036'}>
        <style>
            .jssorb036 {position:absolute;}
            .jssorb036 .i {position:absolute;cursor:pointer;}
            .jssorb036 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
            .jssorb036 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
            .jssorb036 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
            .jssorb036 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb036" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <rect class="b" x="2200" y="2200" width="11600" height="11600"></rect>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-051'}>
        <style>
            .jssorb051 .i {position:absolute;cursor:pointer;}
            .jssorb051 .i .b {fill:#fff;fill-opacity:0.5;}
            .jssorb051 .i:hover .b {fill-opacity:.7;}
            .jssorb051 .iav .b {fill-opacity: 1;}
            .jssorb051 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb051" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-052'}>
        <style>
            .jssorb052 .i {position:absolute;cursor:pointer;}
            .jssorb052 .i .b {fill:#000;fill-opacity:0.3;}
            .jssorb052 .i:hover .b {fill-opacity:.7;}
            .jssorb052 .iav .b {fill-opacity: 1;}
            .jssorb052 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb052" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-053'}>
        <style>
            .jssorb053 .i {position:absolute;cursor:pointer;}
            .jssorb053 .i .b {fill:#fff;fill-opacity:0.5;}
            .jssorb053 .i:hover .b {fill-opacity:.7;}
            .jssorb053 .iav .b {fill-opacity: 1;}
            .jssorb053 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb053" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720,13800,11400,13800z"></path>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-054'}>
        <style>
            .jssorb054 .i {position:absolute;cursor:pointer;}
            .jssorb054 .i .b {fill:#000;fill-opacity:0.3;}
            .jssorb054 .i:hover .b {fill-opacity:.7;}
            .jssorb054 .iav .b {fill-opacity: 1;}
            .jssorb054 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb054" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720,13800,11400,13800z"></path>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-055'}>
        <style>
            .jssorb055 .i {position:absolute;cursor:pointer;}
            .jssorb055 .i .b {fill:#fff;fill-opacity:0.5;}
            .jssorb055 .i:hover .b {fill-opacity:.7;}
            .jssorb055 .iav .b {fill-opacity: 1;}
            .jssorb055 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb055" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <rect class="b" x="2200" y="2200" width="11600" height="11600"></rect>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-056'}>
        <style>
            .jssorb056 .i {position:absolute;cursor:pointer;}
            .jssorb056 .i .b {fill:#000;fill-opacity:0.3;stroke:#fff;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.7;}
            .jssorb056 .i:hover .b {fill-opacity:.7;}
            .jssorb056 .iav .b {fill-opacity: 1;}
            .jssorb056 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb056" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <rect class="b" x="2200" y="2200" width="11600" height="11600"></rect>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-057'}>
        <style>
            .jssorb057 .i {position:absolute;cursor:pointer;}
            .jssorb057 .i .b {fill:none;stroke:#fff;stroke-width:2000;stroke-miterlimit:10;stroke-opacity:0.4;}
            .jssorb057 .i:hover .b {stroke-opacity:.7;}
            .jssorb057 .iav .b {stroke-opacity: 1;}
            .jssorb057 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb057" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5000"></circle>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-058'}>
        <style>
            .jssorb058 .i {position:absolute;cursor:pointer;}
            .jssorb058 .i .b {fill:none;stroke:#000;stroke-width:2000;stroke-miterlimit:10;stroke-opacity:0.3;}
            .jssorb058 .i:hover .b {stroke-opacity:.7;}
            .jssorb058 .iav .b {stroke-opacity: 1;}
            .jssorb058 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb058" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5000"></circle>
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-061'}>
        <style type="text/css">
            .jssorb061 {position:absolute;}
            .jssorb061 .i {position:absolute;cursor:pointer;}
            .jssorb061 .i .b {fill:#fff;stroke:#000;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
            .jssorb061 .i:hover .b {fill-opacity:.7;}
            .jssorb061 .iav .b {fill:#00fbff;stroke:#00bbff;stroke-opacity:.7;stroke-width:2000;}
            .jssorb061 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb061" style="bottom:16px;right:16px;">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800">
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-062'}>
        <style type="text/css">
            .jssorb062 {position:absolute;}
            .jssorb062 .i {position:absolute;cursor:pointer;}
            .jssorb062 .i .b {fill:#000;fill-opacity:.5;stroke:#fff;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
            .jssorb062 .i:hover .b {fill-opacity:.8;}
            .jssorb062 .iav .b {fill:#00fbff;fill-opacity:1;stroke:#00bbff;stroke-opacity:.7;stroke-width:2000;}
            .jssorb062 .iav:hover .b {fill-opacity:.6;}
            .jssorb062 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb062" style="bottom:16px;right:16px;">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800">
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-063'}>
        <style type="text/css">
            .jssorb063 {position:absolute;}
            .jssorb063 .i {position:absolute;cursor:pointer;}
            .jssorb063 .i .b {fill:#fff;stroke:#000;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
            .jssorb063 .i:hover .b {fill-opacity:.7;}
            .jssorb063 .iav .b {fill:#ffe200;stroke:#ffaa00;stroke-opacity:.7;stroke-width:2000;}
            .jssorb063 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb063" style="bottom:16px;right:16px;">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800">
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-064'}>
        <style type="text/css">
            .jssorb064 {position:absolute;}
            .jssorb064 .i {position:absolute;cursor:pointer;}
            .jssorb064 .i .b {fill:#000;fill-opacity:.5;stroke:#fff;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
            .jssorb064 .i:hover .b {fill-opacity:.8;}
            .jssorb064 .iav .b {fill:#ffe200;fill-opacity:1;stroke:#ffaa00;stroke-opacity:.7;stroke-width:2000;}
            .jssorb064 .iav:hover .b {fill-opacity:.6;}
            .jssorb064 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb064" style="bottom:16px;right:16px;">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800">
                </svg>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-071'}>
        <style>
            .jssorb071 .i {position:absolute;color:#fff;font-family:"Helvetica neue",Helvetica,Arial,sans-serif;text-align:center;cursor:pointer;z-index:0;}
            .jssorb071 .i .b {fill:#000;opacity:.2;}
            .jssorb071 .i:hover {opacity:.7;}
            .jssorb071 .iav {color:#000;}
            .jssorb071 .iav .b {fill:#fff;opacity:1;}
            .jssorb071 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb071" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:24px;height:24px;font-size:12px;line-height:24px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;">
                    <circle class="b" cx="8000" cy="8000" r="6666.7"></circle>
                </svg>
                <div data-u="numbertemplate" class="n"></div>
            </div>
        </div>
<{/if}>

<{if $jssor_bullets == 'bullet-072'}>
        <style>
            .jssorb072 .i {position:absolute;color:#000;font-family:"Helvetica neue",Helvetica,Arial,sans-serif;text-align:center;cursor:pointer;z-index:0;}
            .jssorb072 .i .b {fill:#fff;opacity:.3;}
            .jssorb072 .i:hover {opacity:.7;}
            .jssorb072 .iav {color:#fff;}
            .jssorb072 .iav .b {fill:#000;opacity:.5;}
            .jssorb072 .i.idn {opacity:.3;}
        </style>
        <div data-u="navigator" class="jssorb072" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:24px;height:24px;font-size:12px;line-height:24px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;">
                    <circle class="b" cx="8000" cy="8000" r="6666.7"></circle>
                </svg>
                <div data-u="numbertemplate" class="n"></div>
            </div>
        </div>
<{/if}>

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