Как стать автором
Обновить

Комментарии 63

Симпатично и аккуратно выглядит!
В код не смотрел, но по первому впечатлению — на твердую 5.
Вот только независимость от фреймворков при не самом маленьком размере — сомнительное преимущество :)
Можно было бы сделать сборки/адаптеры под другие библиотеки.
Несколько замечаний:
— Во время загрузки картинки стоит показывать спиннер
— нижняя панелька выглядит здорово, но теряется на черном фоне и, на мой взгляд, мелковата. И может не стоит ее прятать на время загрузки следующей картинки?
Есть ли возможность изменить вид панели/разместить ее на самой картинке?
Под какой лицензией распространяете?
2 версия была под JQuery и это меня страшно раздражало =) поэтому решил эту версию сделать автономной. Спиннер при загрузке показывается, если не показался то причины 2: либо я его коряво прописал на своем сайте (замылился уже и сейчас исправлю), либо вы его просто не успеваете увидеть так как он плавно появляется за 200мс кажется а после отрабатывания onload так же плавно исчезает. если он успевает начать исчезать ещё не появившись — вы его не увидите.
Нижняя панелька многих раздражала — я сделал её менее заметной, в любом случае будет выпущено ещё несколько стилей оформления и панель я перерисую, спасибо за предложение. скрывать её необходимо для того, чтобы не была видна смена активности кнопок и появление и исчезновение кнопки изменения размера изображения. Да, разместить панель на вьюпорте можно, для этого можно включить малую панель. Справа на странице две ссылки для их горячего переключения.
Распространяю бесплатно при условии сохранения целостности. Лицензия GPL.

Большое спасибо за отзыв!
Да, я корявый — спиннер исправил =)
Ну можно ее (панельку) не задвигать за картинку (это движение очень сильно привлекает внимание) а менять прозрачность.
А почему не BSD лицензия?
А разница столь существенна?
Невозможность использовать в коммерческих проектах
Это не GPL. И там черным по розовому написано — для некоммерческого использования
> написано — для некоммерческого использования
и я о том же, значит перепутал
Все плохо. Когда я навожу на картинку, появляются кнопки вперед-назад. Когда я пытаюсь навести на эти кнопки, они пропадают. При этом догадаться, что это не кнопки, а кликать можно по самому изображению, невозможно, потому что курсор имеет форму стрелки.
Панель вверх-вниз прыгает при смене картинок, тоже не хорошо. А 2 кнопки для управления слайдшоу — перебор.
курсор исправлю, а что касается понимания, что именно нажатия на изображение переключают его — это специфика всей линейки подобных скриптов, классика грубо говоря.
Ну так отойдите от классики. У меня те же замечания. Можно на правую/левую сторону изображения проявлять полупрозрачную стрелку, которая даст понять, что сюда можно тыкать. Иначе непонятно.

А сделано хорошо.
Аналогично: сам сделал на лайтбоксе уже несколько сайтов, так что, кажется, должен был специфику поймать сразу, но выезжающие стрелочки сбили с толку, секунд десять думал пока догадался, куда нажимать.
Сейчас обнаружил добавление большой картинки в демо… При просомтре её в 100%, пропадает возможность её закрыть)))) В опере 10*…
А так супер, очень здорово сделано…
Опа, да, будем лечить. Спасибо.
Исправил.
Спасибо, понравилось, мож где-нить применю…

Кстати я тоже как-то давно писал галерею на JS, потом её друзья дорабатывали.
Вот тут можно посмотреть, а вот тут выкладывал, но версия возможно не последняя.
Получается что у вас все изображения одинакового размера. У меня наоборот, галерея заточена для показа точек от 1х1px до 2000х2000px и больше. В этом и сложность.
Да, согласен, получается что они просто для разных целей
Я бы ещё поработал над юзабилити — крестик, закрывающий картинку находится посередине панели управления, что выглядит непривычно и требует концентрированной настороженности :)
Запакуйте пожалуйста исходный код в .zip архив хотя бы.
Да, надо, ещё один мой промах.
Сделано
ХабраЭффект #500 )
С одной стороны, плохо, что грузятся все изображения — галерея долго открывается. Но, с другой стороны, во время просмотра приятное впечатление.
Сделаю предзагрузку опцией.
Галерея отлично смотрится, но есть мелкие недостатки. Взял на заметку.
Молодец.
Очень радует то, что Вы написали довольно неплохую вещь сами! Спасибо, что вы есть)
Однако, я думаю, что если бы галерея была написана с помощью jQuery (в виде плагина, etc), это дало бы ей большую практичность и популярность.
Слишком все закругленно.
Это полностью настраивается — края могут быть острыми.
Годный скрипт.
Симпатично.
Если будет версия в виде плагина к jQuery, будет вообще супер.
А еще из пожеланий: добавьте горячую клавишу для паузы (например пробел).
А клавиша для паузы есть — Ctrl
А мне очень нравиться www.monoslideshow.com/, как в тумблере, но блин, 25 евро. Вот бы ко-то бесплатный аналог написал…
Слишком много анимации. Можно состариться при смене картинки )
Так поставьте скорость ненужных анимаций на 0
твердая двойка!

Стремление к красоте губит юзабилити :)

По пунктам.

1. Кнопки — это зло. Это неизбежное зло. Если от них можно уйти — надо уходить. Зачем так много?
2. Уплывающая панель с кнопками — это двойное зло! Может ее еще сделать бегающей от курсора?
3. Когда я перехожу на другую картинку (кликая на стрелку) что я вижу? Правильно — белый прямоугольник меняющегося размера в течение нескольких секунд. Я зачем пришел в галерею — смотреть на белые прямоугольники? Нет! А зачем мне его показывают? Я хочу видеть другую фотографию, а, пока она грузится, я готов рассматривать еще какое-то время предыдущую (ладно уж), но я не хочу видеть белое пятно!!! Я могу просто взять и посмотреть лист бумаги A4 для этого.
4. Я минуту пытался попасть в плавающую кнопку листания влево — она пряталась. Вы специально издеваетесь или по пятницам?
5. Почему я не вижу следующей или предыдущей фото? Хотя по три штуки? Я бы может быть какую-нибудь фотку и пропустил бы.

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

Пользователю нужно так:

ooo O ooo

Когда он кликает на O — переходит направо. Когда кликает на o — она переходит в O.
Двойной клик на O включает/отключает слайдшоу.
Вот и все. Кнопок — нету!

;-)

оставьте, пожалуйста навигацию в покое! не надо её прятать каждый раз
Сделаю в виде опции
Выглядит симпотично, есть недочеты, о которых писали вверху, но работа все равно отличная.
У меня есть один тезис к слайдшоу:
Если в слайдшоу у изображений разные размеры — то постоянно прыгает рамка, то расширяясь, то сужаясь. Не знаю как остальных — но меня это «мерцание» достаточно сильно раздражает (особенно если учесть, что на это тратиться 1-2 секунды полезного времени).
Как решение, возможно выбирать размеры самой большой картинки и выставлять рамку относительно нее, а остальные картинки центрировать.
Да, я понимаю, что рамка должна соответствовать размеру картинки, что это такой дизайн, но всеравно…
Как я уже писал — поставьте анимацию изменения размера рамки на 0 и всё будет ок =)
Тогда молчу, спасибо :)
Очень приятный продукт, попробую применить.
Вот список настроек в скрипте. Прежде чем говорить о чем то, посмотрите, возможно это можно просто перенастроить:

overlayAppearSpeed: 300, // скорость появления тени в мс
overlayDisappearSpeed: 200, // скорость исчезновения тени в мс
containerAppearSpeed: 300, // скорость появления вьюпорта в мс
containerDisappearSpeed: 300, // скорость исчезновения вьюпорта в мс
containerResizeSpeed: 300, // скорость анимации изменения размера вьюпорта
contentAppearSpeed: 300, // скорость появления контента в мс
contentDisappearSpeed: 300, // скорость исчезновения контента в мс
loaderAppearSpeed: 200, // скорость появления загрузчика в мс
loaderDisappearSpeed: 200, // скорость исчезновения загрузчика в мс
windowResizeSpeed: 300, // скорость подстройки под размеры окна в мс
panelAppearSpeed: 300, // скорость появления панели в мс
panelDisappearSpeed: 300, // скорость исчезновения панели в мс
arrowsSpeed: 200, // скорость движения стрелок в мс

// Настройки отступов и углов:

paddingFSE:36, // отступ от границ экрана в пикселях при подгонке под них
contentPadding: 3, // отступ контента от внутренних границ (так же влияет на отступ панели от вьпорта и текста от изображения)
cornersSize: 10, // размер радиуса сглаженных углов (так же влияет на отступ панели от вьпорта и текста от изображения)

// Настройки цветов и прозрачности

overlayOpacity: 95, // прозрачность тени под вьюпортом
overlayBackground:"#000", // бэкграунд тени в формате css(цвет или изображение)
containerColor:"#FFF", // цвет вьюпорта (hex формат)

// Настройки навигации

