forum.okis.ru
http://forum.okis.ru/

Слайд-шоу в шапке сайта
http://forum.okis.ru/viewtopic.php?f=10&t=4401		 Страница 1 из 1
Автор:  Nesha1980 [ 03 мар 2014, 21:16 ]
Заголовок сообщения:  Слайд-шоу в шапке сайта
Доброго времени суток! Возможно ли на данном сервисе вместо фиксированной картинки - шапку сделать в виде слайд-шоу? Если да - то разъясните пожалуйста (подробно) как именно это сделать. Буду признательна всем знатокам, которые помогут.
Автор:  Максим67 [ 16 мар 2014, 12:24 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
Здравствуйте! Конечно можно. В зависимости от того свой шаблон или готовый располагается он по разному.
Для готового шаблона с имеющейся шапкой:
1. Необходимо освободить место для слайда вместо шапки:
Прописываем в код CSS :
Код:
div.art-header {display:none;}

Далее в зависимости от размеров изображений вашего слайдера, в частности высоты, прописываем в CSS:
Код:
.art-content-layout {
    margin-top: 330px; }
В данном случае я задаю отступ сверху 330px;
Я привожу пример простого слайда изображений с возможностью прикрепить к каждому изображению ссылки:
В параметрах сайта в поле мета-тег прописываем следующий код:
Код:
<script type="text/javascript" src="http://restoran-leon.ru/js/site/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://restoran-leon.ru/js/jquery.innerfade/js/jquery.innerfade.js"></script>
      <script type="text/javascript">
      $(document).ready(
            function(){               
               $('ul#portfolio').innerfade({
                  speed: 1000,
                  timeout: 5000,
                  type: 'sequence',
                  containerheight: '400px'
               });
         });
     </script>

Далее в место установки слайдера, у меня в поле рекламы под шапкой, следующий код:
Код:
<div class="images_main">
<ul id="portfolio">
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9827/240569873.0/0_166789_b0480076_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>   
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9751/240569873.0/0_16678a_259c4061_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>   
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9827/240569873.0/0_16678b_e9a15d41_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>   
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9827/240569873.0/0_16678c_66806c59_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>   
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9744/240569873.0/0_16678d_e0236fc9_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>   
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9744/240569873.0/0_16678e_49355026_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>   
               </li>



         <!--% descr%-->
      
      </ul>
</div>

<div class="element">
<p style="text-align: center;"><img src="http://img-fotki.yandex.ru/get/9751/240569873.0/0_166790_d4f6f1ec_M.png" alt="Надпись в шапку" width="250"

height="100" /></p>
</div>


Меняете, соответственно ссылки на свои изображения, указываете нужный размер, можете ссылки вставить к изображениям.

Ну и в завершении для правильного расположения в код CSS прописываете:

Код:
.images_main {
position: absolute;

top: -330px;
width: 998px;
margin: 0 auto 0px;
margin-left: -223px;
background: #000;
z-index: 2;
}

#portfolio {

padding: -22px;
margin: -22px;
margin-bottom: -102px;
top: 0px;
z-index: 2;
}

.element {
position: absolute;
left: 50%;
margin-left: -125px;
width:250px;
height: 100px:
margin: 0 auto 0px;
top: -250px;
z-index: 3;
}


Задаете свой отступ сверху, по бокам и т.д. В данном коде я также прописал изображение "element" надпись в середину шапки, вы можете убрать его или изменить на свое.
Автор:  Максим67 [ 16 мар 2014, 12:27 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
Совсем забыл еще рамку вокруг шапки нужно убрать, следующий код CSS:
Код:
.art-sheet-tr, .art-sheet-tl,.art-sheet-tc {

background-color: none;

background-image: none;

}
Автор:  PhotoShopRND [ 17 мар 2014, 18:54 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
И чего, работает?
Автор:  Little Mike [ 18 мар 2014, 08:07 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
PhotoShopRND писал(а):
И чего, работает?

Нормально так работает, жаль только, что функций обработки у этого скрипта всего две...fade, и slide . Это если строчку вот тут докинуть. Без неё по умолчанию fade работает.
Код:
<script type="text/javascript" src="http://restoran-leon.ru/js/site/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://restoran-leon.ru/js/jquery.innerfade/js/jquery.innerfade.js"></script>
      <script type="text/javascript">
      $(document).ready(
            function(){               
               $('ul#portfolio').innerfade({
                [color=#BF0000] animationtype: 'slide',[/color]
 speed: 2000,
                  timeout: 4000,
                 [color=#FF0000] type: 'random',[/color] тут тоже можно покрутить :)
                  containerheight: '400px'
               });
         });
     </script>
Автор:  Little Mike [ 18 мар 2014, 08:33 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
PhotoShopRND писал(а):
И чего, работает?


Нормально так работает, жаль только, что функций обработки у этого скрипта всего две...fade, и slide . Это если строчку вот тут докинуть. Без неё по умолчанию fade работает.
Код:
<script type="text/javascript" src="http://restoran-leon.ru/js/site/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://restoran-leon.ru/js/jquery.innerfade/js/jquery.innerfade.js"></script>
      <script type="text/javascript">
      $(document).ready(
            function(){               
               $('ul#portfolio').innerfade({
                [color=#BF0000] animationtype: 'slide',[/color]
 speed: 2000,
                  timeout: 4000,
                 [color=#FF0000] type: 'random',[/color] тут тоже можно покрутить :)
                  containerheight: '400px'
               });
         });
     </script>


Вот только если подключена где-то еще одна другая версия jquery , работать он не хочет....
Автор:  Little Mike [ 18 мар 2014, 09:44 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
еще в паре с вот этим не работает -
Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>



А еще, если скрипты в браузере отключены, он все эти картинки по очереди разложит, что не совсем хорошо...
Автор:  Karamba [ 13 май 2015, 14:14 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
Помогите выровнять по центру слайдер http://prosecret.in.ua/
Автор:  Karamba [ 13 май 2015, 14:46 ]
Заголовок сообщения:  Re: Слайд-шоу в шапке сайта
Точнее, по центру выровнено, но при переключении на 1 секунду сносит картинку вправо. Как убрать этот эффект?
Страница 1 из 1 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/