Воскресенье, 01 апреля 2012 00:00

ImageFlow. Галерея изображений для сайта - своими руками

Оцените материал
(3 голосов)

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

 

Там же возможно посмотреть демо,  примеры, и выбрать для себя наиболее понравившееся.

Рабочий пример реализации может выглядеть следующим образом; качаем архив и распаковываем его в корень вашего сайта.
На страничку вставляем такой примерно код и редактируем как душе угодно... это все. Enjoy!

 

<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>

 

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

Dev banner 1

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

Примечание. Данный код оптимизирован под задачи конкретного web-проекта и опубликован "как есть", вы можете использовать его либо оригинальный код, взятый с сайта девелопера; как вам удобнее.

Развитие темы

 

Изображение 1 Изображение 2 Изображение 3 Изображение 4 Изображение 5 Изображение 6 Изображение 7

Последнее изменениеПонедельник, 02 февраля 2015 05:51

9 комментарии

  • Комментировать Aleksej Четверг, 01 ноября 2012 13:22 написал Aleksej

    Я не вижу смысла, признаться, в размещении ImageFlow в правом сайдбаре... как, впрочем, и в левом; скрипт элементарно для этого не предназначен... на мой взгляд.

  • Комментировать Pahan-Hubbitus Четверг, 01 ноября 2012 13:22 написал Pahan-Hubbitus

    Товарищи, ну там же в коде прямо указаны размеры картинок...

    Поменяйте параметры width/height на нужные и будет вам счастье.

  • Комментировать Валентина Четверг, 01 ноября 2012 09:04 написал Валентина

    Пересмотрела все, что можно было в этом коде, но так и не поняла, как же мне увеличить картинки. Вставила галерею в правый сайтбар, фотки из карусели очень маленького размера. Мой сайт http://vdemchenko.com/. Может кто-то подскажет умную мысль? Заранее спасибо!

  • Комментировать Валентина Среда, 31 октября 2012 21:13 написал Валентина

    Ура!! карусель завертелась! Но остался вопрос. какими параметрами управляется величина картинок? Что-то методом "тыка" пытаюсь разобраться, но пока не получается :-(

  • Комментировать Валентина Среда, 31 октября 2012 20:29 написал Валентина

    уже разобралась с архивом. Его надо взять по адресу: http://finnrudolph.de/ImageFlow/Download

  • Комментировать Валентина Среда, 31 октября 2012 18:50 написал Валентина

    мне очень понравилась галерея, но вот вставить на свой сайт не получается :-( Помогите, пожалуйста!
    Я честно скопировала Ваш код, прописала свои пути к картинкам. Но галерея не получается. Возник вопрос. О каком архиве идет речь в начале статьи, который я должна закачать в корень сайта?

  • Комментировать Aleksej Вторник, 21 августа 2012 17:27 написал Aleksej

    Встречный вопрос - а почему не спросить обо всем этом техподдержку Яндекса? Я элементарно незнаком с "созданными через яндекс" сайтами. Если вам позволено разместить на сайте тот или иной код - в статье подробно расписано, что и как делать. Удачи!

  • Комментировать Алексей001 Вторник, 21 августа 2012 17:08 написал Алексей001

    Добрый день !
    Мне очень понравилась галерея,хочу установить на свой новый сайт созданный через яндекс,возможно ли это ?
    И если да то не подскажете как ее вставить в сайт ?
    Спасибо !

  • Комментировать Arhitektorius Понедельник, 02 апреля 2012 05:17 написал Arhitektorius

    Спасибо большое - скрипт отличный! Кину себе его в копилочку, обязательно пригодится.

Оставить комментарий

Добавьте ваш комментарий