artpolikarpov Nov 30 2011 at 19:55

Фоторама

4 min

55K

Website development*

+286

111

Comments 111

Adrior Nov 30 2011 at 19:56

Классная галерея! Работает из коробки, гибкая, не требует никаких специальных настроек на сервере и клиенте, не ломает сайт при отключённых скриптах, шустро работает на мобильных устройствах. Просто праздник на колёсиках!

kr1z Nov 30 2011 at 20:01

finegoodsmarket.com/view/ тоже очень крутая.

MyStick Dec 1 2011 at 16:12

Однако денег стоит

kyrie Nov 30 2011 at 20:04

Рекомендую вместо формулировки «Использование в корпоративных и/или коммерческих целях следует обсудить со мной» использовать что-то другое. Поставьте цену, или какую-то лицензию — наврядли у кого-то возникнет желание связываться с автором для использования галереи. Некоммерческий проект это, скорее, исключение для обычного веб-разработчика.

Beholder Dec 1 2011 at 13:55

Действительно уж. Не нравится GPL — выставьте хоть BSD.

korvindest Nov 30 2011 at 20:11

Перевел спасибо, на ЯД не большое, но от всей души. Обязательно в ближайшее время воспользуюсь, потому что как раз нужно было именно подобное.
Ну и еще раз просто спасибо! Вы проделали большую работу и получили великолепный результат.

yaroslavpat Nov 30 2011 at 20:13

Очень хороший инструмент. Мы используем Фотораму на студийном сайте для демонстрации состояний одной веб-страницы, например. Очень удобно.

UFO landed and left these words here

artpolikarpov Nov 30 2011 at 20:56

ХТМЛ теперь вставляется штатными средствами, можно даже так:

$('#fotorama').fotorama({
  html: {
    0: '<div class="caption">Раз-раз</div>',
    1: $('#special-ad'),
    2: $('.story').eq(3)
});

Пример на Фидле: jsfiddle.net/artpolikarpov/qB7ft/

UFO landed and left these words here

TiGR Dec 1 2011 at 09:04

Всё же, имхо, логичнее по умолчанию привязывать к title, а не к alt.

r3s3t Nov 30 2011 at 20:31

Если зайти на сайт «Фоторамы» и с зажатым шифтом понаводить курсор на её логотип, будет прикольно. :)

UFO landed and left these words here

artpolikarpov Nov 30 2011 at 21:04

А ещё можно кликнуть по фотке или превьюшке с зажатым альтом или шифтом, и даже с шифтом и альтом разом :-)

TiGR Dec 1 2011 at 09:17

Opera 11.6, Linux. Как-то оно неадекватно работает (срабатывает далеко не каждый раз, и логика не понятна). Плюс в линуксе комбинации alt+click не работают, т.к. alt+click/drag — это функция таскания окна.

homm Dec 1 2011 at 09:18

Ну там не такой уж важный функционал на альте :)

DnV Dec 1 2011 at 17:16

Странно, что не просто по наведению сделано. И так мало кто увидит, а тут вообще только для посвящённых.

artpolikarpov Dec 1 2011 at 17:17

Ну это же пасхальное яйцо.

r3s3t Dec 1 2011 at 17:26

Просто по наведению есть вот тут: talala.ru/works/fotorama/ ;)

willwin Nov 30 2011 at 20:47

Офигенно. Спасибо!

GeorP Nov 30 2011 at 20:57

Отличный плагин, спасибо, что поделились. Выглядит очень аккуратно и эстетично. Субъективно — самый интересный, из которых я видел.

IgorKamenev Nov 30 2011 at 21:01

Из того что сразу бросилось в глаза и напрягло (но может это только мое чувство прекрасного)

Сделайте так, чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад. Иначе выходит, что для прокрутки назад, необходимо поработать снайпером и попасть в стрелочку :)

PS. А все-таки, для коммерческого использования сколько?

artpolikarpov Nov 30 2011 at 21:06

Деньги не обязательны ;-)

TiGR Dec 1 2011 at 09:13

А что тогда? Если на галерее непосредственно деньги не зарабатываются (т.е. фотографии не являются продуктом), она просто используется, например, в блоге или на страницах сайта фирмы. Что тогда?

artpolikarpov Dec 1 2011 at 03:00

Сделал «чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад».

UFO landed and left these words here

artpolikarpov Dec 2 2011 at 13:01

loop: true

shifty Nov 30 2011 at 21:08

Укажите, пожалуйста, на сайте fotoramajs.com ссылочку на GitHub репозиторий.
А то так приходися сохранять в закладки 2 линка, либо фоловить на гитхабе.
Спасибо.

artpolikarpov Nov 30 2011 at 21:21

Можете еще и @fotoramajs зафоловить ;-) А вообще, ссылку на Гитхаб я не пиарю намеренно, продукт сама Фоторама, а не её исходный код.

shifty Nov 30 2011 at 21:24

Понял, маркетинг :)

homm Nov 30 2011 at 21:22

Сохраните в закладки статью.

shifty Nov 30 2011 at 21:23

Дельный совет :)

pro169 Nov 30 2011 at 21:12

Хорошая галерея

из пожеланий:
в демо можно показать как она себя ведет когда картинки разных пропорций, можно еще добавить горячие клавиши (стрелка вперед назад), при клике на последнюю видимую превьюху лучше ставить ее по середине (так быстрее можно будет пробежаться по списку без просмотра каждой картинки)

artpolikarpov Nov 30 2011 at 21:22

Если порефрешить fotoramajs.com, то там будут разные фотки в том числе и не вписывающиеся в заданные пропорции.

homm Nov 30 2011 at 21:26

Быстрее пробежаться по превьюшкам можно просто перетащив их. А сдвиг на одну сделан для того, чтобы можно было неглядя кликать по одному месту и видеть следующую.

pro169 Dec 1 2011 at 00:05

перетаскивание превью круто, но мель кто догадается

можно сделать опцию чтобы и превью и точки были
пример: smotra.ru/users/maks95/gallery/album/131642/view/1124798/

или, что вообще круто будет, добавить взаимодействие со скролом на мышке для превьюх и для фото

artpolikarpov Dec 1 2011 at 00:10

Мышиное колесо в планах.

artpolikarpov Nov 30 2011 at 21:30

Горячие клавиши (стрелки и пробел) прикручены к Трёмдиафильмам с помощью АПИ, описанного в статье. Штатно этого нет потому, что если фоторам на странице несколько не понятно, какой управлять.

pro169 Dec 1 2011 at 00:10

если несколько галерей то можно подключать горячие клавиши к галерее по которой в последний раз кликали или на которую мышку наводили

mas Nov 30 2011 at 22:25

А можно ещё сделать, чтоб по клику в центре картинки показывалась большая оригинальная картин(ищ)а в новом табе?

UFO landed and left these words here

mas Dec 1 2011 at 19:36

Может быть. Честно говоря, не видел примеров, как 4000х3000 откроется в лайтбоксе. Главное, чтоб можно было посмотреть фото 1:1 и сохранить оригинал.

UFO landed and left these words here

pepelsbey Nov 30 2011 at 22:27

Гм, какие-то знакомые картинки для загрузчика и недоступной фотки :) Не из Дакрбокса случайно?

artpolikarpov Nov 30 2011 at 22:44

Глаз — алмаз. Какое будет наказание?

pepelsbey Nov 30 2011 at 22:46

Ну, когда сам рисовал — всегда помнишь ;) Приятно, что пригодились где-то ещё.

pepelsbey Nov 30 2011 at 23:09

Я вот думаю — может повторить успех Фоторамы и довести Даркбокс до ума? Например, поделить код между ними… Будет весьма себе комплексное решение. Ну, так — подумалось.

artpolikarpov Dec 1 2011 at 00:20

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

dima_smol Dec 1 2011 at 11:51

да, да, да. Совсем недавно нужен был именно такой функционал: галерея с превьюшками + открытие большой картинки в лайтбоксе.

В итоге ничего толкового не нашел.

Если сделаете – будет очень здорово!

smok Nov 30 2011 at 22:28

Очень понравилось что можно на тачскрине пальцем пролистывать изображения.

StreetAngel Dec 1 2011 at 00:05

Классно, ещё бы превьюшки подгружались как на geometria.ru

k0t0vsky Dec 1 2011 at 00:20

Использовал, понравилось, думаю буду еще использовать

arnold-sakhnov Dec 1 2011 at 00:36

Мне почему-то кажется, что действия для кликов с зажатыми Alt/Shift перепутаны. Клик+Alt должен листать галерею в обратном направлении, а клик+Shift — «замедлять» переход.

Mikke Dec 1 2011 at 03:04

а как сделать что бы превью генерировались сверху?

artpolikarpov Dec 1 2011 at 03:21

Добавить немного ~~уличной магии~~ CSS:

.fotorama__wrap { top: 58px; }
.fotorama__thumbs { position: absolute; top: 0; }

Живой пример: http://jsfiddle.net/artpolikarpov/tLeD5/.

Mikke Dec 1 2011 at 22:36

