Слайдер изображений через плагин Craftyslide на jQuery для uCoz[
Скачать с сервера (2.2Kb)
]
Все порядком устали от тяжелых и навороченных слайдеров изображений. Мы
долго искали что-то легкое и приятное на глаз, цвет и вкус, и наконец
сошлись во мнении, что бесспорной позитивной новинкой среди слайдеров
изображений может стать плагин CraftySlide от Ucoz. Так же можно
прочитать и другую учебную литературу на Ulera.Net. Как и все продукты, созданные с использование библиотеки ввода JQuery
отличаются простотой в использовании и четкостью проработки. Создатели
явно постарались, и слайдер изображений вышел что надо. При просмотре
изображений на сайте есть небольшой эффект затемнения, на котором
контрастно и эффектно смотрится подпись к изображению.
Управление
плагином так же легкое и требует всего одного нажатия мыши для смены
картинки. На вашем сайте обязательно найдется место для этого стильного
плагина, тем более, что он отлично подходит для оформления галерей
изображений, легко встраивается в код страницы и не вызвал пока еще
отрицательных отзывов при тестировании. Картинки сменяются очень плавно,
что дает возможность хорошо рассмотреть изображение. Плагин
CraftySlide, без сомнения, уже скоро привлечет внимание владельцев
сайтов и дизайнеров благодаря своему хорошему исполнению и высокому
качеству работы.
Мы уже попробовали этот новый плагин от Ucoz и
можем рекомендовать его вам, но нам, в свою очередь, очень интересно
мнение каждого пользователя.
ВАЖНО! Скрипт из прикреплённого архива залейте в папку js, а картинку в папку images
Установка:
В то место, где должен быть слайдер, вставляйте: <divid="slideshow"> <ul> <li> <imgtitle="Титульник"src="Ссылка на картинку"alt="Титульник"/> </li> <li> <imgtitle="Титульник"src="Ссылка на картинку"alt="Титульник"/> </li> <li> <imgtitle="Титульник"src="Ссылка на картинку"alt="Титульник"/> </li> </ul> </div>
<scriptsrc="/js/craftyslide.min.js"></script> <scripttype="text/javascript"> $("#slideshow").craftyslide({ 'width':640, 'height':300, 'pagination':true, 'fadetime':500, 'delay':500 }); </script>
|
В самый низ вашего css: /* Craftyslide CSS Styles */ #slideshow { margin:0auto; } #slideshow { margin:10px; padding:0; position:relative; border:15px solid #f8f8f8; -webkit-box-shadow:03px5px#999; -moz-box-shadow:03px5px#999; box-shadow:03px5px#999; } #slideshow ul { position:relative; overflow:hidden; margin:0; padding:0; } #slideshow ul li { position:absolute; top:0; left:0; margin:0; padding:0; list-style:none; } #pagination { clear:both; width:75px; margin:25pxauto0; padding:0; } #pagination li { list-style:none; float:left; margin:02px; } #pagination li a { display:block; width:10px; height:10px; text-indent:-10000px; background:url(/images/pagination.png); } #pagination li a.active { background-position:010px; } .caption { width:100%; margin:0; padding:10px; position:absolute; left:0; font-family:Helvetica,Arial, sans-serif; font-size:14px; font-weight:lighter; color:#fff; border-top:1px solid #000; background:rgba(0,0,0,0.6); }
|
Нравится
|