21 / 10 / 4
Регистрация: 02.04.2015
Сообщений: 722
|
|||||||||||
При клике на маленькое фото открытие большого фото в модальном окне06.02.2018, 20:22. Показов 40093. Ответов 6
Метки нет Все метки)
(
Привет, помогите решить проблему!
У меня есть скрипт фотогалереи, она отображает маленькие превью фотографий вот сам хтмл код который выводит 5 превьюшек (маленького размера) с этим проблем нет, но мне нужно чтобы при клике например на фото <li><a href="#"><img src="images/small/1.jpg" data-src="images/large/1.jpg" /></a></li> загружалось фото фольшого размера в МОДАЛЬНОМ ОКНЕ, пример модального окна я привел в самом низу мне без разницы это модальное окно будет или нет, нужно чтобы при клике на <li><a href="#"><img src="images/small/1.jpg" data-src="images/large/1.jpg" /></a></li> ява скриптом вылавливаливался урл картинки тот что находится data-src="" images/large/1.jpg и открывалось модальное окно с большим изображением В галереии приведены 5 фото но на деле может быть меньше или больше, но строение хтмл кода будет такое
Вот код пример модального окна, при клике на маленькое фото откроется окно там должно быть большое фото нужно решение на яваскрипте.
0
|
06.02.2018, 20:22 | |
Ответы с готовыми решениями:
6
Как сделать открытие слайд-шоу в модальном окне при клике на ссылке?
|
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,127
|
|
06.02.2018, 20:54 | |
0
|
21 / 10 / 4
Регистрация: 02.04.2015
Сообщений: 722
|
|||||||
06.02.2018, 21:25 [ТС] | |||||||
в данном примере идет банальное увеличение фото из превью, т.е. оно изначально большое и уменьшено средствами цсс view-source:http://www.web.cofp.ru/demo/articles/12/ вот исходный код
фото большого размера у меня хранятся тут data-src="images/large/1.jpg"
0
|
07.02.2018, 00:33 | ||
0
|
![]() ![]() |
|
07.02.2018, 09:26 | |
![]() Решение
serauto79, лучше подключите и настройте fancybox или lightbox...
1
|
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,127
|
||||
07.02.2018, 13:48 | ||||
и перейдите на jquery - там же удобнее Добавлено через 3 минуты Добавлено через 2 минуты 1. достаете нужные атрибуты, то есть в вашем случае src и потом вставляйте куда нужно, там же все написано
1
|
21 / 10 / 4
Регистрация: 02.04.2015
Сообщений: 722
|
|
09.02.2018, 21:05 [ТС] | |
0
|
09.02.2018, 21:05 | |
Помогаю со студенческими работами здесь
7
При нажатии на фото снизу оно замещало фото в окне сверху над ним При нажатии на фото снизу оно замещало фото в окне сверху над ним При клике увеличиваем фото Камера выдаёт маленькое фото При загрузке фото, почему-то загружаеться только 5 фото Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
![]() |
||||
Генерация OpenQASM из кода Q#
EggHead 10.07.2025
Летом 2024-го я начал эксперименты с библиотекой Q# Bridge, и знаете что? Она оказалась просто находкой для тех, кто работает на стыке разных квантовых экосистем. Основная фишка этой библиотеки -. . .
|
Изучаем новый шаблон ИИ-чата .NET AI Chat Web App
stackOverflow 10.07.2025
В . NET появилось интересное обновление - новый шаблон ИИ-чата под названием . NET AI Chat Web App. Когда я впервые наткнулся на анонс этого шаблона, то сразу понял, что Microsoft наконец-то. . .
|
Результаты исследования от команды ARP (июль 2025 г.)
Programma_Boinc 10.07.2025
Результаты исследования от команды ARP (июль 2025 г. )
Африканский проект по дождям (ARP) World Community Grid снова запущен! Мы рады поделиться обновленной информацией о нашем прогрессе с осени. . .
|
Angular vs Svelte - что лучше?
Reangularity 09.07.2025
Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .
|
Code First и Database First в Entity Framework
UnmanagedCoder 09.07.2025
Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать?
Entity Framework — это. . .
|
Как использовать Bluetooth-модуль HC-05 с Arduino
Wired 08.07.2025
Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .
|
Руководство по структурам данных Python
AI_Generated 08.07.2025
Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .
|
Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах
Programma_Boinc 08.07.2025
Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах
Опубликовано: 07. 07. 2025
Рубрика: Uncategorized
Автор: AlexA
Статья размещается на сайте с разрешения. . .
|
Раскрываем внутренние механики Android с помощью контекста и манифеста
mobDevWorks 07.07.2025
Каждый Android-разработчик сталкивается с Context и манифестом буквально в первый день работы. Но много ли мы задумываемся о том, что скрывается за этими обыденными элементами? Я, честно говоря,. . .
|
API на базе FastAPI с Python за пару минут
AI_Generated 07.07.2025
FastAPI - это относительно молодой фреймворк для создания веб-API, который за короткое время заработал бешеную популярность в Python-сообществе. И не зря. Я помню, как впервые запустил приложение на. . .
|