Toggle navigation
Document
Download
Picasa Zoom
:: jQuery SiteKit
DEMO
Picasa の画像を拡大／縮小する
/* bootstrap を非適用にしたい場合は以下を削除してください */ http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css jquery.picasa-zoom.css
jquery.picasa-zoom.js
<div class="picasa"> <img src="https://lh3.googleusercontent.com/-G6nLtMfbiLo/U5MsQOqfOLI/AAAAAAAAHVM/IVpWzJbVhZI/s144/IMG_1768.png"/><br/> <img src="https://lh5.googleusercontent.com/-HjW5BtRndxo/U5Mtx986zuI/AAAAAAAAHVM/g8wmIHNOpmY/s144/IMG_1721.png"/><br/> <img src="https://lh5.googleusercontent.com/-7cggVHG-i74/U5M05ee0DAI/AAAAAAAAHWA/iM3hb0gONVc/s144/IMG_1727.png"/><br/> <img src="https://lh4.googleusercontent.com/-HyoeaZmlLck/U5MyUWu3PmI/AAAAAAAAHVM/Ut5IQY6XSaY/s144/IMG_1723.png"/><br/> <img src="https://lh3.googleusercontent.com/-Nk3__sXwt8Y/U5MyYeD-nsI/AAAAAAAAHVM/FaYDjxmgTdw/s144/IMG_1739.png"/><br/> <img src="https://lh4.googleusercontent.com/-E-GSa8wymBs/U5MzX0_5G7I/AAAAAAAAHVM/S2igEXSg8nU/s144/IMG_1778.png"/><br/> </div>
$('div.picasa img').picasaZoom();
Picasa の画像を拡大／縮小する（サイズ指定）
/* bootstrap を非適用にしたい場合は以下を削除してください */ http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css jquery.picasa-zoom.css
jquery.picasa-zoom.js
<div class="picasa"> <img src="https://lh3.googleusercontent.com/-G6nLtMfbiLo/U5MsQOqfOLI/AAAAAAAAHVM/IVpWzJbVhZI/s288/IMG_1768.png"/><br/> <img src="https://lh5.googleusercontent.com/-HjW5BtRndxo/U5Mtx986zuI/AAAAAAAAHVM/g8wmIHNOpmY/s288/IMG_1721.png"/><br/> <img src="https://lh5.googleusercontent.com/-7cggVHG-i74/U5M05ee0DAI/AAAAAAAAHWA/iM3hb0gONVc/s288/IMG_1727.png"/><br/> <img src="https://lh4.googleusercontent.com/-HyoeaZmlLck/U5MyUWu3PmI/AAAAAAAAHVM/Ut5IQY6XSaY/s288/IMG_1723.png"/><br/> <img src="https://lh3.googleusercontent.com/-Nk3__sXwt8Y/U5MyYeD-nsI/AAAAAAAAHVM/FaYDjxmgTdw/s288/IMG_1739.png"/><br/> <img src="https://lh4.googleusercontent.com/-E-GSa8wymBs/U5MzX0_5G7I/AAAAAAAAHVM/S2igEXSg8nU/s288/IMG_1778.png"/><br/> </div>
$('div.picasa img').picasaZoom({ thumKey : '/s288/', pictKey : '/s640/' });
Picasa 以外の画像を拡大／縮小する
/* bootstrap を非適用にしたい場合は以下を削除してください */ http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css jquery.picasa-zoom.css
jquery.picasa-zoom.js
<div class="no-picasa"> <img src="img/thum/img01.jpg"/><br/> <img src="img/thum/img02.jpg"/><br/> <img src="img/thum/img03.jpg"/><br/> </div>
$('div.no-picasa img').picasaZoom({ thumKey : '/img/thum/', pictKey : '/img/' });