用 <picture> 和 js 改变图像

Question

我有一个小滑块，可以将preview 图像切换到main 图像。现在可以正常使用了

blade.php

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
      <div class="custom-carousel__title">
        @if($loop->first)
          <span>{{ $article_block_image->title }}</span>
        @endif
      </div>
      @endforeach @endif
      @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
      <div class="main-image">
      @if($loop->first)
          <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
      @endif
      </div>
      @endforeach @endif
      <div class="img-to-select">
        @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
        <div @if($loop->first) class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
          <img src="{{ $article_block_image->preview_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}" data-main-src="{{ $article_block_image->main_image }}">
        </div>
        @endforeach @endif
      </div>
    </div>
  </div>
</div>

js

$('.img-to-select__item').click(function () {
$('.img-to-select__item').removeClass('selected');
$(this).addClass('selected');
$('.main-image > img').attr('src', $(this).children('img').data('main-src'));
$('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

但我还有一张图片mobile_image，我希望mobile_image 更改而不是main_image，最大尺寸为576px，为此我使用<picture>

我把我的代码改成这样

<div class="main-image">
@if($loop->first)
<picture>
  <source srcset="{{ $article_block_image->mobile_image }}" media="(max-width: 576px)" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
  <source srcset="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
  <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
</picture>
@endif
</div>

但我的滑块停止工作

主图最终变为移动，但滑块本身不切换

在这种情况下，预览图像也会回显，但主图像本身不会改变

我的滑块基本上是这样工作的

https://jsfiddle.net/a9yvdu75/

我只需要将 main-image 类中的内容放入 <picture> 并根据屏幕大小更改图像

Answer 1

这行有问题：

$('.main-image > img').attr('src', $(this).children('img').data('main-src'));

符号> 表示img 必须是.main-image 的直接子代。所以你必须选择$('.main-image img') 或$('.main-image > picture > img') 之一。但这仍然行不通，因为...

第二个问题是您不完全了解<picture> 的工作原理。浏览器根据media 中的规则选择<source> 显示自己。而同样的<img> 仅适用于不支持<picture> 的浏览器。 所以设置.attr('src'只有在你删除所有<source>时才有效。

在很多地方你也使用.children('img')。

因此，如果您想进行此类替换，则必须删除响应式图像选择。

我相信对您来说最快的解决方案是use an alternative syntax。 （您仍然需要以编程方式删除 srcset, sizes）

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

另一种选择是交换整个.main-image 部分。例如：

<div class="main-image">
  <picture>
    <!-- placeholder, insert the correct HTML yourself  -->
  </picture>
</div>

并像使用 JS 一样：

$('.main-image > picture').html(`
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
`)

您必须在缩略图中存储“桌面”和移动资源。

<div @if($loop->first) class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
  <img src="{{ $article_block_image->preview_image }}" 
    ... 
    data-main-src="{{ $article_block_image->main_image }}" 
    data-mobile-src="{{ $article_block_image->mobile_image }}"
  >
</div>

其余的只是繁琐的字符串粘合。

//编辑：可能的解决方案之一。

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  let mainSrc = $(this).children('img').data('main-src')
  let mobileSrc = $(this).children('img').data('mobile-src')
  let title = $(this).children('img').attr('title')
  let alt = $(this).children('img').attr('alt')
  $('.main-image > picture').html(`
    <source srcset="{$mobileSrc}" media="(max-width: 576px)" alt="{$alt}" title="{$title}">
    <source srcset="{$mainSrc}" alt="{$alt}" title="{$title}">
    <img src="{$mainSrc}" alt="{$alt}" title="{$title}">
  `);
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

请记住，在 JS 中，您使用的是已经生成的 HTML（提供的数据），您无法访问 PHP 变量。