勉強したことのメモ

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

  関連記事

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...