Фоторама

[Adrior]

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

[kr1z]

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

[MyStick]

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

[kyrie]

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

[Beholder]

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

[korvindest]

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

[yaroslavpat]

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

[artpolikarpov]

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

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

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

[TiGR]

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

[r3s3t]

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

[artpolikarpov]

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

[TiGR]

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

[homm]

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

[DnV]

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

[artpolikarpov]

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

[r3s3t]

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

[willwin]

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

[GeorP]

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

[IgorKamenev]

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

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

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

[artpolikarpov]

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

[TiGR]

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

[artpolikarpov]

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

[artpolikarpov]

loop: true

[shifty]

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

[artpolikarpov]

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

[shifty]

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

[homm]

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

[shifty]

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

[pro169]

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

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

[artpolikarpov]

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

[homm]

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

[pro169]

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

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

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

[artpolikarpov]

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

[artpolikarpov]

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

[pro169]

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

[mas]

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

[mas]

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

[pepelsbey]

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

[artpolikarpov]

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

[pepelsbey]

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

[pepelsbey]

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

[artpolikarpov]

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

[dima_smol]

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

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

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

[smok]

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

[StreetAngel]

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

[k0t0vsky]

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

[arnold-sakhnov]

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

[Mikke]

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

[artpolikarpov]

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

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

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

[Mikke]

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

[esc]

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

[snnwolf]

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

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

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

[artpolikarpov]

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

[tehnolog]

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

[artpolikarpov]

touchStyle: false;

[ksupipr]

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

[ksupipr]

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

[artpolikarpov]

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

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

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

[ksupipr]

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

[Terion]

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

[bolk]

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

[artpolikarpov]

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

[ola]

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

[artpolikarpov]

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

[juicy]

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

[artpolikarpov]

Сейчас нет.

[juicy]

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

[artpolikarpov]

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

[artpolikarpov]

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

[KonstRuctor]

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

[svoyak]

margin: 0 auto?

[artpolikarpov]

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

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

[deforcer]

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

[artpolikarpov]

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

[deforcer]

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

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

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

[deforcer]

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

[GoodWin59]

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

[artpolikarpov]

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

[GoodWin59]

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

[Devich]

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

[artpolikarpov]

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

[blagoy]

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

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

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

[artpolikarpov]

Не хочет, потому что 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]

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

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

[blagoy]

Я немного по-другому сделал, немного изменил в 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]

На айпаде —

[blagoy]

strelcova.com/1.png

[artpolikarpov]

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

[Attlant]

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

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

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

[Battletoads]

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

[mprokopov]

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

[karvai]

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

[karvai]

в

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

[artpolikarpov]

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

[bNN]

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

[artpolikarpov]

fotoramajs.com/license/

[bNN]

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

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