Жесткое кодирование классов в массив

Question

Я хотел бы показать галерею изображений. Показанное изображение будет либо портретом, либо пейзажем, в зависимости от ориентации экрана. Картины - пейзажные и портретные изображения, идентичные, за исключением их размера.

Я искал SO, и до сих пор я нашел этот драгоценный камень.

@media only screen and (orientation: portrait){
.land{display: none;}
.port{display: inline-block;}
}
@media only screen and (orientation: landscape){
.land{display: inline-block;}
.port{display: none;}
}

Я хотел бы добавить к Мой массив изображений класса .land или .port, в зависимости от их размеров, так что отображаются соответствующие изображения в зависимости от ориентации экрана.

Как мне это сделать ?

Если я могу предоставить какую-либо дополнительную информацию, дайте мне знать.

Спасибо

Редактировать: Я хотел бы поблагодарить всех за примеры пока показано. То, что я не упомянул ранее (и я думаю, что должен был это сделать), - это то, что в моей галерее есть кнопка «следующий» и «предыдущий». Изображения постоянно меняются, и, насколько я понимаю, изменение класса показанного изображения не изменит показанного изображения, оно просто изменит класс, который не помогает в этом случае.

Или я что-то упустил жизненно важно здесь?

Не имеет ли больше смысла иметь два массива и при изменении ориентации просто изменить массив, из которого делается снимок?

Или, может быть, иметь объект, что-то вроде этого

let pictures = [
{
port: './imgs/port-pic1.jpg',
land: './imgs/land-pic1.jpg'
},{
port: './imgs/port-pic2.jpg',
land: './imgs/land-pic2.jpg'
}
]

Answer 1

Вы можете определить ширину и высоту экрана, и на основе этого вы можете перебрать все изображения и присвоить им соответствующий класс.

let width = window.innerWidth;
let height = window.innerHeight;
let screenClass = "portrait"; // by default


if (width>height) {
    screenClass = "landscape";
}

let images = document.querySelectorAll("img");

for(let i=0; i<images.length; i++) {
  let imageClass = "port"; // by default
  let img = images[i];
  if (img.width>img.height) {
      imageClass = "land";
  }
  // combine the class for the screen orientation, plus the image 
  // orientation, for more customization

  img.className = screenClass + " " + imageClass;

}

Редактировать

На основе редактирования вопрос, насколько я понял, у пользователя есть существующий массив изображений, хранящихся в массиве объектов. Каждый объект имеет два свойства, port и land. Может быть, это одно и то же изображение, но в разных режимах, или, может быть, это два разных изображения в двух разных режимах. В любом случае ожидается, что массив будет проходить итерацией, а изображения, хранящиеся в свойствах, должны быть проанализированы в зависимости от ориентации устройства. Если дело обстоит именно так, то вот как этого добиться:

let pictures = [ {
                  port: './imgs/port-pic1.jpg',
                  land: './imgs/land-pic1.jpg'
                 },{
                   port: './imgs/port-pic2.jpg',
                   land: './imgs/land-pic2.jpg'
                }];

let width = window.innerWidth;
let height = window.innerHeight;
let screenClass = "port"; // by default


if (width>height) {
    screenClass = "land";
}

pictures.forEach( pic => {
   let url = pic[screenClass];  // this will either be value of land 
                                //  or  value of port
    // do whatever with the url

    let img = document.createElement("img");
    img.src = url;
    img.className = "whatever";

    document.querySelector("body").appendChild(img);

});

Answer 2

Вы можете сделать это следующим образом:

window.onorientationchange = function() { 
    if(window.innerHeight > window.innerWidth){
        //$("img.land").removeClass("land").addClass("port");
        var element = document.querySelectorAll("img.land");
        element.classList.remove("land");
        element.classList.add("port");
    }else{
        //$("img.port").removeClass("port").addClass("land");
        var element = document.querySelectorAll("img.port");
        element.classList.remove("port");
        element.classList.add("land");
    }
  console.log("the orientation of the device is now " + screen.orientation.angle);
};

jQuery Мобильное устройство имеет событие, которое обрабатывает изменение этого свойства ... если вы хотите предупредить, если кто-то поворачивается позже - Ориентация

Также ознакомьтесь с window.orientation

Answer 3

Этого можно добиться с помощью переключателя classList элемента:

function doOnOrientationChange() {
  const isLandscape = window.orientation == -90 || window.orientation == 90;
  document.querySelectorAll('img.land').forEach(e => e.classList.toggle('land', isLandscape));
  document.querySelectorAll('img.port').forEach(e => e.classList.toggle('port', !isLandscape));
}

window.addEventListener('orientationchange', doOnOrientationChange);

Ориентация с Как правильно определить изменение ориентации с помощью Phonegap на iOS? Переключить с Как переключать класс с использованием чистого javascript в html