用<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在最大大小为576 to的情况下改变而不是main_image，为此我使用<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>是如何工作的。浏览器根据<source>中的规则选择media来显示自己。同样的<img>只适用于浏览器，它不支持<picture>。因此，只有在删除所有.attr('src'时，设置<source>才有效。

在许多地方，您也使用.children('img')。

因此，如果你想做这样的替换，你必须删除响应图像选择。

我相信对你来说最快的解决方案是使用替代语法。(您仍然需要以编程方式删除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'));
});

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