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>
関連記事
-
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...