Код прокручивает изображения вперед и назад по клику. Найти в нем ошибку

@gmelihov · Регистрация: 12.02.2013

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

Есть код. Он прокручивает изображения вперед и назад по клику.
При нажатии на саму кнопку, фотография появляется в темном фоне.
В указанном примере используется 6 фотографий.
При пролистывании фотографий вперед, после 6-го изображения, по клику фото не появляется в темном фоне.
При пролистывании фотографии назад, по клику вообще не появляется в темном фоне. Где ошибка?

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
$(document).ready(function() {  
    var id; 
    $('a[name=modal]').click(function(e) {
    e.preventDefault();
    
    id = $(this).attr('href');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    $('#mask').fadeIn(1000);  
    $('#mask').fadeTo("slow",0.8);
 
      $(id).fadeIn(2000);
    });
    $('.window .close').click(function (e) { 
    e.preventDefault();
    $('#mask, .window').hide();
    }); 
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    });
    
    
     /*Функция движения взад и вперед*/
      $(".btnright").click(function(){ 
        $(".width-items").animate({left: "-222px"}, 200); 
        setTimeout(function () { 
            $(".width-items .width-block").eq(0).clone().appendTo(".width-items"); 
            $(".width-items .width-block").eq(0).remove(); 
            $(".width-items").css({"left":"0px"}); 
        }, 300);
    });
    
    $(".btnleft").click(function(){ 
        $(".width-items .width-block").eq(-1).clone().prependTo(".width-items"); 
        $(".width-items").css({"left":"-222px"}); 
        $(".width-items").animate({left: "0px"}, 200); 
        $(".width-items .width-block").eq(-1).remove(); 
    });
     /*Законченно Функция движения взад и вперед*/
        
     $("a.gallery-link").click(function(){
        htmlStr = $(this).children('img').attr("src");
        //alert (htmlStr);
        $('#somediv').html('<img src=\''+htmlStr+'\'>');
        
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css({
            'top':   winH/2 - $(id).height()/2,
            'left':  winW/2 - $(id).width()/2
        });
         
      });
      
     
 /*Скобка начальной функции реад*/
   });

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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="script111.js"></script>
<link rel="stylesheet" href="popup.css" media="screen">
 
 
<div class="gallery"> 
    
        <div class="btnleft"></div> 
        <div class="btnright"></div> 
        <div class="ptop"></div>
        
        <div class="gallery-wrapper"> 
            
            <div class="width-items"> 
            
                <div class="width-block"> 
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="1.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="2.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="3.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="4.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="5.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="6.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
            </div>
        </div>
        
        
    </div>
 
<!-- Само окно -->
<div id="boxes">  
 
<div id="dialog" class="window"> 
<div id="somediv" ></div>
<div class="top"><a href="#" class="link close"/>Закрыть</a></div>
<div id="cnt"></div>
</div>
 
</div>
 
<div id="mask"></div>

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
  body {
    font-family:verdana;
    font-size:15px;
    }  
    .link {color:#fff; text-decoration:none}
    .link:hover {color:#fff; text-decoration:underline}  
 
#somediv{
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.top {
    position:absolute;
    left:0;
    top:0;
    width:auto;
    height:auto;
    background: #0085cc;
    padding: 8px 20px 6px 10px;
    float:right;
    }
.close {
    
    }
.content {
    padding-top: 35px;
}
 
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }
    
    
#boxes .window {
    position:absolute;
    left:0;
    top:0px;
    -top: 40px;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding: 20px;
    overflow: hidden;
    }  
#boxes #dialog {
    width:auto; 
    height:auto;
    padding-top:30px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    background-color:#ffffff;
    }  
 
/*Классы для полосы прокрутки*/
.gallery  {
    width: 948px; 
    margin:50px auto;
    height:250px;
}
.gallery-wrapper {
width: 888px; 
padding-top:10px;
height:175px;
position: relative;
overflow: hidden; 
margin: 0 auto;
background:#F77719; 
}
 
.width-items {
width: 10000px; 
position: relative; 
height:250px;
}
.width-block {
float: left; 
width: 210px; 
height:210px;
padding: 5px 6px; 
}
.gallery-link { 
display: block;
width: 206px;
height: 150px;
overflow: hidden;
border: 2px solid #fff;
}
.btnleft, .btnright {
width: 90px; 
height: 219px; 
position: relative;
cursor: pointer;
 
}
.btnleft {
float: left; 
background: url(left.png); 
margin-left:-30px;/*30px*/
margin-top:-18px;
background-repeat:no-repeat;
}
.btnright {
float: right; 
background: url(right.png);
margin-right:-90px;
margin-top:-18px;
background-repeat:no-repeat;
 
}
.ptop{
background: url(top.png);
 
background-repeat:repeat-x;
}
/*Конец прокрутки*/

@Заглянувший · 07.02.2014, 11:52

Вы навешиваете обработчики при событии ready. Затем, при прокрутке слайдера, ваш скрипт добавляет и удаляет элементы. Добавленные элементы остаются без обработчика. Попробуйте навешивать обработчики не методом click, а методом on. (Добавлен в jQuery 1.7)

