时间戳

首页 > 解决方案 > 缩略图 url 已更改，但在调整 ajax 大小之前不会反映

php - 缩略图 url 已更改，但在调整 ajax 大小之前不会反映

问题描述

您好，我有一个带有一些图片的图像滑块。在 ajax 的帮助下，我正在更改图像 url，图像工作正常。而在缩略图的情况下，我可以看到控制台中反映的更改，但在我调整页面大小之前它不会反映在网页上。

            console.log(url);
            $('.img1').attr("src",url+"/RUST_1.jpg");
            $('.img2').attr("src",url+"/RUST_2.jpg");
            $('.img1thumb').attr("data-thumb",url+"/RUST_1.jpg");
            $('.img2thumb').attr("data-thumb",url+"/RUST_2.jpg");

         <ul id="image-gallery"  class="gallery list-unstyled cS-hidden">              
         <li class="img1thumb" data-thumb="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE;?>/RUST_1.jpg" >
         <img class="img1" class="card-img-top" class="img" src="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_1.jpg"  alt="Card image" style="width:100%" />
         </li>
         <li class="img2thumb" data-thumb="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_2.jpg" >
         <img class="img2" class="card-img-top" class="img" src="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_2.jpg"  alt="Card image" style="width:100%" />
         </li>
         </ul>

我在lightslider.js 中找到了这个

var thumb = $children.eq(i * settings.slideMove).attr('data-thumb');
                    if (settings.gallery === true) {
                        pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' + settings.thumbMargin + 'px"><a href="#"><img src="' + thumb + '" /></a></li>';
                    } else {
                        pagers += '<li><a href="#">' + (i + 1) + '</a></li>';
                    }
                    if (settings.mode === 'slide') {
                        if ((v) >= w - elSize - settings.slideMargin) {
                            i = i + 1;
                            var minPgr = 2;
                            if (settings.autoWidth) {
                                pagers += '<li><a href="#">' + (i + 1) + '</a></li>';
                                minPgr = 1;
                            }
                            if (i < minPgr) {
                                pagers = null;
                                $slide.parent().addClass('noPager');
                            } else {
                                $slide.parent().removeClass('noPager');
                            }
                            break;
                        }
                    }
                }

标签： phpajax

解决方案

很抱歉浪费您的时间，但 lightslider 提供了一个公共功能来刷新滑块

第一步：获取一个灯光滑块的对象

slider = $(document).find('#image-gallery').lightSlider({});

第 2 步：更改图像 url 后调用刷新函数

slider.refresh();

来源：https ://github.com/sachinchoolur/lightslider/blob/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/README.md

推荐阅读