Текущее время: 28 мар 2024, 18:15

Часовой пояс: UTC + 3 часа [ Летнее время ]


Правила форума


Пожалуйста, прежде чем задавать вопрос, воспользуйтесь поиском, возможно ответ уже существует!



Начать новую тему Ответить на тему  [ Сообщений: 9 ] 
Автор Сообщение
 Заголовок сообщения: Слайд-шоу в шапке сайта
СообщениеДобавлено: 03 мар 2014, 21:16 
Не в сети

Зарегистрирован: 03 мар 2014, 21:13
Сообщения: 1
Доброго времени суток! Возможно ли на данном сервисе вместо фиксированной картинки - шапку сделать в виде слайд-шоу? Если да - то разъясните пожалуйста (подробно) как именно это сделать. Буду признательна всем знатокам, которые помогут.


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 16 мар 2014, 12:24 
Не в сети
Аватара пользователя

Зарегистрирован: 07 янв 2014, 21:11
Сообщения: 88
Откуда: Смоленск
Здравствуйте! Конечно можно. В зависимости от того свой шаблон или готовый располагается он по разному.
Для готового шаблона с имеющейся шапкой:
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" надпись в середину шапки, вы можете убрать его или изменить на свое.


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 16 мар 2014, 12:27 
Не в сети
Аватара пользователя

Зарегистрирован: 07 янв 2014, 21:11
Сообщения: 88
Откуда: Смоленск
Совсем забыл еще рамку вокруг шапки нужно убрать, следующий код CSS:
Код:
.art-sheet-tr, .art-sheet-tl,.art-sheet-tc {

background-color: none;

background-image: none;

}


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 17 мар 2014, 18:54 
Не в сети
Аватара пользователя

Зарегистрирован: 15 янв 2012, 22:07
Сообщения: 1708
И чего, работает?

_________________
Уроки и полезные советы про okis


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 18 мар 2014, 08:07 
Не в сети
Аватара пользователя

Зарегистрирован: 23 дек 2013, 19:42
Сообщения: 153
Откуда: Просторы Вселенной
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>

_________________
Наношу добро, причиняю пользу. http://site-na-okis.ru


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 18 мар 2014, 08:33 
Не в сети
Аватара пользователя

Зарегистрирован: 23 дек 2013, 19:42
Сообщения: 153
Откуда: Просторы Вселенной
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 , работать он не хочет....

_________________
Наношу добро, причиняю пользу. http://site-na-okis.ru


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 18 мар 2014, 09:44 
Не в сети
Аватара пользователя

Зарегистрирован: 23 дек 2013, 19:42
Сообщения: 153
Откуда: Просторы Вселенной
еще в паре с вот этим не работает -
Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>



А еще, если скрипты в браузере отключены, он все эти картинки по очереди разложит, что не совсем хорошо...

_________________
Наношу добро, причиняю пользу. http://site-na-okis.ru


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 13 май 2015, 14:14 
Не в сети
Аватара пользователя

Зарегистрирован: 01 май 2015, 03:46
Сообщения: 17
Помогите выровнять по центру слайдер http://prosecret.in.ua/


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Слайд-шоу в шапке сайта
СообщениеДобавлено: 13 май 2015, 14:46 
Не в сети
Аватара пользователя

Зарегистрирован: 01 май 2015, 03:46
Сообщения: 17
Точнее, по центру выровнено, но при переключении на 1 секунду сносит картинку вправо. Как убрать этот эффект?


Вернуться к началу
 Профиль  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 9 ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron