Форум программистов, компьютерный форум, киберфорум
Фриланс
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 09.04.2020
Сообщений: 3
1

Как сделать фильтрацию изображений в самом lightbox

09.04.2020, 16:01. Просмотров 543. Ответов 1

Здравствуйте, так как сам можно сказать еще чайник во всем этом, прошу помощи специалистов в таком вопросе: есть галерея фотографий с кнопками по категориям. Фильтрацию на кнопки я уже сделал (у меня 6 категорий), то есть когда нажимаешь на одну категорию показывает одни фотографии, когда на другую категорию показывает другие фотографии и т.д., а когда нажимаешь на категорию "все" показывает все. Сейчас написал свой Lightbox без подключения каких-то плагинов. Но теперь возникла проблема что когда в Lightbox я нажимаю на кнопку "следующее фото" или "предыдущее фото" они у меня не фильтруются по категориям, а показываются все. Как сделать что бы в Lightbox мне показывались фотографии только с открытой категории, а не все сразу???

Вот файл HTML:

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
105
<div class="four__galeria">
                <ul class="galeria__button ">
                    <li><a class="button" href="#" data-filter="all">Wszystkie zdęcia</a></li>
                    <li><a class="button" href="#" data-filter="Dania">Dania</a></li>
                    <li><a class="button" href="#" data-filter="Wnętrze">Wnętrze</a></li>
                    <li><a class="button" href="#" data-filter="Pizza">Pizza</a></li>
                    <li><a class="button" href="#" data-filter="Drinki">Drinki</a></li>
                    <li><a class="button" href="#" data-filter="Sala bankietowa">Sala bankietowa</a></li>
                </ul>
                <div class="portfolio">
                    <div class="portfolio__col"  data-cat="Dania">
                        <a href="img/galery/da1.jpg"><img src="img/da1.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Wnętrze">
                        <a href="img/galery/w5.jpg"><img src="img/w5.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Drinki">
                        <a href="img/galery/d5.jpg"><img src="img/d5.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Sala bankietowa">
                        <a href="img/fsi.jpg"><img src="img/sb1.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Wnętrze">
                        <a href="img/galery/w1.jpg"><img src="img/w1.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Wnętrze">
                        <a href="img/galery/w2.jpg"><img src="img/w2.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Wnętrze">
                        <a href="img/galery/w3.jpg"><img src="img/w3.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Wnętrze">
                        <a href="img/galery/w4.jpg"><img src="img/w4.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Wnętrze">
                        <a href="img/galery/w6.jpg"><img src="img/w6.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Wnętrze">
                        <a href="img/galery/w7.jpg"><img src="img/w7.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Sala bankietowa">
                        <a href="img/galery/3.jpg"><img src="img/3.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Sala bankietowa">
                        <a href="img/galery/4.jpg"><img src="img/4.png" alt=""></a>
                    </div>
                    <div class="portfolio__col" data-cat="Sala bankietowa">
                        <a href="img/galery/7.jpg"><img src="img/7.png" alt=""></a>
                    </div>
                    <div class="portfolio__col" data-cat="Sala bankietowa">
                        <a href="img/galery/8.jpg"><img src="img/8.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Sala bankietowa">
                        <a href="img/galery/9.jpg"><img src="img/9.png" alt=""></a>
                    </div>
                    <div class="portfolio__col" data-cat="Drinki">
                        <a href="img/galery/d1.jpg"><img src="img/d1.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Drinki">
                        <a href="img/galery/d2.jpg"><img src="img/d2.png" alt=""></a>
                    </div>
                    <div class="portfolio__col" data-cat="Drinki">
                        <a href="img/galery/d3.jpg"><img src="img/d3.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Drinki">
                        <a href="img/galery/d4.jpg"><img src="img/d4.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Drinki">
                        <a href="img/galery/d6.jpg"><img src="img/d6.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Pizza">
                        <a href="img/galery/p1.jpg"><img src="img/p1.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Pizza">
                        <a href="img/galery/p2.jpg"><img src="img/p2.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Pizza">
                        <a href="img/galery/p3.jpg"><img src="img/p3.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Pizza">
                        <a href="img/galery/p4.jpg"><img src="img/p4.png" alt=""></a>
                    </div>
                    <div class="portfolio__col" data-cat="Pizza">
                        <a href="img/galery/p5.jpg"><img src="img/p5.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Pizza">
                        <a href="img/galery/p7.jpg"><img src="img/p7.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Pizza">
                        <a href="img/galery/p8.jpg"><img src="img/p8.png" alt=""></a>
                    </div>
                    <div class="portfolio__col"  data-cat="Pizza">
                        <a href="img/galery/p6.jpg"><img src="img/p6.png" alt=""></a>
                    </div>
                </div>
                <div class="lightbox">
                    <div class="overlay">
                        <img src="#">
                    </div>
                    <div class="figure">
                        <span class="prev"></span>
                        <span class="next"></span>
                    </div>
                </div>
            </div>
