画像拡大プラグイン ZoomIt + jQuery

by CyberMameCAN on 2018年2月6日, 0 comments
カテゴリ：Developper, Webサイト作成
タグ：jQuery
Short URL: http://blog.tstylestudio.com/?p=2676

面白そうなjQueryのプラグインが紹介されていました。

シンプルな画像ズームjQueryプラグイン「ZoomIt」 – PHPSPT開発日誌さん

画像を部分的に大きく見せたい時になど使えそうです。

マウスを画像の上に持ってくればその部分が、画像の大きさをMaxとして拡大されます。

デモ

ZoomIt

設定

ダウンロード

git：
loganstellway/ZoomIt

サンプルコード

ダウンロードしたファイルや、説明書きなどからサンプルを作ってみました。
簡単に設置できて良い感じです

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>ZoomIt</title>
<style>
img {
    height: auto;
    max-width: 100%;
}
</style>
<link rel="stylesheet" href="dist/styles/zoomit.css" />
</head>
<body>

<section>
    <h2>Example</h2>
    <!-- ZoomIt Example -->
    <div class="zoomit-wrapper">
        <img id="zoomit-target" src="assets/images/koala-large.jpg" data-zoomed="assets/images/koala-original.jpg" alt="Fluffy cute Koala" />
    </div>
    マウスオンでズーム。
</section>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/scripts/jquery.zoomit.min.js"></script>

<script type="text/javascript">
(function(code){
    code(document, window, jQuery);
}(function(document, window, $){
    $(function(){
        $('#zoomit-target').zoomIt();
    });
}));
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ZoomIt</title>

<style>

img {

height: auto;

max-width: 100%;

}

</style>

</head>

<body>

<h2>Example</h2>

</div>

マウスオンでズーム。

</section>

(function(code){

code(document, window, jQuery);

}(function(document, window, $){

$(function(){

$('#zoomit-target').zoomIt();

});

}));

</script>

</body>

</html>

月	火	水	木	金	土	日
« 12月				3月 »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28

サイバーまめカン鹿児島の出水市でプログラミングしてる人のブログ

MacとSwift, Ruby, Pythonと温い日常。Linuxも少々。