школа по созданию сайтов





Скрипты изображений

На этой страничке Вы можете скачать бесплатно скрипты изображений. Предлагаю Вашему вниманию скрипт галереи изображений, который Вы можете легко внедрить на своём сайте или блоге. Далее идёт описание того, как загрузить, установить и использовать скрипты для изображений.

Скрипт изображения, который мы рассмотрим здесь, взят с иностранного сайта: http://owlgraphic.com/owlcarousel/. Файлы кода в архиве для скачивания мной сокращены и незначительно изменёны, для того, чтобы Вы могли проще установить исходники на Ваш сайт. Для установки Вам потребуется знание основ HTML и CSS, а также полезно, но необязательно, знание основ языка JavaScript.

скрипты для изображений

Просто скачайте скрипты для изображений, кликнув по ссылке. Для установки распакуйте rar-архив и поместите все файлы в отдельную папку в корневой директории Вашего сайта. Вы также можете поместить эти файлы и в другие папки, например, содержащие файлы стилей и скрипты, но тогда Вам необходимо будет корректно прописать путь к файлам. В примере из архива «demos/images.html» по умолчанию прописан относительный путь от корневого каталога.

В файле страницы, к которой вы подключите скрипты для изображений, должен быть прописан следующий код, как показано на листингах. Первым делом подключим в заголовке html-документа основные стили:


< html >
< head >
< title> Заголовок html-страницы < /title >

< link href="../css/docStyle.css" 
rel="stylesheet" type="text/css" / >

< link href="../assets/css/bootstrapTheme.css" 
rel="stylesheet" >
   
< !-- Owl Carousel Assets -- >
< link href="../owl-carousel/owl.carousel.css" 
rel="stylesheet" >
< link href="../owl-carousel/owl.theme.css" 
rel="stylesheet" >

< /head >

Далее, наша задача вставить изображения. Мы поместим их с помощью блоков div, с идентификаторами и классами, для того, чтобы Вы могли их, при необходимости, легко отформатировать с помощью таблиц стилей CSS. Количество картинок можно свободно увеличить или сократить, а также сделать их ссылками и привязав к ним другие функции.


< body >

Также теперь нам необходимо подключить библиотеку JQuery и скрипт галереи изображений. Да, местами, на листингах, для удобства, поставлены дополнительные пробелы и переносы – в Вашем коде не забудьте, пожалуйста, убрать лишние пробелы между угловыми скобками и переносы строк.

< script 
src="../assets/js/jquery-1.9.1.min.js" >
< /script >
< script 
src="../owl-carousel/owl.carousel.js" >
< /script >

Скрипты для изображений подключены. Теперь пропишем для нашей галереи стили. Обратите внимание: Вы также можете управлять стилями изображений с помощью внешних css-файлов. Самое главное, чтобы эти стили не смешивались с другими элементами на Вашей странице, иначе моет произойти их конфликт, поэтому они должны иметь отличные друг от друга имена.

< !-- Demo -- >

< style >
#owl-demo .item{
margin: 3px; /* Поля между иконками в пикс. */
}
#owl-demo .item img{
display: block;
width: 100%; /* ширина иконок */
height: auto; /* высота иконок */
}
< /style >

Теперь допишем форматирующий скрипт галереи изображений. В этом коде Вы можете менять количество картинок для одновременного вывода и скорость прокрутки. От количества картинок зависит размер выводимых изображений, соответственно – чем меньше картинок, тем больше их размер. На листингах я кое-что сократил и поместил комментарии, чтобы Вам было проще настроить скрипты для изображений.




 < /body >
< /html >

Скрипт прокрутки изображений можно также изменять и модифицировать, например, добавить функцию увеличения изображений, при наведении на них курсора мыши. Или даже можно использовать скрипт изображения для чего-то более крутого, например, как составную часть страницы, слайдер.

Сейчас очень популярно устанавливать в качестве хедера (шапки сайта) сменяющиеся красочные изображения. Этот скрипт изображения позволяет Вам установить на Ваш сайт или блог отличный динамический хедер. Например, можно сделать хедер из трёх последовательно сменяющихся баннеров размером по ширине странички или меньшей.

Отформатировать изображения или фотографии для галереи по качеству и размеру Вы можете с помощью обычной программы Paint установленной на Вашем любимом компьютере. Реальный пример того, как работают скрипты изображений, Вы можете, с помощью описанного кода, создать сами и поместить ссылку на него в комментариях снизу, либо задать вопросы.




по созданию сайтов

© www.1artsite.com | Все права защищены.
© Создание сайта Сергей Меркоев, 2010-2014 гг.