首页 > 解决方案 > lightgallery插件的动态图像路径

问题描述

我们已经添加了代码,但只显示拇指图像。我们想要自然的图像路径。我附上了图片参考,请通过这个

 <div class="<?php echo $class; ?>"> 
          <?php if ($thumb || $images) { ?>
          <ul class="thumbnails" id="lightgallery" >
            <?php if ($thumb) { ?>

             <li class="col-xs-6 col-sm-4 col-md-3 prdbimgImg img-responsive" data-responsive="<?php echo $thumb; ?>" data-src="<?php echo $thumb; ?>" >
                    <a href="" id="zoom_01">
                        <img  class="img-responsive" src="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>">
                    </a>
                </li>
                 <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
              <li class="image-additional img-responsive" data-responsive="<?php echo $image['thumb']; ?>" data-src="<?php echo $image['thumb']; ?>" >
                    <a href="" data-id="zoom_01">
                        <img class="img-responsive" src="<?php echo $image['thumb']; ?>" data-zoom-image="<?php echo $popup; ?>">
                    </a>
                </li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

        </div> 

在此处输入图像描述

标签: phphtmlwordpress

解决方案


那是因为您将缩略图设置为 data-src:

data-src="<?php echo $image['thumb']; ?>"

根据文档data-src应该包含完整的图像。

如果图像存储在您所说的$images缩略图中$thumb,那么这应该可以解决问题:

<ul id="lightGallery" >
    <?php for ($i = 0; $i < count($images); $i++) { ?>
    <li data-src="<?php echo $images[$i]; ?>" >
        <img src="<?php echo $thumb[$i]; ?>" />
    </li>
    <?php } ?>
</ul>

推荐阅读