Дизайн принадлежит администрации сайта VSEpodrad.ru.
Администрация не несет ответственности за содержимое на нашем портале.
Администратор: .
|
Меню сайта
Смотри и качай бесплатно
Опрос сайта
Реклама
Онлайн пользователи
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Раздел в разработке
VSEpodrad.ru
В разработке!
На сайт добавлено файлов
Слайдер изображений с прекрасными переходами
Просто очень хороший слайдер с великим множеством качественных разнообразных переходов
Установка:
После /head на нужных страницах вставляйте:
Code
<script type="text/javascript" src="/js/jquery.panelgallery-2.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#movies').panelGallery({
viewDuration: 3000,
transitionDuration: 500,
boxSize: 45,
boxFadeDuration: 500,
boxTransitionDuration: 50
});
});
</script>
<style type="text/css">
#movies {
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
</style>
<script type="text/javascript">
$(function(){
$('#movies').panelGallery({
viewDuration: 3000,
transitionDuration: 500,
boxSize: 45,
boxFadeDuration: 500,
boxTransitionDuration: 50
});
});
</script>
<style type="text/css">
#movies {
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
</style>
В то место, где будет сам слайдер, вставляйте:
Code
<div id="movies">
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
</div>
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
<img alt="" src="Ссылка на картинку" width="600" height="248" />
</div>
Для варианта 2:
После /head на нужных страницах вставляйте:
Code
<script type="text/javascript" src="/js/jquery.panelgallery-2.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#models').panelGallery({
boxSize:50,
boxFadeDuration:1000,
boxTransitionDuration:100,
FX: new Array('boxSouthEast','fade','boxRandom','panelZipperDown,true','panelZipperRight,true','panelTeethDown,true','panelTeethRightReveal')
});
});
</script>
<style type="text/css">
#models {
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
</style>
<script type="text/javascript">
$(function(){
$('#models').panelGallery({
boxSize:50,
boxFadeDuration:1000,
boxTransitionDuration:100,
FX: new Array('boxSouthEast','fade','boxRandom','panelZipperDown,true','panelZipperRight,true','panelTeethDown,true','panelTeethRightReveal')
});
});
</script>
<style type="text/css">
#models {
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
</style>
В то место, где будет сам слайдер, вставляйте:
Code
<div id="models">
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
</div>
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
<img alt="" src="Ссылка на картинку" width="444" height="666" />
</div>
Для варианта 3:
После /head на нужных страницах вставляйте:
Code
<script type="text/javascript" src="/js/jquery.panelgallery-2.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#flowers').panelGallery();
});
</script>
<style type="text/css">
#flowers {
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
</style>
<script type="text/javascript">
$(function(){
$('#flowers').panelGallery();
});
</script>
<style type="text/css">
#flowers {
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
</style>
В то место, где будет сам слайдер, вставляйте:
Code
<div id="flowers">
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
</div>
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
<img alt="" src="Ссылка на картинку" width="500" height="375" />
</div>
Осталось лишь залить скрипт из прикреплённого архива в папку js
Вы сейчас просматриваете Слайдер изображений с прекрасными переходами. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Слайдер изображений с прекрасными переходами нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Слайдер изображений с прекрасными переходами и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.
| Всего комментариев: 0 | |