panelType: «big», // тип панели управления сетом фотографий («big»,«small»)
forceCloseBut:false, // всегда ли выводить кнопку закрытия вьюпорта на маленькой панели? (true,false)
arrows: true, // отображать стрелки при навигации нажатием на части изображения? (true,false)
imageNav: true, // использовать навигацию нажатием на части изображения? (true,false)
keyboard: true, // управление с клавиатуры

// Настройки выводимой информации

forceOriginalSize:false, // всегда открывать в фотографию оригинальном размере? (true,false)
info:false, // выводить формат и размер изображения? (true,false)
groupInfoText: '[IMAGE_NUM] из [TOTAL_NUM] в группе "[GROUP_NAME]"', // вид написания информации о группе
fileInfoText: «В формате [FORMAT] размером [WIDTH]х[HEIGHT] в пикселей», // вид написания информации о файле
tips:[
'Предыдущее изображение', // подсказка к кнопке «назад»
'Следующее изображение', // подсказка к кнопке «вперед»
'Закрыть галерею', // подсказка к кнопке «закрыть»
'Слайдшоу', // подсказка к кнопке «плей»
'Пауза слайдшоу', // подсказка к кнопке «пауза»
'Оригинальный размер', // подсказка к кнопке «открыть в исходном размере»
'Уместить в окне' // подсказка к кнопке «уместить в окно»
],

// Настройки вида текста

font:«Tahoma, Arial», // тип шрифта на панели описания фотографии
fontSize:«11px», // размер шрифта
fontNameColor:"#919191", // цвет шрифта имени
fontColor:"#919191", // цвет шрифта остального текста

// Настройки слайдшоу

slideshowTime: 3000, // интервал переключения фотографий в слайдшоу в мс
slideshowRound: false, // показывать фотографии в слайдшоу в бесконечном цикле? (true,false)
slideshowClose: false, // закрывать iLoad в конце слайдшоу? (true,false)
скорость движения стрелок в мс

Может быть я слишком обывательски подхожу к этому вопросу и в Вебе принято иное, но почему бы не называть время своим именем? :)
Время своим именем? А мс это и не время вовсе? Секунда — слишком большой период времени, чтобы использовать его в данных видах анимации. Или вы предлагаете вместо 200 мс например везде писать 0.2 с? Это просто не удобно!
А вы читали цитату? А свой текст? Вы в мс вроде как скорость измеряете ;)
Выглядит очень мило. Немного напрягло, что блок навигации постоянно свёртывается и развёртывается.
Братцы, при появлении слева (и справа) стрелочек, хочется на них нажать, из-за того, что они выглядят в точности так же, как и кнопки снизу. Но, оказывается, что это не кнопки вовсе. Они прячутся, при уходе курсора с фотографии. Немного сбивает с толку. В всяческих лайтбоксах эта штука отображается полупрозрачной стрелкой прямо на фотке.
Согласен. Причем они должны постоянно присутствовать, а не плавно появляться.
И еще — кнопка закрытие неоднозначна, да еще и по центру. либо ее сместить к краю… либо вообще вынести на рисунок
Новый велосипед это мило, но вот не понятно зачем автор для свое сайтика studioad.ru спиздел логотип профессионального дизайнера Леши Дмитриева www.admitriev.com что мало своих идей? или сейчас модно быть пидарасом?
Даже оправдываться не буду, это смешно.
Сделал опцией скрытие большой панели при переключении изображений в сете.
Сделал опцией загрузку соседних изображений.
Сделал возможность передвигать мышкой вьюпорт (опционально) — полезно при просмотре больших фотографий в оригинальном размере.
Изменил курсор.
Очень понравилось общее впечатление от скрипта: внешний вид и плавность анимации производят впечатление коммерческого продукта. Очень хотелось бы увидеть вашу галерею в виде модуля для Drupal, был бы первоклассный аналог Lightbox ( drupal.org/project/lightbox2 )
Я вдохновлялся его работой.
Не знаю писали ли.
Обнаружил маленький баг.
Если начать перетаскивать картинку и вынести мышку за пределы документа, а потом отпустить кнопку мышки и
и вернуть мышку обратно в документ, то картинка будет перетаскиваться уже при отпущенной кнопки мышки.

Решал эту проблему я так.
Ставил обработчик mouseup на document, при том не так: document.unmouseup = <название функции>;,
а через addEventListener/attachEvent. Через document.unmouseup не срабатывало.
Большое спасибо. Исправлю.
В демо примере, когда нажимаешь на 4 картинку. Стрелки навигации: «Вперед», «Назад» не активны.
В ff,Opera,IE6-8,Safari,Chrome всё нормально. Если вы про изображение с бутылкой пива (пятое справа), то так и должно быть — оно не состоит в группе.
Да, именно за него =)
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Публикации

Истории