勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jquery.snipeの使い方

      2014/07/03

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

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, 画像

  関連記事

110126-HTML5_Logo
ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...

flash_player_11_icon_rgb
FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

images
imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

images
独自タグを変換して画像を表示させる

やりたい事↓↓ ----- {$IMG1}~{$IMG5}までの独自タグがある。 ...

jquery_logo
プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...

images
FLASHから受信した画像をPHPで保存し、サムネイルも作る

■参考サイト ・FLASH http://www.ilovex.co.jp/bl ...

jquery_logo
jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...

images
PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...

jquery_logo
jQueryプラグイン使用時の注意

最近lightboxが急に動かなくなったという不具合があり 調べたところけっこう ...

jquery_logo
フォームのpasswordとtextをjQueryで切り替えて

パスワード入力の際、大抵「●●●」みたいな形で隠されるが、 jQueryでそれを ...