Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.81/32: Рейтинг темы: голосов - 32, средняя оценка - 4.81
0 / 0 / 2
Регистрация: 16.09.2014
Сообщений: 9
1

Как сделать открытие галереи изображений при клике на картинку

16.09.2014, 21:17. Просмотров 6373. Ответов 4
Метки нет (Все метки)

Good day!
Делаю Landing page на котором будут представлены несколько квартир.

На сайте несколько блоков:
Адрес квартиры и одна уменьшенная фотка квартиры.
При клике на фотке, хочу чтобы открывалась галерея с более качественными фотками. Которые клиент может свободно листать.

Попытался сделать с FancyBox. Не получилось, пока только начинаю разбираться.

Подскажите как это можно сделать (и какую на Open Source галерею использовать)
landing page.7z
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.09.2014, 21:17
Ответы с готовыми решениями:

Как при клике повернуть картинку на 45 градусов?
Привет всем ! Подскажите как мне сделать чтобы при клике на картинку, она поворачивалась на 45% по...

Как сделать картинку цветной при клике на нее?
Здравствуйте товарищи. Есть четыре изображения которые при наведении становятся цветными, но как...

Как добавить значение 1 в таблицу mysql при клике на картинку?
Всем привет! Есть ссылка на картинку, нужно чтобы при нажатии на нее, присваивалось значение 1 в...

Как хранить оригиналы изображений для галереи на Яндекс.Диске?
Можно ли сделать так чтоб оригиналы изображений для галереи JoomGallery хранились на Яндекс.Диске?

4
Eva Rosalene
16.09.2014, 22:06
  #2
 Комментарий модератора 
valbv, значимые коды выложите текстом на форум.
0
0 / 0 / 2
Регистрация: 16.09.2014
Сообщений: 9
17.09.2014, 12:10  [ТС] 3
Лучший ответ Сообщение было отмечено Eva Rosalene как решение

Решение

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

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
<!-------------------------------------------------------- flats ------------------------------------------------------------------------------------------------------------>        
        <div class="w100p container" style="background: black url(img/black-bg.jpg) 90% 0% no-repeat; color: #fdf9f9;" >
            <div class="w100p" style="background: url(img/black-bg-bottom.jpg) 50% 100% no-repeat; ">
            <div class="center-column">
                <div class="c"><h1 id="menu-flats" class="white-color">Квартиры</h1></div>
 
                <div class="first-column">
                    <h3>СОВЕТСКАЯ 32</h3>
                    <img src="img/flats/sovetskaya32/sovetskaya32.jpg" width="302" height="199" alt="" />
                </div>
                <div class="second-column">
                    <h3>КРАСНЫЙ ПР-Т 87/2</h3>
                    <img src="img/flats/krpr87_2/krpr87_2.jpg" width="302" height="199" alt=""/>
                </div>
                <div class="third-column">
                    <h3>КУЗЬМЫ МИНИНА 9/1</h3>
                    <img src="img/flats/minina9_1/minina9_1.jpg" width="303" height="199" alt=""/>
                </div>
                <div class="cb"></div>
                <br/>
            </div>
        </div>
        </div>
