Комментарии 111
Классная галерея! Работает из коробки, гибкая, не требует никаких специальных настроек на сервере и клиенте, не ломает сайт при отключённых скриптах, шустро работает на мобильных устройствах. Просто праздник на колёсиках!
+25
finegoodsmarket.com/view/ тоже очень крутая.
+3
Рекомендую вместо формулировки «Использование в корпоративных и/или коммерческих целях следует обсудить со мной» использовать что-то другое. Поставьте цену, или какую-то лицензию — наврядли у кого-то возникнет желание связываться с автором для использования галереи. Некоммерческий проект это, скорее, исключение для обычного веб-разработчика.
+31
Перевел спасибо, на ЯД не большое, но от всей души. Обязательно в ближайшее время воспользуюсь, потому что как раз нужно было именно подобное.
Ну и еще раз просто спасибо! Вы проделали большую работу и получили великолепный результат.
Ну и еще раз просто спасибо! Вы проделали большую работу и получили великолепный результат.
+1
Очень хороший инструмент. Мы используем Фотораму на студийном сайте для демонстрации состояний одной веб-страницы, например. Очень удобно.
+2
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
ХТМЛ теперь вставляется штатными средствами, можно даже так:
Пример на Фидле: jsfiddle.net/artpolikarpov/qB7ft/
$('#fotorama').fotorama({
html: {
0: '<div class="caption">Раз-раз</div>',
1: $('#special-ad'),
2: $('.story').eq(3)
});
Пример на Фидле: jsfiddle.net/artpolikarpov/qB7ft/
+2
Если зайти на сайт «Фоторамы» и с зажатым шифтом понаводить курсор на её логотип, будет прикольно. :)
+5
НЛО прилетело и опубликовало эту надпись здесь
А ещё можно кликнуть по фотке или превьюшке с зажатым альтом или шифтом, и даже с шифтом и альтом разом :-)
+3
Странно, что не просто по наведению сделано. И так мало кто увидит, а тут вообще только для посвящённых.
0
Ну это же пасхальное яйцо.
+1
Просто по наведению есть вот тут: talala.ru/works/fotorama/ ;)
0
Офигенно. Спасибо!
0
Отличный плагин, спасибо, что поделились. Выглядит очень аккуратно и эстетично. Субъективно — самый интересный, из которых я видел.
+1
Из того что сразу бросилось в глаза и напрягло (но может это только мое чувство прекрасного)
Сделайте так, чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад. Иначе выходит, что для прокрутки назад, необходимо поработать снайпером и попасть в стрелочку :)
PS. А все-таки, для коммерческого использования сколько?
Сделайте так, чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад. Иначе выходит, что для прокрутки назад, необходимо поработать снайпером и попасть в стрелочку :)
PS. А все-таки, для коммерческого использования сколько?
+2
Деньги не обязательны ;-)
+3
Сделал «чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад».
+1
Укажите, пожалуйста, на сайте fotoramajs.com ссылочку на GitHub репозиторий.
А то так приходися сохранять в закладки 2 линка, либо фоловить на гитхабе.
Спасибо.
А то так приходися сохранять в закладки 2 линка, либо фоловить на гитхабе.
Спасибо.
0
Хорошая галерея
из пожеланий:
в демо можно показать как она себя ведет когда картинки разных пропорций, можно еще добавить горячие клавиши (стрелка вперед назад), при клике на последнюю видимую превьюху лучше ставить ее по середине (так быстрее можно будет пробежаться по списку без просмотра каждой картинки)
из пожеланий:
в демо можно показать как она себя ведет когда картинки разных пропорций, можно еще добавить горячие клавиши (стрелка вперед назад), при клике на последнюю видимую превьюху лучше ставить ее по середине (так быстрее можно будет пробежаться по списку без просмотра каждой картинки)
0
Если порефрешить fotoramajs.com, то там будут разные фотки в том числе и не вписывающиеся в заданные пропорции.
+1
Быстрее пробежаться по превьюшкам можно просто перетащив их. А сдвиг на одну сделан для того, чтобы можно было неглядя кликать по одному месту и видеть следующую.
+1
перетаскивание превью круто, но мель кто догадается
можно сделать опцию чтобы и превью и точки были
пример: smotra.ru/users/maks95/gallery/album/131642/view/1124798/
или, что вообще круто будет, добавить взаимодействие со скролом на мышке для превьюх и для фото
можно сделать опцию чтобы и превью и точки были
пример: smotra.ru/users/maks95/gallery/album/131642/view/1124798/
или, что вообще круто будет, добавить взаимодействие со скролом на мышке для превьюх и для фото
0
Горячие клавиши (стрелки и пробел) прикручены к Трёмдиафильмам с помощью АПИ, описанного в статье. Штатно этого нет потому, что если фоторам на странице несколько не понятно, какой управлять.
+1
А можно ещё сделать, чтоб по клику в центре картинки показывалась большая оригинальная картин(ищ)а в новом табе?
+1
Глаз — алмаз. Какое будет наказание?
+3
Ну, когда сам рисовал — всегда помнишь ;) Приятно, что пригодились где-то ещё.
+4
Я вот думаю — может повторить успех Фоторамы и довести Даркбокс до ума? Например, поделить код между ними… Будет весьма себе комплексное решение. Ну, так — подумалось.
+3
Не знаю стоит ли их дружить, но некоторые идеи по Дакбоксу у меня есть. С удовольствием пообщаюсь с тобой про это.
+2
да, да, да. Совсем недавно нужен был именно такой функционал: галерея с превьюшками + открытие большой картинки в лайтбоксе.
В итоге ничего толкового не нашел.
Если сделаете – будет очень здорово!
В итоге ничего толкового не нашел.
Если сделаете – будет очень здорово!
0
Очень понравилось что можно на тачскрине пальцем пролистывать изображения.
0
Классно, ещё бы превьюшки подгружались как на geometria.ru
0
Использовал, понравилось, думаю буду еще использовать
0
Мне почему-то кажется, что действия для кликов с зажатыми Alt/Shift перепутаны. Клик+Alt должен листать галерею в обратном направлении, а клик+Shift — «замедлять» переход.
0
а как сделать что бы превью генерировались сверху?
0
Добавить немного уличной магии CSS:
Живой пример: http://jsfiddle.net/artpolikarpov/tLeD5/.
.fotorama__wrap { top: 58px; }
.fotorama__thumbs { position: absolute; top: 0; }
Живой пример: http://jsfiddle.net/artpolikarpov/tLeD5/.
+2
Отличный скрипт, буду внедрять у себя на сайте. Держите донейт (paypal)
0
-1
Прошу прощения, а можно использовать эффект затемнения вместо слайда? Что-то не вижу в настройках.
0
во! то что надо. Прям сегодня и опробуем.
+1
Подскажите, можно ли при бездействии пользователя, скажем в 20 секунд, автоматом перелистывать картинку?
0
В статье есть даже ссылка на пример слайд-шоу, сделанного с помощью АПИ Фоторамы:
jsfiddle.net/artpolikarpov/JAw2t/
Вот пример попроще:
jsfiddle.net/artpolikarpov/uBmD5/
Штатного функционала для авто-проигрывания нет.
jsfiddle.net/artpolikarpov/JAw2t/
Вот пример попроще:
jsfiddle.net/artpolikarpov/uBmD5/
Штатного функционала для авто-проигрывания нет.
0
Мне кажется, очень не хватает управления с клавиатуры.
А так да — очень хорошая галерейка
А так да — очень хорошая галерейка
0
Артём, ты меня игнорируешь в почте :( Вопрос есть по твоему плагину.
0
Суперски!
Есть одно пожелание: при наведении на фотку показывать яркими белыми не обе стрелки, а только ту, куда произойдет перемотка, если кликнем в этом месте. А вторую стрелку подсветить бледней, типа есть обе, но сейчас активная вот эта, что ярче. Мне думается, это было бы удобно.
Есть одно пожелание: при наведении на фотку показывать яркими белыми не обе стрелки, а только ту, куда произойдет перемотка, если кликнем в этом месте. А вторую стрелку подсветить бледней, типа есть обе, но сейчас активная вот эта, что ярче. Мне думается, это было бы удобно.
+2
А есть какая-то возможность не грузить все превью сразу?
0
Спасибо за плагин! Не смог разобраться как див с фоторамой поместить по центру резиновой страницы, чтобы при изменения размеров браузера он всегда был по центру.
0
Почему на страницах при использовании Фоторамы scrollbar окрашивается в непонятный цвет? Как это убрать?
Замечено в Хроме — my.jetscreenshot.com/2366/20111205-iwmq-246kb.jpg
Замечено в Хроме — my.jetscreenshot.com/2366/20111205-iwmq-246kb.jpg
0
Офигеть! Это на всех-всех страницах с Фоторамой или только на fotoramajs.com?
0
Ну походу везде ;)
А еще глюк заметил в Хроме. При масштабировании окна происходит нечто странное. Скажем берем правый край окна и уменьшаем его — скроллбар глючит. Вот например — my.jetscreenshot.com/2366/20111205-m8qm-205kb.jpg
У меня к сожалению нет возможности проверить на других компах.
А еще глюк заметил в Хроме. При масштабировании окна происходит нечто странное. Скажем берем правый край окна и уменьшаем его — скроллбар глючит. Вот например — my.jetscreenshot.com/2366/20111205-m8qm-205kb.jpg
У меня к сожалению нет возможности проверить на других компах.
0
Проверил несколько браузеров.
В Опере, FF и Safari все окей.
В Опере, FF и Safari все окей.
0
Прикрутил этот скрипт на сайт на котором используется jquery 1.2.6. Возникла проблема при использовании jquery 1.2.6 не работает фоторама, при использовании jquery 1.7.1 не работает часть функционала на сайте. Подскажите как можно решить эту проблему, сам я в яве не силен. Заранее спасибо.
0
Отличный плагин, спасибо!
Как сделать чтобы при touchStyle: false не пропадали стрелки (при этом стоит arrows: true)? Это баг или фича?
Как сделать чтобы при touchStyle: false не пропадали стрелки (при этом стоит arrows: true)? Это баг или фича?
0
Плагин — мечта!
Пол дня колдую, но отступ снизу так и остался — strelcova.com/ipad.html
Не хочет галерея все свободное пространство занимать.
Пол дня колдую, но отступ снизу так и остался — strelcova.com/ipad.html
Не хочет галерея все свободное пространство занимать.
+1
Не хочет, потому что
Для полноэкранного режима воспользуйтесь АПИ, после инициализации Фоторамы напишите:
В опциях уберите
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;}
Изменения в 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;}
0
НЛО прилетело и опубликовало эту надпись здесь
Уже день сижу думаю как встроить социальные лайки от контакта и фейсбука. Идея в том что у каждой фотографии будет отдельный адрес и нужно автоматически подставлять этот уникальный url для каждой фотографии в параметры социокнопки. Можно было бы сделать через html но не хочется чтобы еще и кнопки летали, да и код громоздкий получается.
Не хватает возможности скрытия/показа основного блока с фотографией чтобы по умолчанию была видна карусель с превью, а при клике врубался полноэкранный режим уже с отображением больших фотографий.
Полноэкранный режим подсмотрел на диафильмах, отлично работает с настройками по умолчанию, но при подключении фишки сворачивания превью остается пустое место снизу.
Может кому пригодится — листание стрелками клавиатуры тоже из диафильмов, листание колесиком мышки — плагин jquery.mousewheel
Не хватает возможности скрытия/показа основного блока с фотографией чтобы по умолчанию была видна карусель с превью, а при клике врубался полноэкранный режим уже с отображением больших фотографий.
Полноэкранный режим подсмотрел на диафильмах, отлично работает с настройками по умолчанию, но при подключении фишки сворачивания превью остается пустое место снизу.
Может кому пригодится — листание стрелками клавиатуры тоже из диафильмов, листание колесиком мышки — плагин jquery.mousewheel
0
Спасибо большое за отменную работу. Плагин очень пригодился, сделал галерею с «flash degradation» -> html5 на photo.kiev.ua
0
извиняюсь за нубство но не могу сделать что бы контейнер был на 100% а фото оставались орегинальными (ширина фысота) ставлю 100% в
0
в
не проходит 100% так как контейнер и картинки идут все на 100% а нужно только контейнер, вот так:
не проходит 100% так как контейнер и картинки идут все на 100% а нужно только контейнер, вот так:
0
Сейчас ничего не изменилось в лицензировании — для личного использования бесплатная?
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Фоторама