Не могу понять поведение блока "PROMO" в верхней части сайта, в дизайне #1161

Голоса: +1

Здравствуйте. Создал сайт, начал его оптимизацию под свои нужды. В верхней части сайта имеется блок "PROMO", который показывает небольшие миниатюрки и подписи к ним. В стандартном шаблоне их 3. Захотел добавить четвертую миниатюрку. Открыл редактор глобальных блоков. И в соответствующем блоке дописал чертвуртую. Вот код четвертой:

 <div class="slide">
 <div class="slide-img"><img src="http://gm-project.ucoz.com/IMG/program.jpg" alt=""></div>
 <div class="slide-txt">
 <div class="slide-t">Прочее</div>
 <div class="slide-d">Текст</div>
 <a href="http://gm-project.ucoz.com/publ/programmirovanie/3" class="more-btn">Перейти</a>
 </div>
 <div class="clr"></div>
 </div> 

Добавил и весь глобальный блок стал иметь код:

<?if($URI_ID$='page1')?>
<section>
<div class="wrapper">
<div id="slider">
 
 <div class="slide">
 <div class="slide-img"><img src="http://gm-project.ucoz.com/IMG/idea.jpg" alt=""></div>
 <div class="slide-txt">
 <div class="slide-t">Мои проекты и мысли</div>
 <div class="slide-d">Пожалуй наиболее важный раздел нашего сайта. Здесь будут выкладываться интересные эксперименты, проекты, мысли и их реализация. Другими словами - это небольшой личный архив моих мыслей и идей, время от времени появляющихся в моей голове и недающих заснуть по ночам.</div>
 <a href="http://gm-project.ucoz.com/publ/moi_proekty_i_mysli/1" class="more-btn">Перейти</a>
 </div>
 <div class="clr"></div>
 </div>
 
 
 <div class="slide">
 <div class="slide-img"><img src="http://gm-project.ucoz.com/IMG/malinzener.jpg" alt=""></div>
 <div class="slide-txt">
 <div class="slide-t">Маленькие инженеры</div>
 <div class="slide-d">Этот проект включает в себя видео-уроки, посвященные созданию устройств, программированию, реализации фантазий подрастающего поколения. Мы надеемся, что с нашей помощью дети научатся воплощать свои идеи в реальность, что наш проект станет основой для их творчества и созидания.</div>
 <a href="http://gm-project.ucoz.com/publ/malenkie_inzhenery/2" class="more-btn">Перейти</a>
 </div>
 <div class="clr"></div>
 </div> 
 
 <div class="slide">
 <div class="slide-img"><img src="http://gm-project.ucoz.com/IMG/program.jpg" alt=""></div>
 <div class="slide-txt">
 <div class="slide-t">Программирование</div>
 <div class="slide-d">Программирование всегда вызывало у меня большой восторг. Особенно когда твоя готовая программа начинает работать и показывает какой-то результат. В этом разделе будут рассматриваться основы программирования, а также небольшие уроки и готовые программы.</div>
 <a href="http://gm-project.ucoz.com/publ/programmirovanie/3" class="more-btn">Перейти</a>
 </div>
 <div class="clr"></div>
 </div> 
 
 <div class="slide">
 <div class="slide-img"><img src="http://gm-project.ucoz.com/IMG/program.jpg" alt=""></div>
 <div class="slide-txt">
 <div class="slide-t">Прочее</div>
 <div class="slide-d">Текст</div>
 <a href="http://gm-project.ucoz.com/publ/programmirovanie/3" class="more-btn">Перейти</a>
 </div>
 <div class="clr"></div>
 </div> 
 
 </div> 
 <script type="text/javascript">
 var slideTime = 5300;
 </script>
</div>
 
</section>
<?endif?>

Но теперь, при открытие сайта, или при обновлении страницы, сначала включается первая миниаютерка (буквально на пол секунды) и сразу же переключается на четвертую. И с нее уже начинается работа всего блока. При добавлении пятой, шестой, седьмой.. миниаютюрки, работа все равно начинается именно с 4. Как это можно исправить? И возможно ли это вообще? 

Адрес сайта http://gm-project.ucoz.com/
| Автор: | Категория: Дизайн сайта

Ответов: 2

голоса: +3
 
Лучший ответ

Основы поведения вашего слайдера описаны тут

<script type="text/javascript" src="/.s/t/1161/ui.js"></script>

Если не понимаете в скриптах, то лучше не перебирать данный скрипт, так как там описана работа других функциональных узлов сайта

 

 

| Автор:
Выбор ответа лучшим | | Автор: Максим Гулиев
Так так описано, что работа будет осуществляться с первой миниаютурки. А почему то идет с 4-ой. Не с 5-ой, не 8-ой, а именно с 4.

Если я правильно понимаю, то вот это все описывает работу:

#slider {position:relative;margin:20px 0;overflow:hidden;}
.slide {position:absolute;-moz-opacity:0;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);-webkit-transition:opacity 0.8s ease-out;-moz-transition:opacity 0.8s ease-out;-ms-transition:opacity 0.8s ease-out;-o-transition:opacity 0.8s ease-out;transition:opacity 0.8s ease-out;}
.slide.active {top:0;-moz-opacity:1;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
.slide-txt {float:left;}
.slide-t {font-size:34px;font-style:italic;text-shadow:0 1px 2px #fff;padding:20px 0 0;}
.slide-d {font-size:16px;color:#342f2f;padding:20px 0;line-height:150%;}
.more-btn {display:inline-block;height:28px;line-height:28px;background-image:url(/.s/t/1161/btn.png);background-position:0 center;padding:0 20px;margin:5px 0 0;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.more-btn:hover {color:#fff;text-decoration:none;-moz-box-shadow:inset 0 0 50px 0 rgba(255,255,255,.2);-webkit-box-shadow:inset 0 0 50px 0 rgba(255,255,255,.2);box-shadow:inset 0 0 50px 0 rgba(255,255,255,.2);}
.slide-img {float:right;padding:1px 0;}
.slide-img img,.slide-nimg {display:block;width:288px;height:288px;padding:22px;border:13px solid #ddd;border:13px solid rgba(0,0,0,.05);background:#fff;background:rgba(255,255,255,.4);-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);}
#slide-thmbs {position:absolute;bottom:20px;left:31px;height:115px;}
.slide-thmb {cursor:pointer;float:left;margin:0 0 0 9px;padding:10px;border:5px solid #ddd;border:5px solid rgba(0,0,0,.05);background:#fff;background:rgba(255,255,255,.4);-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.slide-thmb div,.slide-nimg div {background-size:cover!important;width:85px;height:85px;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;}
.slide-nimg div {width:100%;height:100%;}
.slide-thmb.active {background:rgba(255,255,255,.6);border:5px solid rgba(0,0,0,.15);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);}

Можете помочь разобраться? С скриптами я действительно еще не знаком. А вот добавить миниатюрку это важная задача на данном этапе. Не знаю в чем может быть причина

голоса: +2
Попробуйте вынести скрипт за <?endif?>
| Автор:
Не думаю что это каким либо образом повлияет на работу
...