Вот файл CSS если потребуется:

CSS
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
.four__galeria{
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 40px;
}
.galeria__button{
    padding-bottom: 40px;
}
.galeria__button li{
    display: inline-block;
    padding: 0px 5px;
}
.button{
    cursor: pointer;
}
.button{
    background: #cccccc;
    font-size: 20px;
    color: #333333;
    padding: 5px 10px;
    border: 0;
    border-radius: 2px;
}
.button:hover{
    color: #ff0000;
 
}
.button:active{
    background: #ff0000;
    color: #ffffff;
}
.portfolio{
    display: flex;
    flex-wrap: wrap;
}
.portfolio__col{
    flex-basis: 270px;
    padding: 10px;
}
.portfolio__col img{
    border: 1px solid #ffffff;
    border-radius: 5px;
}
.portfolio__col img:hover{
    border: 1px solid #ff0000;
    opacity: 0.9;
}
.hide{
    display: none;
}
.lightbox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 
    text-align: center;
    overflow-y: inherit;
}
.overlay{
    position: absolute;
    z-index: -1;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
}
.figure {
    display: inline-block;
    text-align: center;
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 610px;
  }
.lightbox img{
    padding-top: 10px;
    max-width: 1200px;
    max-height: 620px;
 
 
}
.next, .prev {
    font-size: 48px;
    font-weight: normal;
    color:rgb(255, 255, 255);
    cursor: pointer;
    padding: 0px 20px;
  }
И вот собственно сам файл JavaScript:

Javascript
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
$(function () {
  let filter = $("[data-filter]");
  $("[data-cat]").addClass("active");
  filter.on("click", function (event) {
    event.preventDefault();
    let cat = $(this).data('filter');
    if (cat === 'all') {
      $("[data-cat]").removeClass('hide');
      
    } else {
      $("[data-cat]").each(function () {
        let workcat = $(this).data('cat');
        if (workcat !== cat) {
          $(this).addClass('hide');
        } else {
          $(this).removeClass('hide');
        }
      });
    }
    
  });
  $(function () {
    var $div = $('.four__galeria').find( " > .portfolio" ).find(" > .portfolio__col "),
        $links = $div.find('> a'),
        $lightbox = $('.lightbox'),
        $overlay = $('.overlay'),
        $prev = $('.prev'),
        $next = $('.next'),
        divIndex,
        targetImg;
    function replaceImg(src) {
        $lightbox.find('img').attr('src', src);
    }
    function getHref(index) {
        return $div.eq(index).find('> a').attr('href');
    }
    $links.click(function (event) {
        event.preventDefault();
        divIndex = $(this).parent().index();
        targetImg = $(this).attr('href');
        replaceImg(targetImg);
        $lightbox.fadeIn();
    });
 
    $overlay.click(function () {
        $lightbox.fadeOut();
    });
 
    $next.click(function () {
        
        
        if ((divIndex + 1) < $div.length) {
            targetImg = getHref(divIndex + 1);
            divIndex++;
            
        } else {
            targetImg = getHref(0);
            divIndex = 0;
        }
        replaceImg(targetImg);
    });
 
    $prev.click(function () {
        if ( (divIndex) > 0) {
 
            targetImg = getHref(divIndex - 1);
            divIndex--;
        } else {
            targetImg = getHref($div.length - 1);
            divIndex = $div.length - 1;
        }
        replaceImg(targetImg);
    });
});
 
});
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
09.04.2020, 16:01
Ответы с готовыми решениями:

