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

Как сделать чтобы в галерее текст, в другом блоке, менялся вместе с картинкой?

05.05.2017, 21:54. Показов 1018. Ответов 4
Метки нет (Все метки)

Сделал галерею с помощью JS. Картинки листаются хорошо. В смежном блоке - "modalright" должны быть пояснения к картинкам - не могу сообразить как это сделать. Подскажите пожалуйста! Вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="modal7" class="modal_div7">
     <div class="modalleft">
        
         <div class="previous" id="leftArrow">
             <div style="margin-top:60%;margin-left:8%;"></div>
         </div>
         <div id="gallery">
             <img id="image" src="image/jpg/1.jpg"  alt="картинка"></br>
         </div>
         <div class="next" id="rightArrow">
             <div style="margin-top:40%;margin-left:92%;"></div>
         </div>
     </div>
     <div class="modalright">
         <span  class="modal_close">вњ•</span></br></br>
     </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
;(function gallery(){
          var initImgNumber = 1,
          maxImgNumber = 28;
          
          
          leftArrow.addEventListener('click', moveBackward);
          rightArrow.addEventListener('click',moveForward);
          
        function moveBackward(){
             initImgNumber --;
             if(initImgNumber == 0){initImgNumber = maxImgNumber};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
        };  
        
        function moveForward(){
             initImgNumber ++;
             if(initImgNumber > maxImgNumber){initImgNumber = 1};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
        };
        
})();
Добавлено через 4 часа 25 минут
Не проходите мимо, третий день голову ломаю... весь инет перерыл... помогите ребята
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.05.2017, 21:54
Ответы с готовыми решениями:

Как сделать чтобы текст в textbox менялся при изменения выбора в combobox?
Приветствую. Есть форма на ней несколько combobox и 1 textbox. Нужно чтобы при изменение в...

Наследование и события: чтобы при нажатии кнопки одного класса менялся текст в другом
Здравствуйте! Есть 2 класса, унаследованных от GroupBox: 1) На первом присутствует Button: class...

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

Как сделать, чтобы вместе с формой отправки ajax. В письме было видно параметры товара в блоке «ваш выбор», который зака
Здравствуйте, как сделать, чтобы видно было что он выбрал на сайте в письме который заказал...

4
Эксперт HTML/CSS
652 / 555 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
05.05.2017, 22:13 2
Цитата Сообщение от HanterVR Посмотреть сообщение
В смежном блоке - "modalright" должны быть пояснения к картинкам
Создайте массив строк, пусть ваш initImgNumber будет индексом массива, тогда меняя значение initImgNumber вы можете получать соответствующую строку text[initImgNumber ] и подставлять эту строку в ваш modalright
как-то так
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
;(function gallery(){
          var initImgNumber = 1,
          maxImgNumber = 28;
          var text = (function(){
            var res = [];
            for(var i = 1; i <= 27; i++){
                res[i] = 'text ' + i; 
            }
            return res;
          })();
          var container = document.querySelector('.modal_close');
          
          leftArrow.addEventListener('click', moveBackward);
          rightArrow.addEventListener('click',moveForward);
          
        function moveBackward(){
             initImgNumber --;
             if(initImgNumber == 0){initImgNumber = maxImgNumber};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };  
        
        function moveForward(){
             initImgNumber ++;
             if(initImgNumber > maxImgNumber){initImgNumber = 1};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };
        
})();
0
0 / 0 / 1
Регистрация: 04.05.2017
Сообщений: 7
06.05.2017, 03:51  [ТС] 3
Что-то не работает.... всяко пробовал... что-то где-то не так..
И так..
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
<div id="modal7" class="modal_div7">
     <div class="modalleft">
        
         <div class="previous" id="leftArrow">
             <div style="margin-top:60%;margin-left:8%;"></div>
         </div>
         <div id="gallery">
             <img id="image" src="image/jpg/1.jpg"  alt="пвх мембрана"></br>
         </div>
         <div class="next" id="rightArrow">
             <div style="margin-top:40%;margin-left:92%;"></div>
         </div>
     </div>
     <div class="modalright">
         <span  class="modal_close"></span></br></br>
         <div id="container">
         <script>
