При клике на маленькое фото открытие большого фото в модальном окне

@serauto79 · Регистрация: 02.04.2015

Студворк — интернет-сервис помощи студентам

Привет, помогите решить проблему!
У меня есть скрипт фотогалереи, она отображает маленькие превью фотографий
вот сам хтмл код который выводит 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 фото но на деле может быть меньше или больше, но строение хтмл кода будет такое

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="container gallery">
<div class="column">
<ul id="carousel" class="miogallery-list">
<li><a href="#"><img src="images/small/1.jpg" data-src="images/large/1.jpg" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" data-src="images/large/2.jpg" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" data-src="images/large/3.jpg" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" data-src="images/large/4.jpg" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" data-src="images/large/5.jpg" /></a></li>
</ul>
</div>
</div>

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
.overlay {
    background: #000;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    opacity: .5;
}
.visible {
    background: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    overflow: hidden;
    z-index: 2000;
    width: 800px;
    padding: 0px;
    margin-left: -250px;
}
</style>
 
 
 
 
 
<div id="win" style="display:none;">
<div class="overlay"></div>
<div class="visible">
Тут должна отображатся большая фотография!
как мне переделать под мой вариант?
<a href="#" onClick="getElementById('win').style.display='none';">закрыть окно</a>
<img src="https://4lapki.com/wp-content/uploads/2017/01/britanskii-kot7.jpg" width="800" height="600"/>
</div>
</div>
 
 
 
 
 
<img onClick="getElementById('win').removeAttribute('style');" src="https://4lapki.com/wp-content/uploads/2017/01/britanskii-kot7.jpg" width="120" height="80"/>

@andyyy · 06.02.2018, 20:54

http://www.web.cofp.ru/vse-o-s... ii-na-nego

@serauto79 · 06.02.2018, 21:25 **[ТС]**

Сообщение от andyyy

http://www.web.cofp.ru/vse-o-sajtakh...zhatii-na-nego

вообще не то что мне нужно!
в данном примере идет банальное увеличение фото из превью, т.е. оно изначально большое и уменьшено средствами цсс

view-source:http://www.web.cofp.ru/demo/articles/12/
вот исходный код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="../12/css/template.css" type="text/css" />
    <SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
    <script type="text/javascript" src="js/popup_img.js"></script>
</head>
<body>
    <img src="images/image1.jpg" class="image" alt="Пейзаж" />
    <img src="images/image2.jpg" class="image" alt="Пейзаж" />
    <img src="images/image3.jpg" class="image" alt="Пейзаж" />
</body>
</html>

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

фото большого размера у меня хранятся тут

data-src="images/large/1.jpg"

@Htext · 07.02.2018, 00:33

Сообщение от serauto79

уже когда я на него кликну то должно открываться фото большого размера

Тут, вроде бы, лишь один выход - подгружать дополнительно большое фото по AJAX. Ну, в принципе, можно, конечно, по ссылке загружать его во фрейм.

@Fedor92 · 07.02.2018, 09:26

serauto79, лучше подключите и настройте fancybox или lightbox...

@andyyy · 07.02.2018, 13:48

Сообщение от serauto79

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

там также вроде) чуть под себя трудно подстроить исходя их того кода?
и перейдите на jquery - там же удобнее

Добавлено через 3 минуты

Сообщение от serauto79

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

ну смотрите там увеличивается средствами css одной фото и на серевер одно фото грузится - а увас две папки я так понимаю для фоток - и что выгоднее подгружать? Лучше сразу одну или сначала вашу миниатюру, а потом при клике на нее погружать вторую большую фотку?

Добавлено через 2 минуты

Сообщение от serauto79

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

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

@serauto79 · 09.02.2018, 21:05 **[ТС]**

Сообщение от Fedor92

лучше подключите и настройте fancybox или lightbox...

спасибо за наводку так и сделал - отлично подошел lightbox

Новые блоги и статьи Все статьи Все блоги /
Генерация 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-сообществе. И не зря. Я помню, как впервые запустил приложение на. . .

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	06.02.2018, 20:54
	http://www.web.cofp.ru/vse-o-s... ii-na-nego 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	07.02.2018, 09:26
	Сообщение было отмечено serauto79 как решение Решение serauto79, лучше подключите и настройте fancybox или lightbox... 1

При клике на маленькое фото открытие большого фото в модальном окне

Решение