Создать ответ 
Реализация скрипта при просмотре в режиме лупы
Автор Сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #11
RE: Реализация скрипта при просмотре в режиме лупы
Здравствуйте, проверил в работе и есть вопрос.

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

На скрине:
[Изображение: tid_350_sticky.png]

И есть один момент, если провести указателем слева или справа вверх до "залипшая" картинка в режиме лупы пропадает, причем ширина 100%, т.е я провожу в любом месте справа или слева вверх и тогда увеличенная картинка пропадает, хотя в стилях для изображения прописана фиксированная ширина в 150px...


P.S.: Проверил на странице сайта, там после клика изображение появляется, можно закрыть, но как и писал ранее на изображении остается картинка просмотра в режиме лупы до клика по изображению и убрать этот просмотр можно, если подвести указатель к изображению.
Получается, что нужно еще добавить, что после закрытия большого изображения вызываемого скриптом pirobox скрипт лупы прекращал свою работу, а так на странице остается картинка на изображении до клика...
(Последний раз сообщение было отредактировано 27.12.2015 в 18:56:48, отредактировал пользователь ale10ey.)
27.12.2015 18:43:37
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #12
RE: Реализация скрипта при просмотре в режиме лупы
Кстати в разных браузерах данный "эффект" ведет себя по разному.

Предлагаю скрипт лупы отключать до срабатывания скрипта pirobox.

Для этого достаточно в файле loupe.min.js заменить:
Код:
new_piro=function(e){$(".pirobox").click();}
на
Код:
new_piro=function(e){k.hide();$(".pirobox").click();}
27.12.2015 21:25:11
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #13
RE: Реализация скрипта при просмотре в режиме лупы
Доброе время суток, эта проблема решена, но заметил другую проблему...

На странице имеется 6 изображений и если кликнуть на любое из них, то появится большое изображение, так вот проблема в том, что если кликнуть на 1 изображение или на любое из 6 на странице, будет появляться только 1 изображение (большое) для всех 6, т.е если кликаю, например на 5 изображение, то появляется не 5 большое изображение, а 1 и так для всех, хотя пути для всех "больших изображений" правильно прописаны, да и если отключить скрипт лупы, то скрипт pirobox работает корректно, при клику по любому из изображений появляется свое большое изображение.
Вроде уже надоело этим заниматься, но скрипт почти рабочий, осталось устранить проблемы.

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

if (xy_class=='review_1') { ; }
else if (xy_class=='review_2') { ; }

иначе скрипт pirobox все время грузит 1 изображение ...Scratch
28.12.2015 16:11:43
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #14
RE: Реализация скрипта при просмотре в режиме лупы
Попробуйте заменить код:
Код:
new_piro=function(e){k.hide();$(".pirobox").click();}

на такой:
Код:
new_piro=function(e){k.hide();j.click();}
29.12.2015 22:49:33
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #15
RE: Реализация скрипта при просмотре в режиме лупы
Здравствуйте, спасибо работает Ok,
Хотел бы еще добавить title, чтобы пользователь мог во время увеличения кликнуть и посмотреть изображение целиком.
Пробовал в скрипт лупы добавлять такую строчку:

link.setAttribute('title'("Увеличить", link.getAttribute('title')));
или
$('new_piro').attr('title','Увеличить изображение');

но не работает, может быть надо прописывать title для ссылки <a></a> внутри которой находится изображение ?

Заранее благодарен.Yes
30.12.2015 08:37:18
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #16
RE: Реализация скрипта при просмотре в режиме лупы
В файле loupe.min.js перед: .attr("src",j.attr(... добавьте: .attr("title","Увеличить изображение")
30.12.2015 22:03:27
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #17
RE: Реализация скрипта при просмотре в режиме лупы
Работает ! Happy
Поздравляю с наступающим Новым 2016 годом ! Желаю всего самого наилучшего !!!

Есть вопрос, надеюсь, последний насчет курсора.

Напомню, как все сейчас происходит.

1. Если подвести курсор близко и медленно (есть вероятность, что 1 из 100 пользователей так и сделает) к любой из границ изображения, то появится другой курсор и если переместить курсор чуть "глубже" буквально на 1px, то курсор пропадает.

Например, на скрине я подвожу курсор к левой границе изображения:

[Изображение: tid_350_left.png]

Курсор подводится к верхней границе:

[Изображение: tid_350_top.png]

2. Если подводить курсор нормально, то все нормально, как на скрине ниже:

[Изображение: tid_350_default.png]

Можно, конечно, курсор заменить на default в css, но это нужно в том случае если, например скрипт лупы не сработает, то тогда пользователь, сможет увеличить изображение с помощью скрипта pirobox, да и интересно можно ли реализовать данный момент, сам пока не сталкивался с подобным.
Принцип какой, что изображение размерами 110x150px и прописывается display: block; и соответственно, как только курсор подводится к данному размеру, то и появляется курсор, все правильно, думал уже так сделать, чтобы курсор появлялся только тогда, когда попадал бы на область 109x149px, по сути 1px по периметру хватило бы чтобы курсор не появлялся бы, когда пользователь начнет подводит курсор к изображению.

Вроде более или менее изъяснился, надеюсь, что смогли понять что требуется.

Еще раз спасибо и праздником !!!
31.12.2015 11:02:59
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #18
RE: Реализация скрипта при просмотре в режиме лупы
Изъяснились Вы понятно, но вот как с этим бороться я не знаю. Unknown
02.01.2016 14:59:03
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #19
RE: Реализация скрипта при просмотре в режиме лупы
Доброе время суток, спасибо за ответ, будем думать как реализовать, когда будет свободное время.
У меня последний вопрос, вернее просьба насчет скрипта pirobox.

Скрипт в приложении:

.rar  pirobox.rar (Размер: 3.31 Кб / Загрузок: 1)

Хотел бы, чтобы скрипт реагировал на нажатие клавиши "Escape", т.е когда пользователь кликнул по маленькому изображению, с помощью этого скрипта появилось большое изображение и чтобы закрыть пользователь должен кликнуть на клавишу закрыть.

К сожалению скрипт больше не обновляется, заменил устаревший .bind() на класс .on(), также пытался прописывать строчки типа:

Код:
$(document).keydown(function(c){ if (c.which=='27') $('.pirobox').fadeOut(1000); });

или:

Код:
$().on("keydown", function (c) { if (c.keyCode === 27) { $(".pirobox").css("display","none"); }});

но не срабатывает ...Scratch

и не совсем уверен, куда именно нужно прописать данную строчку, по сути скрипт должен реагировать, если нажата клавиша, но не работает. Мы как-то обсуждали данный момент, но тогда была другая библиотека JQuery.

Заранее благодарен.Yes
02.01.2016 17:30:16
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #20
RE: Реализация скрипта при просмотре в режиме лупы
Замените в piroBox_1.2.min.js:
Код:
a().bind("keydown",function(J){
на
Код:
$(document).on("keydown",function(J){
02.01.2016 18:48:16
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru