Комментарии 63
Симпатично и аккуратно выглядит!
В код не смотрел, но по первому впечатлению — на твердую 5.
Вот только независимость от фреймворков при не самом маленьком размере — сомнительное преимущество :)
Можно было бы сделать сборки/адаптеры под другие библиотеки.
Несколько замечаний:
— Во время загрузки картинки стоит показывать спиннер
— нижняя панелька выглядит здорово, но теряется на черном фоне и, на мой взгляд, мелковата. И может не стоит ее прятать на время загрузки следующей картинки?
Есть ли возможность изменить вид панели/разместить ее на самой картинке?
Под какой лицензией распространяете?
В код не смотрел, но по первому впечатлению — на твердую 5.
Вот только независимость от фреймворков при не самом маленьком размере — сомнительное преимущество :)
Можно было бы сделать сборки/адаптеры под другие библиотеки.
Несколько замечаний:
— Во время загрузки картинки стоит показывать спиннер
— нижняя панелька выглядит здорово, но теряется на черном фоне и, на мой взгляд, мелковата. И может не стоит ее прятать на время загрузки следующей картинки?
Есть ли возможность изменить вид панели/разместить ее на самой картинке?
Под какой лицензией распространяете?
2 версия была под JQuery и это меня страшно раздражало =) поэтому решил эту версию сделать автономной. Спиннер при загрузке показывается, если не показался то причины 2: либо я его коряво прописал на своем сайте (замылился уже и сейчас исправлю), либо вы его просто не успеваете увидеть так как он плавно появляется за 200мс кажется а после отрабатывания onload так же плавно исчезает. если он успевает начать исчезать ещё не появившись — вы его не увидите.
Нижняя панелька многих раздражала — я сделал её менее заметной, в любом случае будет выпущено ещё несколько стилей оформления и панель я перерисую, спасибо за предложение. скрывать её необходимо для того, чтобы не была видна смена активности кнопок и появление и исчезновение кнопки изменения размера изображения. Да, разместить панель на вьюпорте можно, для этого можно включить малую панель. Справа на странице две ссылки для их горячего переключения.
Распространяю бесплатно при условии сохранения целостности. Лицензия GPL.
Большое спасибо за отзыв!
Нижняя панелька многих раздражала — я сделал её менее заметной, в любом случае будет выпущено ещё несколько стилей оформления и панель я перерисую, спасибо за предложение. скрывать её необходимо для того, чтобы не была видна смена активности кнопок и появление и исчезновение кнопки изменения размера изображения. Да, разместить панель на вьюпорте можно, для этого можно включить малую панель. Справа на странице две ссылки для их горячего переключения.
Распространяю бесплатно при условии сохранения целостности. Лицензия GPL.
Большое спасибо за отзыв!
Да, я корявый — спиннер исправил =)
Ну можно ее (панельку) не задвигать за картинку (это движение очень сильно привлекает внимание) а менять прозрачность.
А почему не BSD лицензия?
А почему не BSD лицензия?
Все плохо. Когда я навожу на картинку, появляются кнопки вперед-назад. Когда я пытаюсь навести на эти кнопки, они пропадают. При этом догадаться, что это не кнопки, а кликать можно по самому изображению, невозможно, потому что курсор имеет форму стрелки.
Панель вверх-вниз прыгает при смене картинок, тоже не хорошо. А 2 кнопки для управления слайдшоу — перебор.
курсор исправлю, а что касается понимания, что именно нажатия на изображение переключают его — это специфика всей линейки подобных скриптов, классика грубо говоря.
Ну так отойдите от классики. У меня те же замечания. Можно на правую/левую сторону изображения проявлять полупрозрачную стрелку, которая даст понять, что сюда можно тыкать. Иначе непонятно.
А сделано хорошо.
А сделано хорошо.
Аналогично: сам сделал на лайтбоксе уже несколько сайтов, так что, кажется, должен был специфику поймать сразу, но выезжающие стрелочки сбили с толку, секунд десять думал пока догадался, куда нажимать.
Сейчас обнаружил добавление большой картинки в демо… При просомтре её в 100%, пропадает возможность её закрыть)))) В опере 10*…
А так супер, очень здорово сделано…
А так супер, очень здорово сделано…
Я бы ещё поработал над юзабилити — крестик, закрывающий картинку находится посередине панели управления, что выглядит непривычно и требует концентрированной настороженности :)
Запакуйте пожалуйста исходный код в .zip архив хотя бы.
ХабраЭффект #500 )
С одной стороны, плохо, что грузятся все изображения — галерея долго открывается. Но, с другой стороны, во время просмотра приятное впечатление.
Галерея отлично смотрится, но есть мелкие недостатки. Взял на заметку.
Молодец.
Молодец.
Очень радует то, что Вы написали довольно неплохую вещь сами! Спасибо, что вы есть)
Однако, я думаю, что если бы галерея была написана с помощью jQuery (в виде плагина, etc), это дало бы ей большую практичность и популярность.
Однако, я думаю, что если бы галерея была написана с помощью jQuery (в виде плагина, etc), это дало бы ей большую практичность и популярность.
Слишком все закругленно.
Годный скрипт.
Симпатично.
Если будет версия в виде плагина к jQuery, будет вообще супер.
А еще из пожеланий: добавьте горячую клавишу для паузы (например пробел).
Если будет версия в виде плагина к jQuery, будет вообще супер.
А еще из пожеланий: добавьте горячую клавишу для паузы (например пробел).
А мне очень нравиться www.monoslideshow.com/, как в тумблере, но блин, 25 евро. Вот бы ко-то бесплатный аналог написал…
Слишком много анимации. Можно состариться при смене картинки )
твердая двойка!
Стремление к красоте губит юзабилити :)
По пунктам.
1. Кнопки — это зло. Это неизбежное зло. Если от них можно уйти — надо уходить. Зачем так много?
2. Уплывающая панель с кнопками — это двойное зло! Может ее еще сделать бегающей от курсора?
3. Когда я перехожу на другую картинку (кликая на стрелку) что я вижу? Правильно — белый прямоугольник меняющегося размера в течение нескольких секунд. Я зачем пришел в галерею — смотреть на белые прямоугольники? Нет! А зачем мне его показывают? Я хочу видеть другую фотографию, а, пока она грузится, я готов рассматривать еще какое-то время предыдущую (ладно уж), но я не хочу видеть белое пятно!!! Я могу просто взять и посмотреть лист бумаги A4 для этого.
4. Я минуту пытался попасть в плавающую кнопку листания влево — она пряталась. Вы специально издеваетесь или по пятницам?
5. Почему я не вижу следующей или предыдущей фото? Хотя по три штуки? Я бы может быть какую-нибудь фотку и пропустил бы.
Очень красиво. Но вы не хотите ставить себя на место пользователя.
Пользователю нужно так:
ooo O ooo
Когда он кликает на O — переходит направо. Когда кликает на o — она переходит в O.
Двойной клик на O включает/отключает слайдшоу.
Вот и все. Кнопок — нету!
;-)
Стремление к красоте губит юзабилити :)
По пунктам.
1. Кнопки — это зло. Это неизбежное зло. Если от них можно уйти — надо уходить. Зачем так много?
2. Уплывающая панель с кнопками — это двойное зло! Может ее еще сделать бегающей от курсора?
3. Когда я перехожу на другую картинку (кликая на стрелку) что я вижу? Правильно — белый прямоугольник меняющегося размера в течение нескольких секунд. Я зачем пришел в галерею — смотреть на белые прямоугольники? Нет! А зачем мне его показывают? Я хочу видеть другую фотографию, а, пока она грузится, я готов рассматривать еще какое-то время предыдущую (ладно уж), но я не хочу видеть белое пятно!!! Я могу просто взять и посмотреть лист бумаги A4 для этого.
4. Я минуту пытался попасть в плавающую кнопку листания влево — она пряталась. Вы специально издеваетесь или по пятницам?
5. Почему я не вижу следующей или предыдущей фото? Хотя по три штуки? Я бы может быть какую-нибудь фотку и пропустил бы.
Очень красиво. Но вы не хотите ставить себя на место пользователя.
Пользователю нужно так:
ooo O ooo
Когда он кликает на O — переходит направо. Когда кликает на o — она переходит в O.
Двойной клик на O включает/отключает слайдшоу.
Вот и все. Кнопок — нету!
;-)
оставьте, пожалуйста навигацию в покое! не надо её прятать каждый раз
Выглядит симпотично, есть недочеты, о которых писали вверху, но работа все равно отличная.
У меня есть один тезис к слайдшоу:
Если в слайдшоу у изображений разные размеры — то постоянно прыгает рамка, то расширяясь, то сужаясь. Не знаю как остальных — но меня это «мерцание» достаточно сильно раздражает (особенно если учесть, что на это тратиться 1-2 секунды полезного времени).
Как решение, возможно выбирать размеры самой большой картинки и выставлять рамку относительно нее, а остальные картинки центрировать.
Да, я понимаю, что рамка должна соответствовать размеру картинки, что это такой дизайн, но всеравно…
У меня есть один тезис к слайдшоу:
Если в слайдшоу у изображений разные размеры — то постоянно прыгает рамка, то расширяясь, то сужаясь. Не знаю как остальных — но меня это «мерцание» достаточно сильно раздражает (особенно если учесть, что на это тратиться 1-2 секунды полезного времени).
Как решение, возможно выбирать размеры самой большой картинки и выставлять рамку относительно нее, а остальные картинки центрировать.
Да, я понимаю, что рамка должна соответствовать размеру картинки, что это такой дизайн, но всеравно…
Очень приятный продукт, попробую применить.
Вот список настроек в скрипте. Прежде чем говорить о чем то, посмотрите, возможно это можно просто перенастроить:
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)
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)
Выглядит очень мило. Немного напрягло, что блок навигации постоянно свёртывается и развёртывается.
Братцы, при появлении слева (и справа) стрелочек, хочется на них нажать, из-за того, что они выглядят в точности так же, как и кнопки снизу. Но, оказывается, что это не кнопки вовсе. Они прячутся, при уходе курсора с фотографии. Немного сбивает с толку. В всяческих лайтбоксах эта штука отображается полупрозрачной стрелкой прямо на фотке.
Новый велосипед это мило, но вот не понятно зачем автор для свое сайтика studioad.ru спиздел логотип профессионального дизайнера Леши Дмитриева www.admitriev.com что мало своих идей? или сейчас модно быть пидарасом?
Сделал опцией скрытие большой панели при переключении изображений в сете.
Сделал опцией загрузку соседних изображений.
Сделал возможность передвигать мышкой вьюпорт (опционально) — полезно при просмотре больших фотографий в оригинальном размере.
Изменил курсор.
Сделал опцией загрузку соседних изображений.
Сделал возможность передвигать мышкой вьюпорт (опционально) — полезно при просмотре больших фотографий в оригинальном размере.
Изменил курсор.
Очень понравилось общее впечатление от скрипта: внешний вид и плавность анимации производят впечатление коммерческого продукта. Очень хотелось бы увидеть вашу галерею в виде модуля для Drupal, был бы первоклассный аналог Lightbox ( drupal.org/project/lightbox2 )
Что-то похоже так на www.nickstakenburg.com/projects/lightview/
Не знаю писали ли.
Обнаружил маленький баг.
Если начать перетаскивать картинку и вынести мышку за пределы документа, а потом отпустить кнопку мышки и
и вернуть мышку обратно в документ, то картинка будет перетаскиваться уже при отпущенной кнопки мышки.
Решал эту проблему я так.
Ставил обработчик mouseup на document, при том не так: document.unmouseup = <название функции>;,
а через addEventListener/attachEvent. Через document.unmouseup не срабатывало.
Обнаружил маленький баг.
Если начать перетаскивать картинку и вынести мышку за пределы документа, а потом отпустить кнопку мышки и
и вернуть мышку обратно в документ, то картинка будет перетаскиваться уже при отпущенной кнопки мышки.
Решал эту проблему я так.
Ставил обработчик mouseup на document, при том не так: document.unmouseup = <название функции>;,
а через addEventListener/attachEvent. Через document.unmouseup не срабатывало.
В демо примере, когда нажимаешь на 4 картинку. Стрелки навигации: «Вперед», «Назад» не активны.
Сделал тему для любителей ругать анимацию: studioad.ru/blog/iload_3_dark_theme/2010-02-13-106
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
iLoad 3 — javascript галерея изображений