Слайд-шоу в шапке сайта
Для готового шаблона с имеющейся шапкой:
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" надпись в середину шапки, вы можете убрать его или изменить на свое.
Совсем забыл еще рамку вокруг шапки нужно убрать, следующий код CSS:
Код:
.art-sheet-tr, .art-sheet-tl,.art-sheet-tc {
background-color: none;
background-image: none;
}
Нормально так работает, жаль только, что функций обработки у этого скрипта всего две...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>
еще в паре с вот этим не работает
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
А еще, если скрипты в браузере отключены, он все эти картинки по очереди разложит, что не совсем хорошо...