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

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

Вариант с лупой великолепен. Остальные мне не очень понравились.
Мне тоже он понравился очень :)
Полностью согласен!
только добавить бы прелоад иконки лупы
Очень интересно... Большое спасибо!
А на css так слабо без скрипта сделать?
и css и javascript на ниве стайлинга служат одной цели - separation of concerns, максимализм тут неуместен

что удобнее и проще в конкретном случае - то и делают
Я не критикую - название файла cssimg.zip, вот и сложились определенные ожидания. За сам пример - большое спасибо.
да нет, но зачем?
Там в последнем варианте появляется надпись нажмите для Preview, но ведь маленькая картинка и есть превью, а при нажати будет уже оригинал а не превью. Или у меня проблема с английским?
эх вы...
вставляете блочный элемент в строковый... нехорошо это. Всевидящие боги w3c покарают вас!
span — строковый элемент.
а — строковый, а внутри него блочный img.
а как по вашему надо сделать картинку ссылкой?
Сам IMG строковый, а то, что делают CSS'ом уже не имеет значения.
В своем блоге я указал на первоисточник изначально.
Вот это на меня повлияло :)
Так это автор поста, а не содержимого.
Ну так это я уже потом понял :)
Надо было ночью спать...
Да у всех бывает :)
Простите, а зачем же скрипт? Не проще в стилях
a.preview span {display:none}
a.preview:hover span {display:block}
Или я чего-то не понял?
Что бы этот злополучный не добавлять ко всем картинкам руками — что и написано в самой статье. Читайте внимательней ;)
злополучный span*

Тег удалился :(
А что насчет CSS
a img:after {content:' '}
Или не прокатит? Сейчас нет времени попробовать...
Опять старый, добрый IE6 подводит ;)
а для него бы и JS через CC
зачем православным сафаре-оперо-лисо заводчикам нечистый код?)
Просто ответил почему "не прокатит" a img:after {content:' '}.
НЛО прилетело и опубликовало эту надпись здесь
Ну да - нужно человеку на сраничке одну картинку так украсить и будет он подрубать библиотеку jQuery, потом скрипт jQuery ...
А потом будет учить скрипт готовить?)
НЛО прилетело и опубликовало эту надпись здесь
Оптимизация, друг мой :)
А там дело в том, что спаны там абсолютно позиционируются. Если в предложите метод удобной верстки со слоями, то тогда наверное так сделать будет лучше. Я уже думаю над этой проблемой)
Это надо дать почитать товарищам делающим фотохостинги в том числе и разработчикам пикасса.
да это не rocket science
Перенесите это в Веб-разработку.
Хорошо сделаем
/* Очень практично оформлять кликабельные картинки, к примеру при наведении на картинку появится изображения говорящее о том что эта картинка кликабельна — как на картинке выше. */

спасибо за наводку. интересный приём.
иконка лупы хорошая, понравилось
НЛО прилетело и опубликовало эту надпись здесь
Слово "практично" здесь какое-то очень странное.

При наведении на кликабельную картинку меняется курсор, это однозначно и общедоступно говорит о её кликабельности, поэтому к практике все эти приседания не имеют никакого отношения. К красивостям на пустом месте, к "ух ты, какая фенька" - да.
Не скажите... эти "красивости" явно обозначают то, что нажав на картинку вы увидите бОльший ее размер, а не просто перейдете на какую-то страницу...
Полностью согласен с практикой. Глядя на интерфейс я должен знать, что я смогу сделать, а что нет. А тут получается, что пока не наведешь на картинку курсор, не поймешь что на нее можно нажать. А если и на жмешь, то не понятно что произойдет. Лупа ассоциируется с увеличением, а не с "оригинальным большим размером картинки". Посмотрите в сторону карт google или photoshop. Курсор "лупа" там означает другое.
Если нужно знать без наведения на картинку, то зачем лепить поверх лупу? Мне может достаточно маленькой картинки. Достаточно кнопочки рядом или рамочки особого стиля.

Жаль, что нет стандартного cursor:zoom. А разные типа cursor:nw-resize не особо подходят :/
Не если, а нада знать. В интерфейсе должно быть все понятно...даже модно говорить "интуитивно понятно".
Не надо ударяться в минимализм и скрывать полезные функции. Про кнопочки и рамочки полностью согласен.
Хорошо. Согласен: интерфейс должен быть удобным. Но интерфейс — это всегда набор правил «игры». Соответственно моя задача сделать так, чтобы эти правила быстро запоминались и принимались, а так же не мешали.

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

