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

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

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

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

<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

<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

<!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

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

@Htext 357 / 118 / 20 Регистрация: 08.01.2015 Сообщений: 1,361 Записей в блоге: 1
	07.02.2018, 00:33	4
	Сообщение от serauto79 уже когда я на него кликну то должно открываться фото большого размера Тут, вроде бы, лишь один выход - подгружать дополнительно большое фото по AJAX. Ну, в принципе, можно, конечно, по ссылке загружать его во фрейм. 0

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

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	07.02.2018, 13:48	6
	Сообщение от serauto79 не подходит по той причине что сразу грузит все фото большого размера в браузер, а в моем примере если заметили сразу грузятся маленькие фото, и уже когда я на него кликну то должно открываться фото большого размера там также вроде) чуть под себя трудно подстроить исходя их того кода? и перейдите на jquery - там же удобнее Добавлено через 3 минуты Сообщение от serauto79 не подходит по той причине что сразу грузит все фото большого размера в браузер, а в моем примере если заметили сразу грузятся маленькие фото, и уже когда я на него кликну то должно открываться фото большого размера ну смотрите там увеличивается средствами css одной фото и на серевер одно фото грузится - а увас две папки я так понимаю для фоток - и что выгоднее подгружать? Лучше сразу одну или сначала вашу миниатюру, а потом при клике на нее погружать вторую большую фотку? Добавлено через 2 минуты Сообщение от serauto79 не подходит по той причине что сразу грузит все фото большого размера в браузер, а в моем примере если заметили сразу грузятся маленькие фото, и уже когда я на него кликну то должно открываться фото большого размера если уж прям так хотите - то в тй же ссылке как раз и показан тот метод 1. достаете нужные атрибуты, то есть в вашем случае src и потом вставляйте куда нужно, там же все написано 1

@serauto79 20 / 9 / 3 Регистрация: 02.04.2015 Сообщений: 649
	09.02.2018, 21:05 [ТС]	7
	Сообщение от Fedor92 лучше подключите и настройте fancybox или lightbox... спасибо за наводку так и сделал - отлично подошел lightbox 0

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

Решение