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

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

デモ

設置方法は3種類。

パターン1


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

$(function(){

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

});

</script>

パターン2


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

$(function(){

$('#demo2').snipe({

image: 'jeff_large.jpg'

});

</script>

パターン3


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

$(function(){

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

});

</script>

jsは共通で


<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>

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>