JavaScript
1
2
3
$('.gallery').on("click", "a.gallery-link", function(e) {
....
}

@gmelihov · 07.02.2014, 12:13 **[ТС]**

Сообщение от Заглянувший

Вы навешиваете обработчики при событии ready. Затем, при прокрутке слайдера, ваш скрипт добавляет и удаляет элементы. Добавленные элементы остаются без обработчика. Попробуйте навешивать обработчики не методом click, а методом on. (Добавлен в jQuery 1.7)

JavaScript
1
2
3
$('.gallery').on("click", "a.gallery-link", function(e) {
....
}

Вот так вообще не работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
 $("gallery").on("click", "a.gallery-link", function(e) {
    
   
        htmlStr = $(this).children('img').attr("src");
        //alert (htmlStr);
        $('#somediv').html('<img src=\''+htmlStr+'\'>');
         var winH = $(window).height();
        var winW = $(window).width();
        $(id).css({
            'top':   winH/2 - $(id).height()/2,
            'left':  winW/2 - $(id).width()/2
        });
         });

@Заглянувший · 07.02.2014, 12:15

А версию jQuery поменяли?

@gmelihov · 07.02.2014, 12:23 **[ТС]**

Сообщение от Заглянувший

А версию jQuery поменяли?

Да, поменял.

@Заглянувший · 07.02.2014, 12:25

У вас еще есть обработчик

JavaScript
1
2
3
$('a[name=modal]').click(function(e) {
....
}

С ним то же самое

@gmelihov · 07.02.2014, 12:27 **[ТС]**

Не работает.

Добавлено через 56 секунд

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('a[name=modal]').click(function(e) {
    
        htmlStr = $(this).children('img').attr("src");
        alert (htmlStr);
        //$('#somediv').html('<img src=\''+htmlStr+'\'>');
        
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css({
            'top':   winH/2 - $(id).height()/2,
            'left':  winW/2 - $(id).width()/2
        });
         
      });

Вот так не работает.

@Заглянувший · 07.02.2014, 12:45

Должно быть не

JavaScript
1
2
3
$('a[name=modal]').click(function(e) {
....
}

JavaScript
1
2
3
$("a.gallery-link").click(function(){
...
}

а вот так:

JavaScript
1
2
3
$("gallery").on("click", "a.gallery-link", function(e) {
...
}

Добавлено через 14 минут
У меня работает. Насколько я могу судить без картинок.

Кликните здесь для просмотра всего текста

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
$(document).ready(function() {  
    var id; 
    $('.gallery').on("click", "a.gallery-link", function(e) {
        e.preventDefault();
        
        id = $(this).attr('href');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        $('#mask').fadeIn(1000);  
        $('#mask').fadeTo("slow",0.8);
     
          $(id).fadeIn(2000);
    });
    
    $('.window .close').click(function (e) { 
    e.preventDefault();
    $('#mask, .window').hide();
    }); 
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    });
    
    
     /*Функция движения взад и вперед*/
      $(".btnright").click(function(){ 
        $(".width-items").animate({left: "-222px"}, 200); 
        setTimeout(function () { 
            $(".width-items .width-block").eq(0).clone().appendTo(".width-items"); 
            $(".width-items .width-block").eq(0).remove(); 
            $(".width-items").css({"left":"0px"}); 
        }, 300);
    });
    
    $(".btnleft").click(function(){ 
        $(".width-items .width-block").eq(-1).clone().prependTo(".width-items"); 
        $(".width-items").css({"left":"-222px"}); 
        $(".width-items").animate({left: "0px"}, 200); 
        $(".width-items .width-block").eq(-1).remove(); 
    });
     /*Законченно Функция движения взад и вперед*/
        
    /*$("a.gallery-link").click(function(){
        htmlStr = $(this).children('img').attr("src");
        alert('fghfghfg'); 
        console.log('htmlStr=',htmlStr);
        $('#somediv').html('<img src=\''+htmlStr+'\'>');
        
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css({
            'top':   winH/2 - $(id).height()/2,
            'left':  winW/2 - $(id).width()/2
        });
         
      });*/
     
    $('.gallery').on("click", "a.gallery-link", function() {        
        htmlStr = $(this).children('img').attr("src");
        //alert('dfggdfgf'); 
        //console.log('htmlStr=',htmlStr);
        $('#somediv').html('<img src=\''+htmlStr+'\'>');
        
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css({
            'top':   winH/2 - $(id).height()/2,
            'left':  winW/2 - $(id).width()/2
        });
    });
      
     
 /*Скобка начальной функции реад*/
   });

Кликните здесь для просмотра всего текста

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
    <script type="text/javascript" src="script111.js"></script>
    <link rel="stylesheet" href="popup.css" media="screen">
</head>
<body> 
    <div class="gallery">       
        <div class="btnleft"></div> 
        <div class="btnright"></div> 
        <div class="ptop"></div>
        
        <div class="gallery-wrapper"> 
            
            <div class="width-items"> 
            
                <div class="width-block"> 
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="1.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="2.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="3.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="4.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="5.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
                <div class="width-block">
                    <a href="#dialog" class="gallery-link" name="modal">
                        <img src="6.jpg" alt="" width="210" height="210"/>
                    </a>
                </div>
                
            </div>
        </div>      
    </div>
     
    <!-- Само окно -->
    <div id="boxes">     
        <div id="dialog" class="window"> 
            <div id="somediv" ></div>
            <div class="top"><a href="#" class="link close"/>Закрыть</a></div>
            <div id="cnt"></div>
        </div>   
    </div>
     
    <div id="mask"></div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Заглянувший 85 / 43 / 27 Регистрация: 07.07.2013 Сообщений: 119
	07.02.2014, 12:15
	А версию jQuery поменяли? 0