У меня есть сайт с множеством различных категорий галереи, которые отображают миниатюры меньшего размера, пока ширина экрана не станет ниже 1200 пикселей, после чего я хотел бы вместо этого отображать полный размер.

Изображения отображаются так:

<section class="gallery category1">
    <img id="cat1img1" src="cat1/small/img-1.jpg" alt="blah">
    <img id="cat1img2" src="cat1/small/img-2.jpg" alt="blah">
    etc...
</section>
<section class="gallery category2">
    <img id="cat2img1" src="cat2/small/img-1.jpg" alt="blah">
    <img id="cat2img2" src="cat2/small/img-2.jpg" alt="blah">
    etc...
</section>

И все, что я хочу сделать, это использовать медиа-запрос JS с некоторым jQuery, чтобы удалить "small /" из каждого тега, не перечисляя каждый отдельный img, чтобы их можно было свободно добавлять и удалять без повторного изменения кода.

Это то, что я пробовал, но он не меняет URL-адрес img, хотя он запускает мою проверку изменения размера:

function galleryBreak(x) {
    if (x.matches) {
        $('.gallery').children('img').attr('src').replace('/small','')
        console.log('size change check');
    };
};
var x=window.matchMedia('(max-width: 1200px)')
galleryBreak(x)
x.addListener(galleryBreak)
0
Lacomus 12 Июн 2021 в 20:13

2 ответа

Лучший ответ

У вас есть несколько (2) галерей и несколько изображений. Вам нужно перебрать все изображения для всех галерей. Что-то вроде этого

function changeImagePaths(theGallery) {
  var images = theGallery.querySelectorAll('img');
  images.forEach( image => {
      console.log('Path before: ', image.src)
      image.src = image.src.replace('/small','')
      console.log('Path AFTER: ', image.src)
  });
};

var x=window.matchMedia('(max-width: 1200px)')
var myGalleries = document.querySelectorAll('.gallery')
myGalleries.forEach( gallery => {
    if(x.matches) {
      changeImagePaths(gallery)
    }
});
<section class="gallery category1">
    <img id="img1" src="cat1/small/img-1.jpg" alt="blah">
    <img id="img2" src="cat1/small/img-2.jpg" alt="blah">
</section>
<section class="gallery category2">
    <img id="img1" src="cat2/small/img-1.jpg" alt="blah">
    <img id="img2" src="cat2/small/img-2.jpg" alt="blah">
</section>

JsFiddle, чтобы поиграть здесь

Теперь все сказано, если вы можете изменить HTML, используйте Адаптивные изображения, которые покажут вам все, что вам нужно, можно установить прямо в теге изображения, например:

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy">
1
caramba 12 Июн 2021 в 17:29

Добавьте прослушиватель событий resize в окно, чтобы при каждом изменении размера окна / браузера это событие запускалось

const galleryBreak = () => {
  if (window.matchMedia('(max-width: 1200px)').matches) {
    const images = document.querySelectorAll('.gallery img');
    Array.from(images).forEach(img => {
      const imgSrc = img.src.replace('/small', '');
      img.src = imgSrc;
      console.log(imgSrc);
    });
  }
};

window.addEventListener('resize', galleryBreak);
1
nmanikiran 12 Июн 2021 в 17:41