;(function gallery(){
          var initImgNumber = 1,
          maxImgNumber = 30;
          var text = (function(){
            var res = [];
            for(var i = 1; i <= 29; i++){
                res[i] = 'text ' + i; 
            }
            return res;
          })();
          var container = document.querySelector('.modal_close');
         
          var text = ['арбуз','дыня','персик'];
          document.write(text[initImgNumber]);
          
          
          leftArrow.addEventListener('click', moveBackward);
          rightArrow.addEventListener('click',moveForward);
          
        function moveBackward(){
             initImgNumber --;
             if(initImgNumber == 0){initImgNumber = maxImgNumber};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };  
        
        function moveForward(){
             initImgNumber ++;
             if(initImgNumber > maxImgNumber){initImgNumber = 1};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };
        
})();
 
         </script></div>
И отдельно...

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
;(function gallery(){
          var initImgNumber = 1,
          maxImgNumber = 30;
          var text = (function(){
            var res = [];
            for(var i = 1; i <= 29; i++){
                res[i] = 'text ' + i; 
            }
            return res;
          })();
          var container = document.querySelector('.modal_close');
         
          var text = ['арбуз','дыня','персик'];
          document.write(text[initImgNumber]);
          
          
          leftArrow.addEventListener('click', moveBackward);
          rightArrow.addEventListener('click',moveForward);
          
        function moveBackward(){
             initImgNumber --;
             if(initImgNumber == 0){initImgNumber = maxImgNumber};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };  
        
        function moveForward(){
             initImgNumber ++;
             if(initImgNumber > maxImgNumber){initImgNumber = 1};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };
        
})();
Добавлено через 13 минут
Может с массивом и получением подскажите? Не пойму в чем дело...
0
Эксперт HTML/CSS
652 / 555 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
06.05.2017, 12:16 4
Лучший ответ Сообщение было отмечено HanterVR как решение

Решение

Цитата Сообщение от HanterVR Посмотреть сообщение
Не пойму в чем дело...
Не используйте document.write. Ну и кол-во элементов массива должно быть таким же как и кол-во картинок
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
;(function gallery(){
          var initImgNumber = 1,
          maxImgNumber = 30;
          
          var container = document.querySelector('.modal_close');
         
          var text = ['арбуз','дыня','персик'];
          container.textContent = text[initImgNumber];
          
          
          leftArrow.addEventListener('click', moveBackward);
          rightArrow.addEventListener('click',moveForward);
          
        function moveBackward(){
             initImgNumber --;
             if(initImgNumber == 0){initImgNumber = maxImgNumber};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };  
        
        function moveForward(){
             initImgNumber ++;
             if(initImgNumber > maxImgNumber){initImgNumber = 1};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };
        
})();
https://jsfiddle.net/shakalaka/89c25bu6/
1
0 / 0 / 1
Регистрация: 04.05.2017
Сообщений: 7
06.05.2017, 16:50  [ТС] 5
Все хорошо - работает! Только немного последний код все же пришлось поправить - в HTML создать класс ".container", вошедший в ".modalright" и соответственно изменить "var container = document.querySelector('.container');". Спасибо большое, очень помогли!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.05.2017, 16:50

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Меню codrops (стильное меню), Как сделать чтобы текст не смещался в блоке?
вот менюшка (live-code): http://jsfiddle.net/Stasonix/gPbxC/ на всякий случай вот листинг: ...

Как сделать чтобы цвет текста плавно менялся
Как сделать чтобы цвет текста плавно переливался? void RenderDVD(void) { int left, top; ...

как сделать, чтобы при изменении TimeEdit1 менялся TimeEdit2?
Всем привет, подскажите пожалуйста как сделать, чтобы при изменении TimeEdit1 менялся TimeEdit2, но...

Как сделать, чтобы при выборе числа массив менялся?
Как сделать , что бы при выборе числа массив менялся . Например:при выборе числа 3 в массиве...


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

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

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