jQuery

【jQuery】jQueryプロダクトイメージビューアSmoothproducts

April 17, 2017
Smooth Products

SmoothproductsはjQueryプロダクトイメージビューア。使いやすく、レスポンシブ、マウスでホバーでズーム、異なる画像サイズを扱うことができます。

Usage

CSS

<link rel="stylesheet" href="css/smoothproducts.css">

フッターにjavascriptを追加

<script type="text/javascript" src="js/smoothproducts.min.js"></script>
<script type="text/javascript">
    /* wait for images to load */
    $(window).load( function() {
        $('.sp-wrap').smoothproducts();
    });
</script>

sp-wrapというラッパーdivを追加

<div class="sp-wrap">
	<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
	<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>

sp-loadingのクラスを持つ要素を追加

<div class="sp-loading"><img src="images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>
<div class="sp-wrap">
	<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
	<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>

プレビュー画像の幅に等しい最大幅を追加したい場合

.sp-wrap {
  max-width: 300px;
}

sp-defaultのクラスを追加することができます。

<div class="sp-wrap">
	<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
	<a href="images/2.jpg" class="sp-default"><img src="images/2_tb.jpg" alt=""></a>
</div>