Загрузка изображений в lightbox
Привет! Сделала на бутстрапе галерею, присоединила к иконкам lightbox , подсоединила скрипт ...

Не правильное определение общего количества изображений Lightbox Plus
Здравствуйте, господа. У меня такая проблема, плагин Lightbox Plus / Lightbox Gallery не правильно...

Как сделать фильтрацию массива?
Есть код, в нём несколько имён, и при вводе определённого имени к примеру chris высвечивается окно...

Как сделать фильтрацию списка?
И снова здравствуйте! Помогите, пожалуйста, новичку)) У меня есть список фраз, нужно сделать...

1
0 / 0 / 0
Регистрация: 09.04.2020
Сообщений: 3
10.04.2020, 16:39  [ТС] 2
Всем спасибо)
Нашёл ответ сам, но хочу поделится с теми кто столкнется с чем-то таким же.
Просто напросто нужно было при каждом нажатии на ссылку, то есть на миниатюру изображения сделать повторную проверку элементов. Выглядит это так:
Javascript
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
$(function () {
  let filter = $("[data-filter]");
  $("[data-cat]").addClass("active")
  filter.on("click", function (event) {
    event.preventDefault();
    let cat = $(this).data('filter');
    if (cat === 'all') {
      $("[data-cat]").addClass('active');
      $("[data-cat]").removeClass('hide');
      
    } else {
      $("[data-cat]").each(function () {
        let workcat = $(this).data('cat');
        if (workcat !== cat) {
          $(this).addClass('hide');
          $(this).removeClass('active');
        } else {
          $(this).removeClass('hide');
          $(this).addClass('active');
        }
      });
    }
    
  });
  $(function () {
    var $div = $('.four__galeria').find( " > .portfolio" ).find(" > div.active"),
        $links = $div.find('> a'),
        $lightbox = $('.lightbox'),
        $overlay = $('.overlay'),
        $prev = $('.prev'),
        $next = $('.next'),
        divIndex,
        targetImg;
    function replaceImg(src) {
        $lightbox.find('img').attr('src', src);
    }
    function getHref(index) {
        return $div.eq(index).find('> a').attr('href');
    }
    $links.click(function (event) {
        event.preventDefault();
        $div = $('.four__galeria').find( " > .portfolio" ).find(" > div.active");
        divIndex = $(this).parent().index();
        targetImg = $(this).attr('href');
        replaceImg(targetImg);
        $lightbox.fadeIn();
    });
 
    $overlay.click(function () {
        $lightbox.fadeOut();
    });
 
    $next.click(function () {
        
        
        if ((divIndex + 1) < $div.length) {
            targetImg = getHref(divIndex + 1);
            divIndex++;
            
        } else {
            targetImg = getHref(0);
            divIndex = 0;
        }
        replaceImg(targetImg);
    });
 
    $prev.click(function () {
        if ( (divIndex) > 0) {
 
            targetImg = getHref(divIndex - 1);
            divIndex--;
        } else {
            targetImg = getHref($div.length - 1);
            divIndex = $div.length - 1;
        }
        replaceImg(targetImg);
    });
});
 
});
Понимаю что для кого-то это выглядело просто, но я писал же что еще в этом всем чайник.
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.04.2020, 16:39

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

Как сделать фильтрацию в таблицы
Всем привет. У меня есть база в аксесе, DBRgid, Edit и Button. Как мне сделать фильтрацию данных по...

Как сделать фильтрацию/поиск по бд ?
Имеется форма Wpf. На ней лежит DataGrid с именем grid1. В DataGrid выводится таблица из локальной...

Как сделать фильтрацию по тв-параметрам
Есть сайт banknauk.ru На главной фильтры по tv - параметрам: price, lesson, typeofwork в виде...

Как сделать фильтрацию по edit?
Здравствуйте дорогие форумчане. Прошу Вас помочь создать фильтрацию по Edit. На форумах есть...

Как сделать фильтрацию по Базе данных?
как сделать фильтрацию по Базе данных в делфи 7

Как сделать фильтрацию и сортировку в DataGridView?
Есть класс с несколькими свойствами, в основном string. List&lt;&gt; таких классов является DataSource в...


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

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

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