jUqery: как определить количество картинок
Доброго дня всем.
Есть вертикальный слайдер slick. Он крутит несколько картинок, которые образуют одну большую картинку (рич для товаров, как на вб). В каждом товаре разное кол-во картинок. Из-за этого возникает небольшая проблема - слайдер скроллит несуществующие картинки, хотя я их скриптом убрал.
$(function(){
$('.slick-slide img').on("error", function(){
$(this).hide().closest('.slick-slide').remove();
}); // если фото не существует, убираем целиком контейнер с ним
});
Для каждого товара создаётся своя папка, где может быть от 3 до 8 фото. Сейчас я в скрипте указал максимальное кол-во фото - 8. Дальше в диве циклом выводятся эти фото:
for(var i = 1; i < 8; i++){
document.write('<div><img src="/image/catalog/-rich/<?php echo $model; ?>/<?php echo $model; ?>-' + i + '.jpg" /></div>');
}
Как можно заменить цифру в счётчике i < 8 на что-то универсальное, типа i < n, и чтобы скрипт самостоятельно определял, сколько в папке фото? Скриншот для понимания: красным выделил существующие фото, они подгрузились, всё ок. жёлтым выделил блок с несуществующими фото, которые слайдер slick сам резервирует под них место, т.к. по счётчику i < 8 он и должен их выводить. Т.е. сами фото он не выводит, т.к их просто нет, но пустое пространство для них выделяет. |
tp-20,
что мешает запустить инициализацию слайдера после строки 4? |
рони, спасибо, идеально)) просто переставить скрипты местами) :) :thanks:
|
Вложений: 1
В продолжение темы..
В чём может быть причина? Не срабатывает код on error. Вернее работает как-то через раз, но чаще не работает. На телефоне работает только один раз - после чистки кэша. Со второй перезагрузки страницы опять не работает. По логике должно работать так: если картинка не подгрузилась (неверный путь или нет картинки на сервере), то нужно спрятать родителя - контейнер с отсутствующей картинкой. Скрипт:
$(document).ready(function() {
$(function(){
$('.slick-slide img').on("error", function(){ // картинка не подгрузилась
$(this).closest('.slick-slide').remove(); // значит полностью удаляем родителя
});
});
});
И блок с картинками тоже в скрипте, т.к. там счётчик
for(var i = 1; i < 7; i++){
document.write('<div class="slick-slide"><img src="/image/catalog/-rich/<?php echo $model; ?>/<?php echo $model; ?>-' + i + '.jpg" /></div>');
}
В итоге выглядит это так: (скриншот) |
tp-20,
инфа для медитации ... проверяем наличие картинок, массив "живых" картинок, обёрнутых в div, грузим в нужный блок, запускаем инициализацию слайдера.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
"use strict"
let imgs = [
'https://www.florissimo-shop.ru/upload/resize_cache/iblock/266/256_256_1/4100.jpeg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoTiQSapkMQDacdDcRC9L0OOzVYYT1HuyWTw&usqp=CAU',
'https://ledforms.com/1906-medium_default_2x/10500120.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-KiKgpbTbFqKysnND1YAdMJ0qUSSa7bbUvA&usqp=CAU',
'https://open3dmodel.com/wp-content/uploads/2020/03/Flowers-rose.jpg'
]
let divs = [];
imgs = imgs.map(src => {
let img = new Image();
img.src = src;
return new Promise(resolve => {
img.decode().then(() => {
let div = document.createElement('div');
div.append(img);
divs.push(div);
resolve()
});
img.error = resolve
})
})
Promise.all(imgs).then(function() {
document.querySelector('.slick-slider').prepend(...divs);
//запускаем инициализацию слайдера
});
});
</script>
</head>
<body>
<div class="slick-slider"></div>
</body>
</html>
|
Цитата:
for(var i = 1; i < 11; i++){
document.write('<div class="slick-slide"><img src="/image/catalog/-rich/<?php echo $model; ?>/<?php echo $model; ?>-' + i + '.jpg" /></div>');
}
|
tp-20,
10 раз написать нужные вам ссылки |
| Часовой пояс GMT +3, время: 00:29. |