20 / 9 / 3
Регистрация: 02.04.2015
Сообщений: 592
1

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

06.02.2018, 20:22. Показов 26330. Ответов 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 фото но на деле может быть меньше или больше, но строение хтмл кода будет такое
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"/>
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.02.2018, 20:22
Ответы с готовыми решениями:

Открытие контента в другом модальном окне при клике на ссылку
Всем привет. Мне нужно узнать, как при нажатие на ссылку, открыть контент, в другом модальном окне....

Как сделать открытие слайд-шоу в модальном окне при клике на ссылке?
На данный момент по ссылке открывается отдельная страница с несколькими картинками. Хочу сделать...

При нажатии на фото снизу оно замещало фото в окне сверху над ним
Кто сталкивался... Подскажите как реализовать...?при нажатии на фото снизу оно замещало фото в окне...

При нажатии на фото снизу оно замещало фото в окне сверху над ним
Здравствуйте подскажите кто сталкивался, как реализовать: при нажатии на фото снизу оно замещало...

6
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
20 / 9 / 3
Регистрация: 02.04.2015
Сообщений: 592
06.02.2018, 21:25  [ТС] 3
Цитата Сообщение от 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"
0
353 / 114 / 20
Регистрация: 08.01.2015
Сообщений: 1,224
Записей в блоге: 1
07.02.2018, 00:33 4
Цитата Сообщение от serauto79 Посмотреть сообщение
уже когда я на него кликну то должно открываться фото большого размера
Тут, вроде бы, лишь один выход - подгружать дополнительно большое фото по AJAX. Ну, в принципе, можно, конечно, по ссылке загружать его во фрейм.
0
Эксперт HTML/CSS
2957 / 2546 / 1066
Регистрация: 15.12.2012
Сообщений: 9,607
Записей в блоге: 10
07.02.2018, 09:26 5
Лучший ответ Сообщение было отмечено serauto79 как решение

Решение

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

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

Добавлено через 2 минуты
Цитата Сообщение от serauto79 Посмотреть сообщение
не подходит по той причине что сразу грузит все фото большого размера в браузер, а в моем примере если заметили сразу грузятся маленькие фото, и уже когда я на него кликну то должно открываться фото большого размера
если уж прям так хотите - то в тй же ссылке как раз и показан тот метод
1. достаете нужные атрибуты, то есть в вашем случае src и потом вставляйте куда нужно, там же все написано
1
20 / 9 / 3
Регистрация: 02.04.2015
Сообщений: 592
09.02.2018, 21:05  [ТС] 7
Цитата Сообщение от Fedor92 Посмотреть сообщение
лучше подключите и настройте fancybox или lightbox...
спасибо за наводку так и сделал - отлично подошел lightbox
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.02.2018, 21:05

При нажатии на фото снизу оно замещало фото в окне сверху над ним
Здравствуйте подскажите кто сталкивался, как реализовать: при нажатии на фото снизу оно замещало...

При клике увеличиваем фото
Давно волновал вопрос. Как можно сделать, что при наведении на картинку, а затем на её нажатии,...

Камера выдаёт маленькое фото
Пытаюсь записать фото в память , файл записывается , но в фото крошечная картинка 160 на 120...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.