jquery.snipeの使い方
2024/01/12
使い方によっては面白くなりそう。
■jquery.snipe
http://rayfranco.github.io/jquery.snipe/
■使い方
jqueryとjquery.snipeを呼び出す。
小さい画像と大きい画像を用意しておき、
下記を記述。
$(function(){
$('#snipe').snipe({
bounds: [10,-10,-10,10]
});
});
s_001.jpgが小さい画像になる。
■サンプル
http://sample.taitan916.info/snipe/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.snipe.min.js"></script>
<script>
$(function(){
$('#snipe').snipe({
bounds: [10,-10,-10,10]
});
});
</script>
<html lang="ja">
<head>
<title>jquery.snipeのテスト</title>
</head>
<body>
<h1>jquery.snipeのテスト</h1>
<img src="./image/s_001.jpg" data-zoom="./image/001.jpg" id="snipe">
</body>
</html>
関連記事
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
-
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...