Не стоит забывать так же об alt и title (который выводится вспывающей подсказкой), а так же об адекватных url (типа /img/catalogue/thumbs/ и /img/catalogue/big/)
Согласен.
+1 дело именно в понимании того, что произойдёт при клике.
курсор только говорит что это ссылка, а не то что по ссылке будет оригинал большего размера
Так можно сделать курсор в виде лупы :)
.zoompic:hover{cursor:url("lupa.cur"), nw-resize;}
Локально и с домена сработало в ИЕ7 и Файрфоксе. Опера 9,24 не захотела подгружать. Ждём Оперу :) Или может уже исправили? Ребят, у кого поновее, проверьте!
п.с. Забавно. FF загрузила версию курсора 16х16, а эксплорер 32х32. От порядка страницы это не зависит. FF загружает большой курсор только если он единственный в файле. Эксплорер грузит тот размер, который по дифолту в системе или растягивает/сжимает тот, который есть.
курсор даёт понять, что на картинке есть ссылка. и абсолютно неизвестно, куда эта ссылка ведёт. а лупа, как в первом примере, чётко показывает, что ссылка ведёт на страницу с полноразмерной картинкой.
«…Поэтому совершенномудрый стремится к тому, чтобы сделать жизнь сытой, а не к тому, чтобы иметь красивые вещи…»
© Лао Цзы. Дао дэ Цзин

А почему просто не оставить курсор в форме ручки с пальчиком? Ну как а.href=...
Вопрос снят :) Прочитал ответы сверху (появились, пока писал вопрос).
Постойте, а разве курсор с пальцем, рамку, альт текст, не изобрели ещё?
Искреннее спасибо, отличный скрипт.
вот тут вариант с изменением курсора http://vikjavev.no/highslide/#examples
Очень неплохая реализация всплывающих картинок и текстов. (только лицензия не привольная)
Вы этот скрипт в IE проверяли? :) Довольно забавный результат показывает.
в IE7 нормально, только чуть тормоза даёт. В Opera 9.24 глючит, в Firefox хорошо пашет.
Хм... неужели обновили скрипт? Когда пользовался им, в IE6-7 иконка увеличения вылезала за пределы изображения.
За идею спасибо. Понравилось. От себя добавлю: можно сделать меню - "несколько пиктограмм". И также не забываем, что можно пользоваться и другими js "штуками". А в текущем примере... мне лично кажется чегото не хватает, как будто чтото не так :(
В Опере 9.02 работает абсолютно не корректно...
посмотрел JavaScript-код. Как можно так безалаберно писать? Замыкания, отсутствие кеширование, отсутствие намека на совместимость с другими эффектами...
Простите, а что такое замыкания?
Спасибо
однако

вы так напали на замыкания, что можно подумать, что это антипаттерн

а это, btw, один из краеугольных камней программирования в целом для многих

Closure (computer science)

то, что в каком-то вшивом IE могут возникнуть баги с утечками памяти из-за неосмотрительного их использования - не делает замыкания антипаттерном
тормозит на медленном интернете.
сделайте прелоад лупы!
Угу, у меня 512 кб - и неприятно ждать секунду, когда загрузится иконка.
Мне не нравится с лупой, и с рамкой и ваще. Не интуитивно, обманывает ожидания. ИМХО, надо быть проще. Я вот так решил вопрос на своем сайте.

А в общем случае - все эти решения НИКАК НЕ ВЛИЯЮТ НА КЛИКАБЕЛЬНОСТЬ КАРТИНКИ - так как эффект появляется при наведении. На большинстве же сайтов практикуются лупы и надписи ьипа "увеличить", которые видно ДО НАВЕДЕНИЯ. Вот такие методы повышают кликабельность.

Понравился мне пример bettrrr - забобрить!

И последнее. Не люблю java. Люблю css.
title «Увеличить изображение», как мне кажется, удобнее, проще, привычнее, чем «лишние» скрипты и попытки изобрести велосипед — пример на вашем сайте прекрасно демонстрирует это. Появление лупы же, по моему, не выполняем поставленную задачу, т. е. ничего практичного, как уже высказывались.
Уже выше обсуждалось, в моем блоге указана ссылка на первоисточник.
Идея хорошая.
Не сколько для кликабельности, сколько для оживления интерфейса.
Я бы убрал фильтр alpha и использовал png.

А еще появилась идейка скрывать таким образом watermark.
Т.е. на watermark накладывается кусок оригинальной картинки. конечно это слегка упростит тыбренье картинки, но все-же пользователям будет приятно смотреть на нее без доп.помех.
Я тоже о нестандартном использовании задумывался. Про «водяной знак» отличная идея!

Можно еще таким образом графически отображать категорию картинки, например к фотографии с праздника можно будет наложить в угол воздушный шарик и т.п.
Согласен. На маленькой картинке делать водяной знак «съёмным» при наведении, а на увеличенной уже вживлять. Действитель было бы приятнее.
Посетитель должен видеть, что картинка кликабельна до наведения курсора на картинку.
На кликабельных картинках я ставлю в углу полупрозрачную лупу.
идея неплоха, но реализация явно хромает
НЛО прилетело и опубликовало эту надпись здесь
>Скрипт, кстати, прост как «дважды два», и занимает всего 2 килобайта.

К тому же он просто ужасен. Можно сказать, что каждая вторая строка скрипта демонстрирует полное непонимание того, что происходит.
О-о-х, http://kplahotya.narod.ru/other/notes/styleyourimagelinks.html
как вам мой перевод?
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.