<!-- jssor - Слайдер8 *:* Слайдшоу с выбором 360+ эффектов смены слайдов -->
<? //*** 
 $gVar=array('Тип галереи'=>'gallery8_jssor-slider','Id галереи'=>'1456244401', 'Коды эффектов смены слайдов'=>'{$Duration:1200,$Opacity:2}','Выбранные эффекты'=>'Fade','jTransitionsOrder'=>'1','jFillMode'=>'5','gallery_autoplay'=>'true','gallery_play_interval'=>'3000','Ширина слайда'=>'1000','Высота слайда'=>'400','jPauseOnHover'=>'1','jPlayOrientation'=>'1','jOrientation'=>'1','jSpacingX'=>'10','jSpacingY'=>'10','jChanceToShow'=>'1','Положение стрелок по вертикали'=>'140','Отступ стрелки от края'=>'0','Размер шрифта'=>'24','Цвет шрифта /color/'=>'#fff','Цвет фона текстового поля /color/'=>'#000');
//*** 
//$GLOBALS['maxW']=$maxW; $GLOBALS['maxH']=$maxH;
$gallery_name=$gVar['Id галереи'];
?>
					
    <!-- use jssor.slider.mini.js (40KB) instead for release -->
    <!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
 
    <script type="text/javascript" src=<? echo "\"".$root1;?>sg_cm/Jssor/js/jssor.slider0.min.js"></script>
     <script>
        jssor_1_slider_init = function() {
            
            var jssor_1_SlideshowTransitions = [
 <? if ($gVar['Коды эффектов смены слайдов']!='') echo trim($gVar['Коды эффектов смены слайдов'],','); else echo ''?>
            ];
            
            var jssor_1_options = {
              $AutoPlay: <? echo $gVar['gallery_autoplay']?>,
              $FillMode: <? echo $gVar['jFillMode']?>,
			  $AutoPlayInterval: <? echo $gVar['gallery_play_interval']?>, 
//$SlideWidth: <? echo $gVar['Ширина слайда']?>,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: <? echo $gVar['Высота слайда']?>,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
              $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1,
				$ShowLink: true  
              },
              $BulletNavigatorOptions: {
                               //[Optional] Options to specify and enable navigator or not
                    $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                    $SpacingX: <? echo $gVar['jSpacingX']?>,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                    $SpacingY: <? echo $gVar['jSpacingY']?>,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                    $Orientation: <? echo $gVar['jOrientation']?>                                //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
              },
			    $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: <? echo $gVar['jChanceToShow']?>,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            };
            
            var jssor_1_slider = new $JssorSlider$("jssor_1<? echo $gallery_name;?>", jssor_1_options);
            
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, <? echo $gVar['Ширина слайда']?>);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            //responsive code end
        };
    </script>
   <style>
        
        /* jssor slider bullet navigator skin 13 css */
        /*
        .jssorb13 div           (normal)
        .jssorb13 div:hover     (normal mouseover)
        .jssorb13 .av           (active)
        .jssorb13 .av:hover     (active mouseover)
        .jssorb13 .dn           (mousedown)
        */
        .jssorb13 {
            position: absolute;
        }
        .jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
            position: absolute;
            /* size of bullet elment */
            width: 21px;
            height: 21px;
            background: url('sg_cm/Jssor/img//b13.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb13 div { background-position: -5px -5px; }
        .jssorb13 div:hover, .jssorb13 .av:hover { background-position: -35px -5px; }
        .jssorb13 .av { background-position: -65px -5px; }
        .jssorb13 .dn, .jssorb13 .dn:hover { background-position: -95px -5px; }
    </style>
<style>
            /* jssor slider arrow navigator skin 12 css */
            /*
            .jssora12l              (normal)
            .jssora12r              (normal)
            .jssora12l:hover        (normal mouseover)
            .jssora12r:hover        (normal mouseover)
            .jssora12ldn            (mousedown)
            .jssora12rdn            (mousedown)
            */
            .jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url<? echo "(".$root1;?>sg_cm/Jssor/img/a12.png) no-repeat;
                overflow: hidden;
            }

            .jssora12l {
                background-position: -16px -37px;
            }

            .jssora12r {
                background-position: -75px -37px;
            }

            .jssora12l:hover {
                background-position: -136px -37px;
            }

            .jssora12r:hover {
                background-position: -195px -37px;
            }

            .jssora12ldn {
                background-position: -256px -37px;
            }

            .jssora12rdn {
                background-position: -315px -37px;
            }
        </style>

    <div id="jssor_1<? echo $gallery_name;?>" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: <? echo $gVar['Ширина слайда']?>px; height:<? echo $gVar['Высота слайда']?>px; overflow: hidden; visibility: hidden;">
        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
            <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
        </div>
        <div u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: <? echo $gVar['Ширина слайда']?>px; height:<? echo $gVar['Высота слайда']?>px; overflow: hidden;">
<? $x=0; foreach(img($gallery_name) as $i) { ?>
	
            <div style="display: none;">
<? if (isset($i['link'])&&trim($i['link']!='')) echo '<a href="'.$i['link'].'">'?>			
                <img u="image" src="<? echo $i['img']?>" />
<? if (isset($i['link'])&&trim($i['link']!='')) echo '</a>';?>
	<div u="caption" t="CLIP|L" style="text-align:center;position:absolute;left:0;top:0px;width:100%;font-size:<? echo $gVar['Размер шрифта']?>px;color:<? echo $gVar['Цвет шрифта /color/']?>;line-height:1.4; background:<? echo $gVar['Цвет фона текстового поля /color/']?>; opacity: 0.5;"><? echo trim($i['title'])?>
	</div>			
            </div>
<? $x++;} $x=0; ?>	 
        </div>
        <!-- Bullet Navigator -->
        <div u="navigator" class="jssorb13" style="bottom:16px;right:16px;" data-autocenter="1">
            <!-- bullet navigator item prototype -->
            <div u="prototype" style="width:21px;height:21px;"></div>
        </div>
		        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: <? echo $gVar['Положение стрелок по вертикали']?>px; left: <? echo $gVar['Отступ стрелки от края']?>px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: <? echo $gVar['Положение стрелок по вертикали']?>px; right: <? echo $gVar['Отступ стрелки от края']?>px">
        </span>
        <!-- Arrow Navigator Skin End -->

    </div>
    <script>
        jssor_1_slider_init();
    </script>
		