<!-------------------------------------------------------- /flats ------------------------------------------------------------------------------------------------------------>
Добавлено через 13 часов 25 минут
Нашёл способ "через попу". С помощью FancyBox (хз, почему с первого раза не заработал) Большое спасибо Автору мануала Gennady!
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html class="no-js">
    <head>
        <!-- FancyBox -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="./fancybox/jquery.fancybox.js"></script>
        <link rel="stylesheet" type="text/css" href="./fancybox/fancy.css" />
        
        <script type="text/javascript">
        $(document).ready(function(){
            
            function getGroupItems1(opts) {
                jQuery.each(imageList1, function(i, val) {
                    opts.itemArray.push(val);
                });
            }
            
            function getGroupItems2(opts) {
                jQuery.each(imageList2, function(i, val) {
                    opts.itemArray.push(val);
                });
            }
            
            function getGroupItems3(opts) {
                jQuery.each(imageList3, function(i, val) {
                    opts.itemArray.push(val);
                });
            }
            
            $("#custom1").fancybox({
                itemLoadCallback: getGroupItems1
            });
            
            $("#custom2").fancybox({
                itemLoadCallback: getGroupItems2
            });
            
            $("#custom3").fancybox({
                itemLoadCallback: getGroupItems3
            });
        });
        </script>
        <!-- /FancyBox -->
        
    </head>
    <body>
  
        <div class="w100p container" style="background: black url(img/black-bg.jpg) 90% 0% no-repeat; color: #fdf9f9;" >
            <div class="w100p" style="background: url(img/black-bg-bottom.jpg) 50% 100% no-repeat; ">
            <div class="center-column">
                <div class="c"><h1 id="menu-flats" class="white-color">Квартиры</h1></div>
 
                <div class="first-column">
                    <h3>СОВЕТСКАЯ 32</h3>
                    <a id="custom1" href="javascript:;"><img src="img/flats/sovetskaya32/sovetskaya32.jpg" alt="" /></a>
                    <script type="text/javascript">
                    var imageList1 = [
                        {url: "img/flats/sovetskaya32/1.jpg", title: ""},
                        {url: "img/flats/sovetskaya32/2.jpg", title: ""},
                        {url: "img/flats/sovetskaya32/3.jpg", title: ""},
                        {url: "img/flats/sovetskaya32/4.jpg", title: ""}
                    ];
                    </script>
                    <div class="fgDemiCond" style="font-size: 25px; line-height: 100%; color: #f3c400;">1600 Рублей/сутки</div>
                </div>
                <div class="second-column">
                    <h3>КРАСНЫЙ ПР-Т 87/2</h3>
                    <a id="custom2" href="javascript:;"><img src="img/flats/krpr87_2/krpr87_2.jpg" alt="" /></a>
                    <script type="text/javascript">
                    var imageList2 = [
                        {url: "img/flats/krpr87_2/1.jpg", title: ""},
                        {url: "img/flats/krpr87_2/2.jpg", title: ""},
                        {url: "img/flats/krpr87_2/3.jpg", title: ""},
                        {url: "img/flats/krpr87_2/4.jpg", title: ""},
                        {url: "img/flats/krpr87_2/5.jpg", title: ""},
                        {url: "img/flats/krpr87_2/6.jpg", title: ""},
                        {url: "img/flats/krpr87_2/7.jpg", title: ""},
                        {url: "img/flats/krpr87_2/8.jpg", title: ""},
                        {url: "img/flats/krpr87_2/9.jpg", title: ""}
                    ];
                    </script>
                </div>
                <div class="third-column">
                    <h3>КУЗЬМЫ МИНИНА 9/1</h3>
                    <a id="custom3" href="javascript:;"><img src="img/flats/minina9_1/minina9_1.jpg" alt="" /></a>
                    <script type="text/javascript">
                    var imageList3 = [
                        {url: "img/flats/minina9_1/1.jpg", title: ""},
                        {url: "img/flats/minina9_1/2.jpg", title: ""},
                        {url: "img/flats/minina9_1/3.jpg", title: ""},
                        {url: "img/flats/minina9_1/4.jpg", title: ""},
                        {url: "img/flats/minina9_1/5.jpg", title: ""},
                        {url: "img/flats/minina9_1/6.jpg", title: ""},
                        {url: "img/flats/minina9_1/7.jpg", title: ""},
                        {url: "img/flats/minina9_1/8.jpg", title: ""},
                        {url: "img/flats/minina9_1/9.jpg", title: ""},
                        {url: "img/flats/minina9_1/10.jpg", title: ""}
                    ];
                    </script>
                </div>
                <div class="cb"></div>
            </div>
        </div>
        </div>
Добавлено через 9 минут
Коротко смысл:
1) Создаем массив imageList, в котором указаны пути на остальные фотографии этой квартиры.
Javascript
1
2
3
4
5
6
var imageList = [
                        {url: "img/flats/sovetskaya32/1.jpg", title: ""},
                        {url: "img/flats/sovetskaya32/2.jpg", title: ""},
                        {url: "img/flats/sovetskaya32/3.jpg", title: ""},
                        {url: "img/flats/sovetskaya32/4.jpg", title: ""}
];
2) Определяем функцию getGroupItems(opts) , которая будет получать эту группу фотографий
Javascript
1
2
3
4
5
function getGroupItems1(opts) {
    jQuery.each(imageList1, function(i, val) {
        opts.itemArray.push(val);
    });
}
3) Передать плагину fancybox необходимый параметр #custom
Javascript
1
2
3
$("#custom1").fancybox({
    itemLoadCallback: getGroupItems1
});
Добавлено через 4 минуты
Так как у меня на странице несколько блоков с фотографиями приходится под каждый создавать одну и ту же функцию. Но с разными параметрами, типа getGroupItems1, getGroupItems2, getGroupItems3, #custom1, #custom2, #custom3

Как это можно сделать по-нормальному, более коротко и красиво?
0
0 / 0 / 0
Регистрация: 03.09.2017
Сообщений: 10
03.09.2017, 18:35 4
Что-то у меня не получается по Вашему примеру
0
0 / 0 / 0
Регистрация: 08.09.2015
Сообщений: 1
18.10.2018, 11:44 5
А где файлы css? <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.js"></script> ????
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.10.2018, 11:44

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Загрузка изображений с сайта при клике
Помогите разобрать в коде загрузки изображений с сайта на рабочий стол: При клике на картинку ты...

Открытие блока при клике
Имеется форма: #msg { width: 430px; min-height: 30px; } #msg:focus { height: 100px; ...

Открытие меню при клике
Помогите с меню пожалуйста. Нужно, чтобы при клике открывалось submenu, а не при наведении. ...

Смена изображений при клике, по заданному времени
1)Как сделать смену картинки при клике на неё? Допустим, у меня стоит картинка мотоцикла. Хочу...


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

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

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