Страница 1 из 11
Модератор форума: webanet 
Сообщество uCoz » Архивариус » Решённые вопросы » Вопрос по шаблону 1101. Слайдер в шапке (блок promo)
Вопрос по шаблону 1101. Слайдер в шапке (блок promo)
AlinaAma
Сообщений: 3
Репутация: 0

Сообщение # 1 | 13:17:59
Добрый день!

Добавила в блок promo - cлайдер со сменой картинок. http://srmyar.ucoz.ru/

в итоге пропали кнопки переключения слайдов и нижний индикатор количества слайдов. слайдер не работает! не листает. висит статичная картинка. в чем может быть дело?

до того как перенесла в дизайне шаблонов - "страницы сайта" скрипт слайдера - выше закрывающего тега /head> - все работало. но не отображались выпадающие флажки меню.

Вот блок который перенесла выше тега </headt> в "Cтраницы сайта" :

Код
<!--скрипт слайдера-->
<link href="http://srmyar.ucoz.ru/ccs/default.css" rel="stylesheet" type="text/css" />
<script src="http://srmyar.ucoz.ru/js/jquery.js" type="text/javascript"></script>
<script src="http://srmyar.ucoz.ru/js/mobilyslider.js" type="text/javascript"></script>
<script src="http://srmyar.ucoz.ru/js/init.js" type="text/javascript"></script>
<!--конец скрипт слайдера-->

</head>

в блоке PROMO поставила:

<?if($URI_ID$='page1')?>

<script>
$('.slider1').mobilyslider();
</script>

<div class="slider slider1">
<div class="sliderContent">

<div class="item">
<img src="http://srmyar.ucoz.ru/img/img1.jpg" alt="" />
</div>

<div class="item">
<img src="http://srmyar.ucoz.ru/img/img2.jpg" alt="" />
</div>

<div class="item">
<img src="http://srmyar.ucoz.ru/img/img3.jpg" alt="" />
</div>

<?endif?>
пути прописаны абсолютные. файл стилей лежит: http://srmyar.ucoz.ru/ccs/default.css другие файлы также лежат в соответствующих подпапках и пути абсолютные. В ЧЕМ МОЖЕТ БЫТЬ ДЕЛО?!! подскажите, плиз!
Yuri_G
Модератор форума
Сообщений: 4202
Репутация: 899

Сообщение # 2 | 13:28:59
AlinaAma, дело в том, что в вашем слайдере используется сторонняя библиотека:
Код
<script src="http://srmyar.ucoz.ru/js/jquery.js" type="text/javascript"></script>
Которая конфликтует с встроенной системной:
Код
<script type="text/javascript" src="http://s16.ucoz.net/src/jquery-1.7.2.js"></script>
После установки данного слайдера у вас перестанет работать админ-бар и возможно другие элементы сайта.

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
AlinaAma
Сообщений: 3
Репутация: 0

Сообщение # 3 | 13:53:18
Cпасибо! А если прописать вместо <script src="http://srmyar.ucoz.ru/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://s16.ucoz.net/src/jquery-1.7.2.js"></script>; - это может помочь? я не очень понимаю как подключить сиcтемную. просто удалить ссылку на стороннюю?

Добавлено (14 Окт 2014, 13:53:18)
---------------------------------------------
как я понимаю сторонняя более ранней версии: jQuery JavaScript Library v1.4.2 если поставить родную, то вдруг заработает? как указать слайдеру на какую библиотеку ссылаться?

Yuri_G
Модератор форума
Сообщений: 4202
Репутация: 899

Сообщение # 4 | 14:04:46
AlinaAma, Как вариант воспользуйтесь слайдером с новых адаптивных шаблонов к примеру с 1051, в верхней части сайта или где нужно чтобы отображался слайдер установить код:
Код
<div class="slider-row">
     <div class="cap"></div>
     <div class="cont-wrap">
             <div class="slider pattern" id="camera_wrap">
                 <div data-src="/.s/t/1051/slide1.jpg">
                     <div class="camera_caption fadeFromLeft">
                         <h2 class="slide-ttl">Lorem Ipsum is simply</h2>
                         <div class="slide-descr">printing and typesetting industry. Lorem Ipsum has been the   
     industry's standard dummy text ever since the 1500s, when an
     unknown printer took a galley of type and scrambled it to</div>
     <a href="#" class="btn-lnk dark-gr">watch online</a>
                        </div>
                        <div class="fadeIn camera_effected slide-inner-b"></div>
                    </div>
                     <div data-src="/.s/t/1051/slide2.jpg">
                        <div class="camera_caption fadeFromLeft">
                    <h2 class="slide-ttl">Lorem Ipsum is simply</h2>
                            <div class="slide-descr">printing and typesetting industry. Lorem Ipsum has been the   
     industry's standard dummy text ever since the 1500s, when an
     unknown printer took a galley of type and scrambled it to</div>
     <a href="#" class="btn-lnk dark-gr">watch online</a>
                 </div>
                 <div class="fadeIn camera_effected" style="position: absolute;"></div>
                       
                 </div>   
             </div>
     </div>

     <div class="cap"></div>
</div>

<script type='text/javascript' src='/.s/t/1051/template.min.js'></script>   
   <script>
   jQuery(function(){
     
   jQuery('#camera_wrap').camera({
      height: '390px',
      loader: 'none',
      pagination: true,
      thumbnails: false,
      navigation: false,
      hover: false,
      opacityOnGrid: false,
      overlayer: true,
      playPause: false,
      time: 30000,
      imagePath: '/.s/t/1051/'
   };);

   };);
   </script>
Далее перейти в Таблицу стилей CSS и добавить стили, для нашего слайдера:
Код
/*------ slider style ------*/
.slider-row {
   background: url(/.s/t/1051/sldr-bg.jpg) no-repeat 50% 0;
}

.slider {
   position: relative;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-bottom: 0 !important;
   padding: 20px;
   background: #373737;
   -webkit-box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75);
   box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75);
   text-align: center;
}

   .slider img,   
.slider ol, .slider ul, .slider li,
.slider table, .slider tbody, .slider tfoot, .slider thead, .slider tr, .slider th, .slider td {
   margin: 0;
   padding: 0;
   border: 0;
   background: none;
   list-style: none;
   vertical-align: baseline;
   font: inherit;
   font-size: 100%;
}
.slider {
   position: relative;
   z-index: 0;
   display: none;
}
.slider img {
   max-width: none!important;
}
.camera_fakehover {
   position: relative;
   z-index: 1;
   min-height: 60px;
   width: 100%;
   height: 100%;
}
.slider {
   width: 100%;
}
.camera_src {
   display: none;
}
.cameraCont, .cameraContents {
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
}
.cameraSlide {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
}
.cameraContent {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
   width: 100%;
}
.camera_target {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
   text-align: left;
}
.camera_overlayer {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
}
.camera_target_content {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
   overflow: hidden;
}
.camera_target_content .camera_link {
   display: block;
   height: 100%;
      background: url(/imag/blank.gif);
   text-decoration: none;
}
.camera_nav_cont {
   position: absolute;
   top: 15px;
   right: 9px;
   z-index: 4;
   overflow: hidden;
   width: 120px;
   height: 65px;
}
.camerarelative {
   position: relative;
   overflow: hidden;
}
.imgFake {
   cursor: pointer;
}
.camera_command_wrap .hideNav {
   display: none;
}
.camera_command_wrap {
   position: relative;
   right:0;
   left: 0;
   z-index: 4;
}

.camera_pag {
   position: absolute;
   bottom: 13px;
   z-index: 1000;
   width: 100%;
}

.slider .camera_pag .camera_pag_ul {
   position: relative;
   display: inline-block;
   margin: 0 auto;
   padding: 0;
   min-width: 240px;
   background: #373737 url(/.s/t/1051/slider-pag-m.png) repeat 0 0;
   list-style: none;
   vertical-align: bottom;
   text-align: center;
}

.slider .camera_pag .camera_pag_ul:before,
.slider .camera_pag .camera_pag_ul:after {
   position: absolute;
   top: 0;
   display: block;
   width: 30px;
   height: 32px;
   content: '';
}

.slider .camera_pag .camera_pag_ul:before {
   left: -30px;
   background: url(/.s/t/1051/slider-pag-l.png) no-repeat 0 0;
}

.slider .camera_pag .camera_pag_ul:after {
   right: -30px;
   background: url(/.s/t/1051/slider-pag-r.png) no-repeat 0 0;
}

.slider .camera_pag .camera_pag_ul li {
   position: relative;
   display: inline-block;
   margin: 9px 2px 5px;
   width: 16px;
   height: 16px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   background-color: #4a4a4a;
   -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
   -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
   box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
   text-align: left;
   text-indent: -9999px;
   cursor: pointer;
}

.slider .camera_pag .camera_pag_ul li:hover {
   background-color: #2e2e2e;
   -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
   -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
   box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
}

.slider .camera_pag .camera_pag_ul li.cameracurrent {
   background-color: #73b52a;
   -webkit-box-shadow:  inset 0px 1px 0px rgba(255,255,255,1);
   -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,1);
   box-shadow:  inset 0px 1px 0px rgba(255,255,255,1);
}

.camera_pag_ul li img {
   position: absolute;
   display: none;
}
.camera_pag_ul .thumb_arrow {
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -4px;
      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
}

.slider .camera_pag .camera_pag_ul li {
   position: relative;
   display: inline-block;
   margin: 9px 2px 5px;
   width: 16px;
   height: 16px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   text-indent: -9999px;
   cursor: pointer;
}
.camera_clear {
   display: block;
   clear: both;
}
.showIt {
   display: none;
}
.camera_clear {
   position: relative;
   display: block;
   clear: both;
   margin: -1px 0 25px;
   height: 1px;
}

.pattern .camera_overlayer {
   background: url(/.s/t/1051/slide-ol.png) repeat;
}

.camera_caption {
   position: absolute;
   top: 70px;
   left: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 20px 3px 20px 35px;
   width: 350px;
   background-color: #000;
   background-color: rgba(0,0,0,.5);
   color: #fff;
   text-align: left;
   font-family: 'Roboto Condensed', sans-serif;
}

.slide-ttl {
   margin: 0;
   padding: 0 0 10px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 30px;
}

.slide-descr {
   font-weight: normal;
   font-size: 12px;
   line-height: 1.6;
}

.camera_caption .btn-lnk {
   position: absolute;
   bottom: -50px;
   padding: 10px 24px;
}
/*------ slider style ------*/

В итоге мы имеем рабочий слайдер который можно легко менять под себя и добавлять новые слайды итд.

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
AlinaAma
Сообщений: 3
Репутация: 0

Сообщение # 5 | 14:08:11
Cпасибо большое! буду пробовать!
Сообщество uCoz » Архивариус » Решённые вопросы » Вопрос по шаблону 1101. Слайдер в шапке (блок promo)
Страница 1 из 11
Поиск: