Javascript/jQuery

個人的にですけど、画像の拡大表示によく使う「lightbox」。
個人的にとは言いましたが、お仕事上でも「画像の拡大表示」にはよく使います。

もともと画像を配置していたけど、拡大表示にはしていなかった箇所。
やっぱり拡大表示させたいな！ということで
なるべくhtml弄らずに改修（jQueryでタグ入れちゃおう！）することにした😊

jQueryにて a タグ追加、hrefにsrcの値を挿入＆lightboxの属性追加。

<script>
$(function(){
    $(".my-image img").each(function(){
      var src = $(this).prop('src');
      $(this).wrap($('<a>').prop('href', src).attr('data-lightbox', 'dataImage'));
    });
});
</script>

画像にhoverしたらimgタグのsrcを入れ替えて、他の画像を表示する
というのはよく見かけますが、

imgタグにhoverできるとは限らない（画像の上に他要素が重なっているなどの）場合も多いので
サムネイル画像の親要素にマウスが乗った時に、
その子要素にある画像を、他の場所にある画像と入れ替え表示させる。
マウスが外れたら、元の画像に戻す。というもの。


●サムネイルの画像（の親要素）にマウスカーソルが乗った時～
●サムネイル画像の親要素からマウスカーソルが外れた時～

jQyery

$(function(){
  $('#imageList .list-group-item').mouseenter(function() {
		var imgList = $(this).find('img');
		var srcImg = imgList.attr('src');
		$('#mainImage img').fadeOut(50, function() {
			$('#mainImage img').attr('src', srcImg).on('load', function() {
				$(this).fadeIn();
			});
		});
  });
	var imagePath = $('#image_default').attr('src');
	$('#imageList').mouseleave(function() {
		$('#mainImage img').attr('src', imagePath);
	});
});

HTML

<div id="mainImage">
	<img src="/assets/img/image.png" alt="最初の画像" id="image_default">
</div>
<div id="listImage">
	<ul class="list-group">
		<li class="list-group-item">
			<a href="#"><img src="01.jpg" alt=""></a>
		</li>
		<li class="list-group-item">
			<a href="#"><img src="02.jpg" alt=""></a>
		</li>
		<li class="list-group-item">
			<a href="#"><img src="03.jpg" alt=""></a>
		</li>
		<li class="list-group-item">
			<a href="#"><img src="04.jpg" alt=""></a>
		</li>
	</ul>
</div>

“min-width: 768px”時には〇〇〇という感じ。

HTML

<div class="card card-body">
  <h3 class="card-title">タイトルタイトルタイトルタイトル</h3>
  <p class="lines">文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります。文章が入ります文章が入ります文章が入ります文章が入ります。</p>
</div>

Javascript/jQuery

// min-width: 768px クラスを付与・差し替える

$(window).on('load', function() {
  $('.card-body').find('.lines').each(function ( index, value ) {
    if (window.matchMedia('(min-width: 768px)').matches) {
      $(this).attr('class', 'card-text lines-1');
    } else {
      $(this).attr('class', 'card-text lines-2');
    }
  });
});

min-width: 768px は、タブレットやパソコンの時。
でなければ、スマホの時、と考えられますので
スマホとそれ以外の時で変化するものがある場合に使えます。

find ～ each は、上記の例でいうと
.card-bodyの下（子）にある.linesを探します。（ひとつだけではなくループ。繰り返し処理。）
もし”min-width: 768px” だったら、”card-text lines-1″クラスを付与。
でなければ、”card-text lines-2″クラスを付与、となります。