Javascript/jQuery

チェックボックスがchecked（true）の時、または
チェックされていない（false）時に
●●したい、というやつです。

これは結構よく使う。

$(function() {
  $('[name="inputname"]:checkbox').change( function() {
    if ($(this).is(':checked')) {
      $(this).prop('checked', true).attr('checked', 'checked');
      $('body').addClass('backdrop-open');
    } else {
      $(this).prop('checked', false).removeAttr('checked');
      $('body').removeClass('backdrop-open');
    }
  });
});

個人的にですけど、画像の拡大表示によく使う「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>