Хочу расписать весь принцип работы просмотра изображений, который я на половину смог сделать.
Есть у меня 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"/>
Номер надо запоминать вне клика. А дальше идет обычный слайдер...
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 в этом не играет ключевой роли, то их вообще можно было убрать и оперировать индексами классов...
Код использую пользователя 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 -
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Использую один и тот же слайдер просто разный текст и картинки(картинки все одного размера)Но в одном примере, как видно, работает и переключает,...
Никогда не приходилось работать с MVC, а задание горит
Занимаюсь разработкой виртуальной машины на C# используяNET Core 1