Website development
Comments 111
+25
Классная галерея! Работает из коробки, гибкая, не требует никаких специальных настроек на сервере и клиенте, не ломает сайт при отключённых скриптах, шустро работает на мобильных устройствах. Просто праздник на колёсиках!
+31
Рекомендую вместо формулировки «Использование в корпоративных и/или коммерческих целях следует обсудить со мной» использовать что-то другое. Поставьте цену, или какую-то лицензию — наврядли у кого-то возникнет желание связываться с автором для использования галереи. Некоммерческий проект это, скорее, исключение для обычного веб-разработчика.
+1
Перевел спасибо, на ЯД не большое, но от всей души. Обязательно в ближайшее время воспользуюсь, потому что как раз нужно было именно подобное.
Ну и еще раз просто спасибо! Вы проделали большую работу и получили великолепный результат.
+2
Очень хороший инструмент. Мы используем Фотораму на студийном сайте для демонстрации состояний одной веб-страницы, например. Очень удобно.
UFO landed and left these words here
UFO landed and left these words here
+2
ХТМЛ теперь вставляется штатными средствами, можно даже так:
$('#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
UFO landed and left these words here
UFO landed and left these words here
+2
Всё же, имхо, логичнее по умолчанию привязывать к title, а не к alt.
+5
Если зайти на сайт «Фоторамы» и с зажатым шифтом понаводить курсор на её логотип, будет прикольно. :)
UFO landed and left these words here
+3
А ещё можно кликнуть по фотке или превьюшке с зажатым альтом или шифтом, и даже с шифтом и альтом разом :-)
0
Opera 11.6, Linux. Как-то оно неадекватно работает (срабатывает далеко не каждый раз, и логика не понятна). Плюс в линуксе комбинации alt+click не работают, т.к. alt+click/drag — это функция таскания окна.
0
Странно, что не просто по наведению сделано. И так мало кто увидит, а тут вообще только для посвящённых.
+1
Отличный плагин, спасибо, что поделились. Выглядит очень аккуратно и эстетично. Субъективно — самый интересный, из которых я видел.
+2
Из того что сразу бросилось в глаза и напрягло (но может это только мое чувство прекрасного)

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

PS. А все-таки, для коммерческого использования сколько?
0
А что тогда? Если на галерее непосредственно деньги не зарабатываются (т.е. фотографии не являются продуктом), она просто используется, например, в блоге или на страницах сайта фирмы. Что тогда?
+1
Сделал «чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад».
UFO landed and left these words here
0
Укажите, пожалуйста, на сайте fotoramajs.com ссылочку на GitHub репозиторий.
А то так приходися сохранять в закладки 2 линка, либо фоловить на гитхабе.
Спасибо.
+1
Можете еще и @fotoramajs зафоловить ;-) А вообще, ссылку на Гитхаб я не пиарю намеренно, продукт сама Фоторама, а не её исходный код.
0
Хорошая галерея

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

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

или, что вообще круто будет, добавить взаимодействие со скролом на мышке для превьюх и для фото
+1
Горячие клавиши (стрелки и пробел) прикручены к Трёмдиафильмам с помощью АПИ, описанного в статье. Штатно этого нет потому, что если фоторам на странице несколько не понятно, какой управлять.
0
если несколько галерей то можно подключать горячие клавиши к галерее по которой в последний раз кликали или на которую мышку наводили
+1
А можно ещё сделать, чтоб по клику в центре картинки показывалась большая оригинальная картин(ищ)а в новом табе?
UFO landed and left these words here
0
Может быть. Честно говоря, не видел примеров, как 4000х3000 откроется в лайтбоксе. Главное, чтоб можно было посмотреть фото 1:1 и сохранить оригинал.
UFO landed and left these words here
+4
Ну, когда сам рисовал — всегда помнишь ;) Приятно, что пригодились где-то ещё.
+3
Я вот думаю — может повторить успех Фоторамы и довести Даркбокс до ума? Например, поделить код между ними… Будет весьма себе комплексное решение. Ну, так — подумалось.
+2
Не знаю стоит ли их дружить, но некоторые идеи по Дакбоксу у меня есть. С удовольствием пообщаюсь с тобой про это.
0
да, да, да. Совсем недавно нужен был именно такой функционал: галерея с превьюшками + открытие большой картинки в лайтбоксе.

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