меня такой вариант не устраивал, не помню почему, поэтому я залез в библиотеку и заменил на вставку в начала родителя%) хотел метод прикрутить, но не осилил минмизированый код, а вообще было бы круто добавить! Спасибо за плагин!)

UFO landed and left these words here

esc Dec 1 2011 at 04:16

Отличный скрипт, буду внедрять у себя на сайте. Держите донейт (paypal)

snnwolf Dec 1 2011 at 11:09

Может быть не в тему, но уже не в первый раз (вчера такое было на mail.yandex.ru)…
Зашел на сайт скрипта и увидел синюю страницу

OS. CalculateLinux
Br. 15.0.874.121 (Сборка для разработчиков 0 Linux)

Кто-нить может подсказать что это может быть. Такое ощущение, что из-за css3.

artpolikarpov Dec 1 2011 at 13:09

Да, это 3d-трансформации так иногда глючат. Чаще на слабых компах.

tehnolog Dec 1 2011 at 13:01

Прошу прощения, а можно использовать эффект затемнения вместо слайда? Что-то не вижу в настройках.

artpolikarpov Dec 1 2011 at 13:07

touchStyle: false;

ksupipr Dec 1 2011 at 13:22

во! то что надо. Прям сегодня и опробуем.

ksupipr Dec 1 2011 at 14:05

Подскажите, можно ли при бездействии пользователя, скажем в 20 секунд, автоматом перелистывать картинку?

artpolikarpov Dec 1 2011 at 17:21

В статье есть даже ссылка на пример слайд-шоу, сделанного с помощью АПИ Фоторамы:
jsfiddle.net/artpolikarpov/JAw2t/

Вот пример попроще:
jsfiddle.net/artpolikarpov/uBmD5/

Штатного функционала для авто-проигрывания нет.

ksupipr Dec 2 2011 at 07:13

оу. спасибо за ответ! Сделал пока примерно как в «примитивном», сейчас переделаю по 1му примеру.

UFO landed and left these words here

Terion Dec 1 2011 at 14:36

Мне кажется, очень не хватает управления с клавиатуры.
А так да — очень хорошая галерейка

UFO landed and left these words here

bolk Dec 1 2011 at 17:07

Артём, ты меня игнорируешь в почте :( Вопрос есть по твоему плагину.

artpolikarpov Dec 1 2011 at 17:11

Женя, я лёг под хабраэффектом. Сейчас отвечу.

ola Dec 2 2011 at 09:03

Суперски!
Есть одно пожелание: при наведении на фотку показывать яркими белыми не обе стрелки, а только ту, куда произойдет перемотка, если кликнем в этом месте. А вторую стрелку подсветить бледней, типа есть обе, но сейчас активная вот эта, что ярче. Мне думается, это было бы удобно.

artpolikarpov Dec 2 2011 at 13:04

Возможно, так и сделаю.

juicy Dec 2 2011 at 23:06

А есть какая-то возможность не грузить все превью сразу?

artpolikarpov Dec 3 2011 at 02:05

Сейчас нет.

juicy Dec 3 2011 at 02:11

А есть идеи как это сделать? Нужно прямо сейчас ). Как я понимаю ограничение только в том, что без загрузки нельзя узнать размеры?

artpolikarpov Dec 3 2011 at 02:17

«Нужно прямо сейчас» не получится.

artpolikarpov Dec 3 2011 at 04:12

А вообще, напишите подробнее, что у вас есть и что вы хотите получить. Примеры кода и ссылки ускорят ответ.

KonstRuctor Dec 4 2011 at 21:48

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

svoyak Dec 5 2011 at 00:57

margin: 0 auto?

artpolikarpov Dec 5 2011 at 12:12

Да, нужен авто-маргин и явная ширина для блока .fotorama, например так:

.fotorama { width: 700px; margin 0 auto; }

deforcer Dec 5 2011 at 15:31

Почему на страницах при использовании Фоторамы scrollbar окрашивается в непонятный цвет? Как это убрать?
Замечено в Хроме — my.jetscreenshot.com/2366/20111205-iwmq-246kb.jpg

artpolikarpov Dec 5 2011 at 15:48

Офигеть! Это на всех-всех страницах с Фоторамой или только на fotoramajs.com?

deforcer Dec 5 2011 at 16:13

Ну походу везде ;)

А еще глюк заметил в Хроме. При масштабировании окна происходит нечто странное. Скажем берем правый край окна и уменьшаем его — скроллбар глючит. Вот например — my.jetscreenshot.com/2366/20111205-m8qm-205kb.jpg

У меня к сожалению нет возможности проверить на других компах.

deforcer Dec 5 2011 at 15:53

