Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Zoom фотографии с помощью jQuery


Автор: t77 24.6.2010, 18:12
Доброе время суток.

Необходимо сделать так называемый зум для фотографии.
Подобное можно встретить на многих страничках в сети...
Допустим на страничке html встроена фотка. 
Хотелось бы при наведении на нее мышкой, чтобы менялся стандартный курсор мышки на значок лупы и при нажатии на фотографию, открывалось окошко с увеличенным размером фотографии.
Как это сделать? Можно ли сделать подобное с помощью jQuery ?
Если да, то как ? Куда копать ?

Автор: нуп 24.6.2010, 18:14
http://highslide.com/ ??  smile 

Автор: t77 24.6.2010, 19:05
нуп, это красиво выглядит и удобно в использовании для разработчика.
Но, это не то что нужно, так как в линцензии говорится:
"Highslide JS лицензируется при содействии Творческой палаты общин Некоммерческие приписыванием 2.5 Лицензии. Это означает, что Вы нуждаетесь в разрешении автора использовать Highslide JS на коммерческих вебсайтах."
Сайт для которого хочу сделать подобную штуку является комерческим. 
Так, что Highslide отпадает...
В любом случае спасибо вам.

Интересует вопрос, можно ли с помощью библиотеки JavaScript - jQuery, сделать подобную красоту ? 
Если да то как ?

Автор: bars80080 24.6.2010, 19:09
Цитата(t77 @  24.6.2010,  18:12 Найти цитируемый пост)
чтобы менялся стандартный курсор мышки на значок лупы

а что там, нет такого значка под свойство css cursor?


Цитата(t77 @  24.6.2010,  18:12 Найти цитируемый пост)
открывалось окошко с увеличенным размером фотографии.

это даже и без javascript можно сделать, достаточно target="_blank" для ссылки на большую фотку написать

может имеется ввиду какое-нибудь всплытие в пределах текущего окна?
да и с каким-нибудь особенным эффектом? тогда путь на сайты с галереями, там этого добра навалом

Автор: t77 24.6.2010, 19:28
Цитата

а что там, нет такого значка под свойство css cursor?

bars80080
Не понимаю, что вы имеете ввиду, под словом "там"...??
Я просто приводил пример подобных явлений на сайтах, которые используют зум для фотографий.

Цитата

может имеется ввиду какое-нибудь всплытие в пределах текущего окна? да и с каким-нибудь особенным эффектом? тогда путь на сайты с галереями, там этого добра навалом

Да именно, что то подобное. Но почему, на сайты с галереями ??
Я против использования готовых платных утилит и не хочется зависить от сайтов с галереями.

Разве нельзя сделать подобное на своем сайте, не прибегая к разным внешним сайтам с галереями ??

Ответьте ме пожалуйста на вопрос, который я задавал выше...
Можно ли сделать подобное на  jQuery ?


Автор: ksnk 24.6.2010, 21:09
Цитата(t77 @  24.6.2010,  19:28 Найти цитируемый пост)
Можно ли сделать подобное на  jQuery ?

http://plugins.jquery.com/search/node/gallery+type:project_project?
imho, не все их них имеют некоммерческую лицензию.

Автор: bars80080 25.6.2010, 00:03
Цитата(t77 @  24.6.2010,  19:28 Найти цитируемый пост)
Не понимаю, что вы имеете ввиду, под словом "там"...??

я имел в виду свойство css. но судя по всему такого нет

с другой стороны, есть альтернативное:
Код

img { cursor: url("highslide/graphics/zoomin.cur"), pointer !important; }

непосредственно в примере из ссылки выше


Цитата(t77 @  24.6.2010,  19:28 Найти цитируемый пост)
Я против использования готовых платных утилит и не хочется зависить от сайтов с галереями.

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

Автор: t77 25.6.2010, 10:16
ksnk, класный сайт, спасибо.

Дело в том, что только недавно начал знакомиться с jQuery и мне непонятны некоторые вещи.
Разве jQuery, это не бесплатно распространяемая библиотека?
Посмотрев на готовые плагины, можно заметить, что буквально несколько строк кода и все готово.
Так за что же нужно платить? Тоесть о какой лицензии идет речь?

Автор: t77 25.6.2010, 10:37
Хочется научиться мастерить прикольные штуки на jQuery самому.
Может кто знает хороший самоучитель по данной теме, поделитесь пожалуйта.
Желательно на русском языке.

Автор: нуп 25.6.2010, 10:55
http://css-tricks.com/video-screencasts/74-editable-css3-image-gallery/
http://css-tricks.com/examples/CSS3PhotoGallery/

Автор: bars80080 25.6.2010, 13:57
Цитата(t77 @  25.6.2010,  10:16 Найти цитируемый пост)
Так за что же нужно платить?

за то что кто-то уже что-то сделал, и назначил за это цену. его право назначать цену за любую табуретку, которую ты можешь сделать и сам, но которую в этот раз сделал он


Цитата(t77 @  25.6.2010,  10:37 Найти цитируемый пост)
Может кто знает хороший самоучитель по данной теме, поделитесь пожалуйта.
Желательно на русском языке.

хороший не скажу. но очень помогает просто пошустрить по магазинам и купить книжку.

Автор: t77 25.6.2010, 16:26
нуп
прикольно и интересно. Спасибо.

bars80080
Что касается табуреток, то нам чужие не нужны. Тем более за деньги. Сами сделаем если надо будет. А вот как сделать и с чего начинать можно посоветоваться здесь на форуме. smile 


Цитата

хороший не скажу. но очень помогает просто пошустрить по магазинам и купить книжку. 

То что книжку купить это понятно. Я спрашивал совет по поводу какой-нибудь конкретной книжки или ресурса в сети. 
Так как их очень много и порой трудно выбрать хорошую. Все когда то начинали изучать jQuery. Интересно узнать кто что читал...


Автор: нуп 25.6.2010, 17:48
Я читал такую книжку "Бер Бибо, Иегуда Кац - jQuery. Подробное руководство по продвинутому JavaScript". Все понятно написано + разобрано на примерах, которые идут с книжкой  smile 

Автор: t77 25.6.2010, 18:46
нуп, благодарю вас. smile 

Автор: IgorIV 25.6.2010, 19:42
http://www.google.com/search?hl=ru&q=jQuery+%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&aq=f&aqi=&aql=&oq=&gs_rfai=

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)