jQuery

【jQuery】CSSを使用したスムーズなトランジションとアニメーションライトボックスLightSpeedBox

February 25, 2017
LightSpeedBox

LightSpeedBoxは、レスポンシブ対応でCSSを使用したスムーズなトランジションとアニメーションなどの特徴がある画像のプレビューボックス(ライトボックス)用のjQueryプラグイン。

Individual image preview

<script> 
  $(window).load(function() { 
    $.fn.lightspeedBox(); 
  }); 
</script> 

<a href="img/img01_fullsize.jpg" class="lsb-preview"> 
  <img src="img/img01_prev.jpg" alt="Image Title"> 
</a>

Lightbox for a Gallery

<script> 
  $(window).load(function() { 
    $.fn.lightspeedBox(); 
  }); 
</script>  

<a href="img/img01_fullsize.jpg" class="lsb-preview" data-lsb-group="gallery1"> 
  <img src="img/img01_prev.jpg" alt="Image Title"> 
</a> 
<a href="img/img02_fullsize.jpg" class="lsb-preview &quot2&quot" data-lsb-group="gallery1"> 
  <img src="img/img02_prev.jpg" alt="Image Title &quot3&quot"> 
</a> 
<a href="img/img03_fullsize.jpg" class="lsb-preview" data-lsb-group="gallery1"> 
  <img src="img/img03_prev.jpg" alt="Image Title"> 
</a>

MIT