Цитата сообщения Иван_Победоносов

Как создать простую галерею из фотографий



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

Перед вами готовая галерея из 10 красивых фотографий. Такими галереями вы можете украшать свои записи, при этом можно использовать различные комбинации. Направлять картинку с лева на право или с право на лево, вверх или вниз и т.д. А теперь я расскажу вам как в течении 10 минут сделать данную галерею.

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

Код для вставки галереи:
<marquee scrollamount="2" scrolldelay="5">Сюда вставляем коды фотографий</marquee>

Код фотографии должен выглядеть не как обычный адрес, а вот так:
<img data-cke-saved-src="//img-fotki.yandex.ru/get/4309/ivanpobeda.95/0_219b6_fc624384_XL.jpg" src="//img-fotki.yandex.ru/get/4309/ivanpobeda.95/0_219b6_fc624384_XL.jpg" width="800" height="739" title="Bernd Zeisberg" alt="Bernd Zeisberg" />

Итак, вы вставили коды фотографий вместо слов "Сюда вставляем коды фотографий". Теперь приступим к регулированию скорости прокрутки. Параметр scrollamount="2" отвечает за скорость прокрутки. Если вы хотите увеличить скорость, замените 2 на другое число. Параметр scrolldelay="1" отвечает за задержку перед каждым новым движением. Если вы хотите чтобы картинка двигалась с большими задержками, тогда поставьте число 500 или 1000, если же хотите движение без тормозов то не трогайте данный параметр. Полученный код публикуем блог и радуем читателя.

Помимо большой галереи, вы можете сделать маленькую, загрузив небольшие фотографии (ширина 150). Делается всё так же, просто вместо больших фоток вставляете маленькие. Посмотрите как классно получилось.

Далее я расскажу вам как ещё можно разнообразить уже созданную галерею. К примеру вы хотите, чтобы фотографии шли не с право на лево, а наоборот. Для этого добавьте в код команду direction="right". Если вы хотите, чтобы фотографии ходили с право на лево а потом обратно, вставьте в код галереи команду behavior="alternate".

Если вы хотите пустить фотографии с верху вниз или снизу вверх воспользуйтесь данными командами:
direction="down" - фотографии идут с верху вниз;
direction="up" - фотографии идут с низу вверх.

Для регулирования ширины и высоты вставляйте данные команды в код галереи:
width="500" - данная команда регулирует ширину галереи. Щяс стоит цифра 500, значит ширина галереи будет сужена до 500 пикселей;
height="500" - данная команда регулирует высоту галереи. Щяс стоит цифра 500, значит высота галереи будет сужена до 500 пикселей.

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