Проверил несколько браузеров.
В Опере, FF и Safari все окей.

GoodWin59 Dec 7 2011 at 22:32

Прикрутил этот скрипт на сайт на котором используется jquery 1.2.6. Возникла проблема при использовании jquery 1.2.6 не работает фоторама, при использовании jquery 1.7.1 не работает часть функционала на сайте. Подскажите как можно решить эту проблему, сам я в яве не силен. Заранее спасибо.

artpolikarpov Dec 8 2011 at 06:28

Попробуйте такой «хак»:
1) подключаете оба jquery и Фотораму;
2) в 1.7.1 и в fotorama.js делаете поиск с заменой jQuery → jQuery171 (регистр важен);
3) профит!

GoodWin59 Dec 8 2011 at 08:17

К сожалению не помогло.

Devich Dec 8 2011 at 00:20

Отличный плагин, спасибо!
Как сделать чтобы при touchStyle: false не пропадали стрелки (при этом стоит arrows: true)? Это баг или фича?

artpolikarpov Dec 8 2011 at 06:16

На сегодняшний день — это фича :-)

blagoy Dec 11 2011 at 18:57

Плагин — мечта!

Пол дня колдую, но отступ снизу так и остался — strelcova.com/ipad.html

Не хочет галерея все свободное пространство занимать.

artpolikarpov Dec 11 2011 at 19:11

Не хочет, потому что resize: true сделан не для полноэкранного режима, а для вписывания в колонки вёрстки. При этом плагин всегда следит, чтобы не вылезти за высоту экрана.

Для полноэкранного режима воспользуйтесь АПИ, после инициализации Фоторамы напишите:

var $window = $(window);
function fullScreen() {
  var windowWidth = $window.width();
  var windowHeight = $window.height();
  $('#fotorama').trigger('rescale', [windowWidth, windowHeight]);
}
fullScreen();
$window.resize(function(){
  fullScreen();
});

В опциях уберите resize: true, cropToFit — по вкусу ;-)

artpolikarpov Dec 11 2011 at 19:58

Кстати, чтобы и превьюшки влезли в экран, нужно как-то так сделать:

var windowHeight = $window.height() - $('.fotorama__thumbs', '#fotorama').height();

blagoy Dec 11 2011 at 20:06

Я немного по-другому сделал, немного изменил в css и получилось именно то, что я хотел: точки-индикаторы над картинкой.

Изменения в css:
.fotorama__wrap { margin-bottom: -20px; position: relative; overflow: hidden; *zoom: 1; background-color: #323130; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none;}

.fotorama__thumbs {text-align: center; position: relative; min-height: 18px; font-size: 0; line-height: 0; z-index: 10;}

blagoy Dec 11 2011 at 20:17

На айпаде —

blagoy Dec 11 2011 at 20:22

strelcova.com/1.png

UFO landed and left these words here

artpolikarpov Dec 12 2011 at 16:16

Ломаются скрытые галереи скорее всего из-за того, что скрываются через display: none, рекомендую попробовать другие способы, например position: absolute; visibility: hidden.

UFO landed and left these words here

Attlant Feb 9 2012 at 21:42

Уже день сижу думаю как встроить социальные лайки от контакта и фейсбука. Идея в том что у каждой фотографии будет отдельный адрес и нужно автоматически подставлять этот уникальный url для каждой фотографии в параметры социокнопки. Можно было бы сделать через html но не хочется чтобы еще и кнопки летали, да и код громоздкий получается.

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

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

Battletoads Nov 19 2012 at 12:36

Если не секрет, получилось встроить в fullscreen вариант лайки и каким образом?

mprokopov Apr 1 2012 at 18:07

Спасибо большое за отменную работу. Плагин очень пригодился, сделал галерею с «flash degradation» -> html5 на photo.kiev.ua

karvai Aug 10 2012 at 05:10

извиняюсь за нубство но не могу сделать что бы контейнер был на 100% а фото оставались орегинальными (ширина фысота) ставлю 100% в

karvai Aug 10 2012 at 05:16

в

не проходит 100% так как контейнер и картинки идут все на 100% а нужно только контейнер, вот так:

artpolikarpov Aug 10 2012 at 09:32

Попробуйте zoomToFit:false?

bNN Sep 10 2012 at 19:31

Сейчас ничего не изменилось в лицензировании — для личного использования бесплатная?

artpolikarpov Sep 11 2012 at 16:46

fotoramajs.com/license/

bNN Sep 11 2012 at 17:05

Я это читал, но так и не понял ответа на свой вопрос.

Как выдается лицензия? Как проверяется на скольких доменах используется? На честном слове?