Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.01.2025, 22:12
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 58

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, 19.01.2025 в 23:16.
Ответить с цитированием
  #2 (permalink)  
Старый 19.01.2025, 22:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,131

tp-20,
что мешает запустить инициализацию слайдера после строки 4?
Ответить с цитированием
  #3 (permalink)  
Старый 19.01.2025, 22:54
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 58

рони, спасибо, идеально)) просто переставить скрипты местами)
Ответить с цитированием
  #4 (permalink)  
Старый Вчера, 14:24
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 58

В продолжение темы..

В чём может быть причина?
Не срабатывает код 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>');
    }

В итоге выглядит это так: (скриншот)
Изображения:
Тип файла: jpg photo_2025-01-22_14-31-32.jpg (117.0 Кб, 1 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый Вчера, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,131

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>

Последний раз редактировалось рони, Вчера в 17:05.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
как определить предел желаемого (сколько может выдержать браузер)) al456 Элементы интерфейса 4 03.02.2013 23:20
как с помощью RegExp определить страницу? Splunchik Events/DOM/Window 3 20.09.2011 13:30
Как определить количество элементов в многомерном массиве Dima00782 Общие вопросы Javascript 3 12.06.2010 14:15