Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Активные темы » Скрипт для возврата по клику открытой картинки на предыдущее

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Ron2323



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте.
Можете подсказать, какой скрипт можно применить (js или css), что бы обеспечить возврат на странице сайта, по клику на открытой в полном окне браузера картинки 550x550.jpg на предыдущее окно в ту же страницу сайта, где отображалась (перед нажатием href=) меньшая по размеру 220x220.jpg. Вот html код с которым требуется проделать такую манипуляцию, используя только присвоенный класс class= картинке (без заключения её в div блок, и было бы хорошо, если бы при открытой на полный экран картинке, в верхнем углу отображался крестик для закрытия картинки, по клику мыши).
 
<a href="../../../image/550x550.jpg" class="big">
<img src="../../../image/220x220.jpg"></a>

Всего записей: 46 | Зарегистр. 01-05-2017 | Отправлено: 11:33 07-03-2024
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ron2323

Цитата:
<a href="../../../image/550x550.jpg" class="big">

когда у вас отображается только картинка, никаких обработчиков кликов там нет.
вам нужен скрипт, который будет отображать полноразмерную картинку в самой html странице, с соответствующими возможностями.
либо статическая страница для каждой картинки, что будет включать в себя обработку клика.
проще воспользовать, например, этим
http://highslide.com/
https://lokeshdhakar.com/projects/lightbox2/
 или аналогичными

Всего записей: 15134 | Зарегистр. 20-09-2014 | Отправлено: 12:12 07-03-2024
Ron2323



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я пробовал разместить скрипт из второго из предложенных вами ресурсов (т.к. первый излишне для меня сложно-ненужный). И в втором случае, скрипт простой и он заработал, он открывает как нужно картинку, только когда нужно закрыть увеличенную картинку, в скрипте нет такой функции, как закрывание её по клику мыши на ней, только через клавишу Escape. Может подскажите, какое изменение в скрипт lightbox.js можно внести, что бы по клику она закрывалась.
 
Подробнее...

Всего записей: 46 | Зарегистр. 01-05-2017 | Отправлено: 13:06 07-03-2024 | Исправлено: Ron2323, 13:47 07-03-2024
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ron2323
используйте тег [more]...[/more] для сокрытия длинных листингов
 

Цитата:
в скрипте нет такой функции, как закрывание её по клику мыши на ней, только через клавишу Escape

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

Цитата:
первый излишне для меня сложно-ненужный

там есть онлайн генератор конфигурации.

Всего записей: 15134 | Зарегистр. 20-09-2014 | Отправлено: 20:20 07-03-2024
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
в общем так, но могут быть особенности

Код:
$(function() {
  $('div.lb-outerContainer').off('click').on('click', function() {
    $('#lightbox').trigger('click');
  });
});

 
https://jsfiddle.net/x8p6t4rz/

Всего записей: 15134 | Зарегистр. 20-09-2014 | Отправлено: 23:14 07-03-2024 | Исправлено: Mavrikii, 00:39 08-03-2024
Ron2323



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте.
В вашей редакции скрипта, на сайте https://jsfiddle.net/x8p6t4rz/ всё прекрасно работает, закрытие картинки по клику мыши на неё, но я не могу понять, куда можно разместить фрагмент вашего кода скрипта. Я пытался отдельно его поместить на страницу своего сайта в <script></script>, но он не заработал. Можете, пожалуйста вставить блок этого кода в файл lightbox.js , т.к. я то же пытался его туда разместить, но скрипт не работает с ним как нужно.
 
$(function() {
  $('div.lb-outerContainer').off('click').on('click', function() {
    $('#lightbox').trigger('click');
  });
});

Всего записей: 46 | Зарегистр. 01-05-2017 | Отправлено: 13:17 08-03-2024
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ron2323

Цитата:
 Я пытался отдельно его поместить на страницу своего сайта в <script></script>, но он не заработал.  

в любом месте после места загрузки скрипта lightbox

Всего записей: 15134 | Зарегистр. 20-09-2014 | Отправлено: 23:02 08-03-2024
Ron2323



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо. Всё получилось, скрипт заработал, так как требуется.

Всего записей: 46 | Зарегистр. 01-05-2017 | Отправлено: 23:52 08-03-2024
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Активные темы » Скрипт для возврата по клику открытой картинки на предыдущее


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru