Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.74/190: Рейтинг темы: голосов - 190, средняя оценка - 4.74
21 / 10 / 4
Регистрация: 02.04.2015
Сообщений: 722

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

06.02.2018, 20:22. Показов 40096. Ответов 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)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
06.02.2018, 20:22
Ответы с готовыми решениями:

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

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

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

6
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
21 / 10 / 4
Регистрация: 02.04.2015
Сообщений: 722
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"
0
365 / 124 / 22
Регистрация: 08.01.2015
Сообщений: 1,418
Записей в блоге: 2
07.02.2018, 00:33
Цитата Сообщение от serauto79 Посмотреть сообщение
уже когда я на него кликну то должно открываться фото большого размера
Тут, вроде бы, лишь один выход - подгружать дополнительно большое фото по AJAX. Ну, в принципе, можно, конечно, по ссылке загружать его во фрейм.
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
07.02.2018, 09:26
Лучший ответ Сообщение было отмечено serauto79 как решение

Решение

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

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

Добавлено через 2 минуты
Цитата Сообщение от serauto79 Посмотреть сообщение
не подходит по той причине что сразу грузит все фото большого размера в браузер, а в моем примере если заметили сразу грузятся маленькие фото, и уже когда я на него кликну то должно открываться фото большого размера
если уж прям так хотите - то в тй же ссылке как раз и показан тот метод
1. достаете нужные атрибуты, то есть в вашем случае src и потом вставляйте куда нужно, там же все написано
1
21 / 10 / 4
Регистрация: 02.04.2015
Сообщений: 722
09.02.2018, 21:05  [ТС]
Цитата Сообщение от Fedor92 Посмотреть сообщение
лучше подключите и настройте fancybox или lightbox...
спасибо за наводку так и сделал - отлично подошел lightbox
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
09.02.2018, 21:05
Помогаю со студенческими работами здесь

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

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Генерация 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-сообществе. И не зря. Я помню, как впервые запустил приложение на. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru