Как найти путь src картинки по числу в data

120
10 февраля 2021, 18:50

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

Есть у меня 6 изображений!

<img src="myImages_1.jpeg" class="old-block" data-item="1"/>
<img src="myImages_2.jpeg" class="old-block" data-item="2"/>
<img src="myImages_3.jpeg" class="old-block" data-item="3"/>
<img src="myImages_4.jpeg" class="old-block" data-item="4"/>
<img src="myImages_5.jpeg" class="old-block" data-item="5"/>
<img src="myImages_6.jpeg" class="old-block" data-item="6"/>

Еще есть <div> в котором есть img - это нужно для preview просмотра изображения

<div>
 <img src="" data-item="" class="elemberg"/>
</div>

Дальше дублируется изображение при клике на класс old-block

$(".old-block").click(function () { //клик по классу old-block
        var src1 = $(this).attr('src'); //в переменную src1 получаю путь картинки
        $('.elemberg').attr('src', src1); //вставляю путь картинки в src c переменной src1 
        var src2 = $(this).attr('data-item');//копирую число с data-item
        $('.elemberg').attr('data-item', src2);//вставляю число в data-item 
});

У меня есть <div> в котором есть img - это нужно для полного просмотра изображения

В этом блоке я листаю изображения это то что я не смог реализовать

<div>
 <img src="" data-item="" class="elemberg zoom"/>
</div>
<div id="blockMainText_blockControlPanelBig_leftMain">Left</div>
<div id="blockMainText_blockControlPanelBig_rightMain">Right</div>

Дальше пытаюсь сделать чтобы можно было пролистать изображение в право

$('#blockMainText_blockControlPanelBig_leftMain').click(function(){
var data_item = $('.zoom').attr('data-item');//получаю число с data-item
 data_item++; // должно увеличивать моё полученное число на 1(-ну) еденицу
// тут продолжение кода
});

Дальше я застрял на пролистывании изображении.

В задумке у меня было получить число с data-item и по этому число найти путь изображения с атрибута src

Например:

Есть у меня

<img src="" data-item="" class="elemberg zoom"/>

при клике на кнопку и зная число data-item например 3, я получаю следующее

<img src="myImages_3.jpeg" class="elemberg zoom" data-item="3"/>
Answer 1

Номер надо запоминать вне клика. А дальше идет обычный слайдер...

var data_item;
$('#blockMainText_blockControlPanelBig_rightMain').click(function(){     
 var blocks = $('.old-block').length; 
 data_item = ( $('.zoom').attr('data-item') == blocks ) ? 1 : (data_item + 1); // (*1)
 var src = $('.old-block').eq( data_item ).attr('src'); // src картинки по номеру, .eq(...)
 $('.zoom').attr('src', src);
});

По строчке (*1)... это Тернарный Оператор то же самое, что

if( $('.zoom').attr('data-item') == blocks ) {
  data_item = 1; 
} else {
  data_item = (data_item + 1);
}

Если номер равен количеству картинок - то ему уже некуда расти, превращается в 1. А если нет - увеличивается на 1. По слайду налево будет та же история, только если номер равен 1 - станет = кол-ву картинок... если нет, уменьшится на 1.

Но вообще говоря, если картинки у вас не будут хитро переставляться и data-item в этом не играет ключевой роли, то их вообще можно было убрать и оперировать индексами классов...

Answer 2

Код использую пользователя OPTIMUS PRIME.

var countImages = $('.old-block').length; // узнаем количество элементов + глобальная переменная
var data_items = 0; // счётчик  + глобальная переменная
function rightButtonViewImages(){ // функция, так как обращаюсь к данной функции через кнопки клавиатуры, чтобы не дублировать код сделал функцию
    if( $('.zoom').attr('data-item') == countImages ) { // проверяем,если data-item равен количеству элементов countImages то
        data_items = 0; // наше число обнуляем
        $('.elemberg').attr('data-item', data_items); // устанавливаем число в data_item с переменной data_items 
    } else { // или
        data_items++; //увеличиваем переменную на 1 единицу
        $('.elemberg').attr('data-item', data_items);// устанавливаем число в data_item с переменной data_items 
    }
    var src = $('.old-block').eq(data_items).attr('src'); // тут присваиваем путь переменной src. Ищем data-item у которого есть значение и ищет его у элементов у которых есть класс .old-block и data-item равно нашему значению и берет наш путь картинки
    $('.elemberg').attr('src', src);//устанавливаем путь картинки
    $('.elemberg').attr('data-item', data_items);// устанавливаем число в data_item с переменной data_items 
}

Дальше я добавил возможность листать изображение при клике на кнопку в право!

$('html').keydown(function(eventObject){
    if (event.keyCode == 39) { // 39 это номер клавиши в право
        if ($("#mainBlockForViewImages").hasClass("selected")) { // проверяю есть ли класс у моего элемента
            rightButtonViewImages(); // вызываю функцию, что бы изображение пролистывалось!
        }
    }
});

На этом сайте указанны все номера клавиш.

27 - кнопка Esc

37 - кнопка влево (стрелки) <

39 - кнопка вправо (стрелки)>

107 - кнопка NumPad +

109 - кнопка NumPad -

READ ALSO
Слайдер работает по разному

Слайдер работает по разному

Использую один и тот же слайдер просто разный текст и картинки(картинки все одного размера)Но в одном примере, как видно, работает и переключает,...

93
Сериализация и десериализация полей ASP .Net MVC

Сериализация и десериализация полей ASP .Net MVC

Никогда не приходилось работать с MVC, а задание горит

116
Как загрузить несколько dll на c# .NET Core

Как загрузить несколько dll на c# .NET Core

Занимаюсь разработкой виртуальной машины на C# используяNET Core 1

97