Текущее время: 23 мар 2019, 10:30

Часовой пояс: 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 часа [ Летнее время ]


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

Сейчас этот форум просматривают: Bing [Bot]


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

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