Вставка фотогалереи/рисунков в статью с помощью ImageFlow

06 Дек 2012 в 19:39

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

А тут недавно попала на сайт http://finnrudolph.de/ImageFlow/, где дается инструмент, ImageFlow, который позволяет сделать фотогалерею на сайте своими руками.

Итак, ImageFlow... Что это такое?

 Вставка фотогалереи/рисунков в статью с помощью ImageFlow

ImageFlow - это картинная галерея, которая позволяет интуитивное управление изображениями галереи. Основная идея заключается в цифровой анимации при ручном cлистании  изображений.  ImageFlow работает с любым браузером, который может обрабатывать изображения и поддерживает JavaScript.

На этом же сайте можно посмотреть демопримеры галерей и выбрать для себя ту, которая больше понравится .

Для реализация галереи в своей статье необходимо скачать архив из сайта  http://finnrudolph.de/ImageFlow/Download и распаковать в отдельную папку корня своего сайта на хостинге .

В статью вставляем код, реализующий галерею, который надо настроить под свои фотографии/рисунки! Предварительно, фотографии (рисунки), которые будут использоваться для галереи, необходимо предварительно загрузить на сайт в библиотеку Медиафайлов и выписать в блокнот ссылки. Будет необходимо при настройке программного кода галереи.

<link rel="stylesheet" href="/_ImageFlow/imageflow.css" type="text/css" /> 
<style>
#xStep{
background-image: url(http://path_k_vashej_kartinke.jpg);
background-repeat: no-repeat;
background-position: 50% top;
}
#xStep{
height: 670px !important;
}
#xStep_images {
height: 585px !important;
top: 96px;
position: relative;
}
#xStep_navigation {
}
</style>
<script src="/_ImageFlow/imageflow.js" type="text/javascript"></script>
<div id="xStep" class="imageflow">
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc1" width="400" height="300" alt="Image 1" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc2" width="300" height="400" alt="Image 2" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc3" width="400" height="400" alt="Image 3" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc4" width="300" height="400" alt="Image 4" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="http://finnrudolph.de/content/imageflow/example_1.png" width="400" height="300" alt="Image 5" />
</div>
<script language="javascript" type="text/javascript">
domReady(function()
{
var iflow = new ImageFlow();
iflow.init({ ImageFlowID: 'xStep', xStep: 300, reflections: false, slideshow: true, slideshowAutoplay: true, opacity: true, circular: true, glideToStartID: false, opacityArray: [9,4,3,1,1] });
});
</script>

Несколько слов о коде скрипта:

  • Ссылка "link" в начале кода указывает на распакованную папку _ImageFlow в корне вашего сайта;
  • В Background-image указывается путь в фотке/рисунку, который будет использоваться как фон для галереи;
  • img src - фотки/рисунки, которые будут двигаться в галерее, при необходимости, проставляются размеры фотки/рисунка;
  • SlideshowAutoplay: true -  прокрутка карусели в режиме авто. Если значение этого параметра сменить на false, то карусель автоматом не будет крутится

Все остальные значения скрипта - это уже на ваше усмотрение.

Для вставки в статью приведенного выше скрипта для галереи фоток/рисунков необходимо в редакторе перейти на страницу HTML, вставить код скрипта и прописать пути к фоткам/рисункам.

Ниже привожу пример галереи-карусели. Прокрутите роликом мышки верх-вниз на фотках карусели и вы увидите, как работает приведенный скрипт.

 

 

fotografiya-12
fotografiya-22
fotografiya-31
fotografiya-111
Image 5


 
Вот такая получилась галерея-карусель.
 
Примечание. Вы можете использовать код скрипта, приведенный выше "как есть" или взять оригинальный код на сайте разработчика. Это уже на ваше усмотрение.
(По материалам сайта - http://masterpro.ws)

И еще. Редактируете статью на странице HTML и не надо переходить на страницу Визуального редактора, т.к. WordPress "съедает" половину скрипта и карусель не работает.

Буду благодарна за комментарий!

Буду благодарна, если Вы поделитесь этой статьей:

0

Рубрики: 2.1. Работа с контентом сайта


Отзывов пока нет.

Ваш отзыв