Все для веб-дизайнера
Создаем фотоальбом для сайта на jQuery
Создавая мультимедийный сайт, на котором множество картинок то встает вопрос о правильном оформлении изображений в упорядоченный фотоальбом. Мы уже не раз публиковали различный галереи картинок и ротаторы для них, но сегодня мы хотели поговорить о создании фотоальбома с плавной сменой изображений, при этом осуществляется навигация с помощью превью миниатюр. Данный альбом станет отличным дополнением для вашего ресурса. Для создания фотоальбома мы будем использовать плагин jquery.
Для начала мы рассмотрим разметку HTML-документа, в котором будет выводиться все изображения, также можно присвоить описание с помощью атрибута alt, подпись изображений будет выводиться внизу изображений.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>Создаем фотоальбом для сайта на jQuery | Демонстрация для сайта RUDEBOX</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <link href="css/fotorama.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/fotorama.js"></script> <script src="js/main.js"></script> </head> <body> <div class="container"> <div id="fotorama"> <img src="images/pic1.jpg"/> <img src="images/pic2.jpg"/> <img src="images/pic3.jpg"/> <img src="images/pic4.jpg"/> <img src="images/pic5.jpg"/> <img src="images/pic6.jpg"/> <img src="images/pic7.jpg"/> <img src="images/pic8.jpg"/> <img src="images/pic9.jpg"/> <img src="images/pic10.jpg"/> </div> </div> </body> </html> |
Стили CSS фотоальбома находятся в fotorama.css Первая таблица стилей-это макет нашей страницы. Вторым, по умолчанию, файл стилей галереи fotorama. Вы можете настроить его (при необходимости). Оба файла находятся в исходниках.
Теперь рассмотрим параметры фотоальбома, параметры которого находятся в файле main.js, основные параметры подписаны в коде:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
jQuery(function(){ $('#fotorama').fotorama({ // width: 1000, // ширина контейнера // height: 600, // Высота контейнера startImg: 10, // начальное изображение transitionDuration: 400, // Время перехода touchStyle: true, // Разрешить перетаскивание // pseudoClick: true, // Авто между изображениями при нажатии на кнопку (если touchStyle = True) // loop: false, // Цикл для изображений (если touchStyle = ложь) // backgroundColor: null, // цвет фона margin: 10, // margin между изображениями // minPadding: 10, // Мин заполнения // alwaysPadding: false, // Применяем обшивку для изображений // preload: 3, // Количество предварительно загруженные изображения с каждой стороны активного изображения // resize: false, // Изменение размера изображений // zoomToFit: true, // увеличить // cropToFit: false, // параметры Crop // vertical: false, // Вертикальный просмотр миниатюр // verticalThumbsRight: false, // Вертикальные Thumbs // arrows: true, // Draw стрелки arrowsColor: '#3399cc', // цвет стрелки // thumbs: true, // Draw Thumbs // thumbsBackgroundColor: null, // цвет фона Thumbs // thumbColor: null, // цвет Thumb // thumbsPreview: true, // Thumb просмотр thumbSize: 50, // Thumb размер (высота) // thumbMargin: 5, //Thumb поля thumbBorderWidth: 1, // ширина границы Thumb // thumbBorderColor: null, // Thumb цвет рамки caption: true, //Показать заголовки // onShowImg: null, // Пользовательская функция, когда мы выбираем изображение // shadows: true // тени дисплея }); }); |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 20.05.2012 в 17:49, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...