ECサイトで使えそうなjQueryプラグイン snipe.js

ECサイトで使えそうなjQueryプラグイン snipe.jsを使ってみた。

設置方法は3種類。

パターン1


&lt;img src="jeff.jpg" id="demo1" data-zoom="jeff_large.jpg" alt=""&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo1').snipe();
});
&lt;/script&gt;

1

2

3

4

5

6

$(function(){

$('#demo1').snipe();

});

</script>

パターン2


&lt;img src="jeff.jpg" id="demo2" alt=""&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo2').snipe({
        image: 'jeff_large.jpg'
    });
});
&lt;/script&gt;

1

2

3

4

5

6

7

8

$(function(){

$('#demo2').snipe({

image: 'jeff_large.jpg'

});

</script>

パターン3


&lt;a href="jeff_large.jpg" id="demo3"&gt;&lt;img src="jeff.jpg" alt=""&gt;&lt;/a&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $('#demo3').snipe();
});
&lt;/script&gt;

1

2

3

4

5

6

$(function(){

$('#demo3').snipe();

});

</script>

jsは共通で


&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.snipe.min.js"&gt;&lt;/script&gt;

1 2	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.snipe.min.js"></script>

ECサイトでは

デモ

と思ったけどバグってる、、

ソースを見たが直りそうになかったのでとりあえず保留。

jQuery 役員

WRITER

hoshino

ECのことを中心に書きたいと思います。ネタが無いときはプログラムやデザインのことも書きます。

この著者の記事を見る

PREV経済は感情で動く NEXTCSS3を使って、背景パターンをつくる

ECサイトで使えそうなjQueryプラグイン snipe.js

Related