Если сделаете – будет очень здорово!
0
Очень понравилось что можно на тачскрине пальцем пролистывать изображения.
0
Мне почему-то кажется, что действия для кликов с зажатыми Alt/Shift перепутаны. Клик+Alt должен листать галерею в обратном направлении, а клик+Shift — «замедлять» переход.
0
меня такой вариант не устраивал, не помню почему, поэтому я залез в библиотеку и заменил на вставку в начала родителя%) хотел метод прикрутить, но не осилил минмизированый код, а вообще было бы круто добавить! Спасибо за плагин!)
UFO landed and left these words here
0
Отличный скрипт, буду внедрять у себя на сайте. Держите донейт (paypal)
-1
Может быть не в тему, но уже не в первый раз (вчера такое было на mail.yandex.ru)…
Зашел на сайт скрипта и увидел синюю страницу

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

Кто-нить может подсказать что это может быть. Такое ощущение, что из-за css3.
0
Прошу прощения, а можно использовать эффект затемнения вместо слайда? Что-то не вижу в настройках.
0
Подскажите, можно ли при бездействии пользователя, скажем в 20 секунд, автоматом перелистывать картинку?
0
оу. спасибо за ответ! Сделал пока примерно как в «примитивном», сейчас переделаю по 1му примеру.
UFO landed and left these words here
0
Мне кажется, очень не хватает управления с клавиатуры.
А так да — очень хорошая галерейка
UFO landed and left these words here
0
Артём, ты меня игнорируешь в почте :( Вопрос есть по твоему плагину.
+2
Суперски!
Есть одно пожелание: при наведении на фотку показывать яркими белыми не обе стрелки, а только ту, куда произойдет перемотка, если кликнем в этом месте. А вторую стрелку подсветить бледней, типа есть обе, но сейчас активная вот эта, что ярче. Мне думается, это было бы удобно.
0
А есть какая-то возможность не грузить все превью сразу?
0
А есть идеи как это сделать? Нужно прямо сейчас ). Как я понимаю ограничение только в том, что без загрузки нельзя узнать размеры?
0
А вообще, напишите подробнее, что у вас есть и что вы хотите получить. Примеры кода и ссылки ускорят ответ.
0
Спасибо за плагин! Не смог разобраться как див с фоторамой поместить по центру резиновой страницы, чтобы при изменения размеров браузера он всегда был по центру.
0
Да, нужен авто-маргин и явная ширина для блока .fotorama, например так:
.fotorama { width: 700px; margin 0 auto; }
0
Офигеть! Это на всех-всех страницах с Фоторамой или только на fotoramajs.com?
0
Ну походу везде ;)

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

У меня к сожалению нет возможности проверить на других компах.
0
Прикрутил этот скрипт на сайт на котором используется jquery 1.2.6. Возникла проблема при использовании jquery 1.2.6 не работает фоторама, при использовании jquery 1.7.1 не работает часть функционала на сайте. Подскажите как можно решить эту проблему, сам я в яве не силен. Заранее спасибо.
0
Попробуйте такой «хак»:
1) подключаете оба jquery и Фотораму;
2) в 1.7.1 и в fotorama.js делаете поиск с заменой jQuery → jQuery171 (регистр важен);
3) профит!
0
Отличный плагин, спасибо!
Как сделать чтобы при touchStyle: false не пропадали стрелки (при этом стоит arrows: true)? Это баг или фича?
+1
Плагин — мечта!

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

Не хочет галерея все свободное пространство занимать.
0
Не хочет, потому что 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 — по вкусу ;-)
0
Кстати, чтобы и превьюшки влезли в экран, нужно как-то так сделать:
var windowHeight = $window.height() - $('.fotorama__thumbs', '#fotorama').height();
0
Я немного по-другому сделал, немного изменил в 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;}
UFO landed and left these words here
0
Ломаются скрытые галереи скорее всего из-за того, что скрываются через display: none, рекомендую попробовать другие способы, например position: absolute; visibility: hidden.
UFO landed and left these words here
0
Уже день сижу думаю как встроить социальные лайки от контакта и фейсбука. Идея в том что у каждой фотографии будет отдельный адрес и нужно автоматически подставлять этот уникальный url для каждой фотографии в параметры социокнопки. Можно было бы сделать через html но не хочется чтобы еще и кнопки летали, да и код громоздкий получается.

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

Полноэкранный режим подсмотрел на диафильмах, отлично работает с настройками по умолчанию, но при подключении фишки сворачивания превью остается пустое место снизу.
Может кому пригодится — листание стрелками клавиатуры тоже из диафильмов, листание колесиком мышки — плагин jquery.mousewheel
0
Если не секрет, получилось встроить в fullscreen вариант лайки и каким образом?
0
Спасибо большое за отменную работу. Плагин очень пригодился, сделал галерею с «flash degradation» -> html5 на photo.kiev.ua
0
извиняюсь за нубство но не могу сделать что бы контейнер был на 100% а фото оставались орегинальными (ширина фысота) ставлю 100% в

0
в

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

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

Как выдается лицензия? Как проверяется на скольких доменах используется? На честном слове?
Only those users with full accounts are able to leave comments.  , please.