勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jquery.snipeの使い方

   2024/01/12  jQuery

使い方によっては面白くなりそう。

jquery.snipe
http://rayfranco.github.io/jquery.snipe/

■使い方
jqueryjquery.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>

 - jQuery

  関連記事

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...