www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Фотогалерея для интернет магазина
Предлагаемый вариант фотогалереи создан, в первую очередь, для представления товаров в интернет магазинах. Он позволяет наглядно показать товар в разных проекциях, представить комплектацию, увеличенные фрагменты товара и др. изображения. Действующий пример фотогалереи показан на рисунке:
Эта фотогалерея создана с помощью бесплатной библиотеки скриптов jQuery программистом Натаном Салесом (Nathan Searles), техническим директором дизайн-студии "Бригада" ("The Brigade") в Портланде, штат Орегон, США.
В отличие от рассмотренных ранее программ фотогалерей, здесь не нужно создавать два исходных изображения, основное и уменьшенное (миниатюра). Программа сама изменяет размеры изображений для размещения в окне просмотра, а также позволяет посмотреть полноразмерное изображение (по клику на центральной картинке). Это значительно упрощает и облегчает работу по созданию фотогалерей и особенно актуально для больших каталогов товаров в интернет магазинах. В частности, для нашего примера все исходные изображения имеют размер 640х480 пикселей, но можно использовать и другой. Единственно, имейте в виду, что при клике по большой картинке в фотогалерее исходник показывается в полном окне браузера, и желательно, чтобы он туда помещался без обрезки краев.
Установка фотогалереи интернет магазина
Установка фотогалереи, как и других аналогичных скриптов jQuery, состоит всего из нескольких простых шагов:
1. Скачиваете архив с необходимыми файлами. Это 2 скрипта (jquery-1.8.3.min.js и slides.min.jquery.js), файл стилевого оформления - global.css, папка с вспомогательными изображениями - img и образец страницы товара - tovar_1.html.
2. Создаете папку scripts на вашем сайте и распаковываете в неё скачанный архив.
3. Далее необходимо определиться, как вы будете выводить фотогалерею товара на сайте. Самый простой и наиболее удобный способ открывать её в отдельной вкладке (изображение является ссылкой на страницу описания товара) или в небольшом окне по клику на изображении товара. Этот способ показан на рисунке слева. Для него использована ссылка на основе JavaScript:
<a href="javascript:" title="Товар 1" onclick="window.open('scripts/tovar_1.html','','width=650, height=380, left=0, top=0'); return true;"><img src="images/gallery6_01.jpg" alt="Товар 1" width="152" height="115" hspace="6" align="left" /></a>
Можно выводить фотогалерею и непосредственно на странице с помощью iframe , как сделано в начале этой статьи:
<iframe src="scripts/tovar_1.html" width="650" height="380" scrolling="Auto" frameborder="0"></iframe>.
Настройка параметров галереи
Все основные параметры окна с изображениями задаются в таблице стилей global.css и не имеют каких-либо особенностей. Вы легко сможете вносить изменения в соответствие со структурой страницы вашего сайта. Скорость вывода изображений фотогалереи, количество фрагментов, то есть изображений товара в разных видах, и другие параметры задаются на странице описания товара, о чем рассказано ниже.
Для работы с фотогалереей необходимо для каждого товара создавать свою страницу, аналогичную tovar_1.html, давая на неё соответствующие ссылки. В HTML-коде этой страницы необходимо указать внутри тега <head>...</head> следующие строчки, указывающие пути к скачанным файлам, и небольшой JavaScript для инициализации и установки параметров галереи (пути указаны при условии, что страница товара размещена вместе со скриптами в той же папке scripts):
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/slides.min.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#products').slides({
preload: true,
preloadImage: 'img/loading.gif',
effect: 'slide, fade',
crossfade: true,
slideSpeed: 200,
fadeSpeed: 500,
generateNextPrev: true,
generatePagination: false
});
});
</script>
Полный код этой страницы не привожу, так как он достаточно простой, и вы можете его просмотреть самостоятельно (CTRL+U). Кроме фотографий, там можно разместить и текстовые материалы, например, описание товара.
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="../jquery-1.8.3.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
24.04.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru