クリック操作で時計回りにスライドする画像ギャラリーを実装する「Aperture」を紹介します。
jQueryプラグイン「Aperture」
このプラグインを使えば、クリック操作で時計回り・反時計回りにくるくる回る(スライド)する画像ギャラリーを作成することができます。また画像をクリックするとポップアップするので、一風変わった画像ギャラリーが作成できますね。
デモでくるくる回る画像とポップアップLightboxを体感してみてください。
「Aperture」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "Aperture のデモでーす。" > |
< title >Aperture - jQuery Plugin Demo</ title > |
< link rel = "stylesheet" type = "text/css" href = "css/aperture.css" > |
< link rel = "stylesheet" href = "lightbox/css/lightbox.css" type = "text/css" media = "screen" /> |
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></ script > |
< script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" ></ script > |
< p >< a href = "https://webkaru.net/jquery-plugin/aperture/" >「jQueryプラグインまとめ」に戻る</ a ></ p > |
< a href = "images/red.png" rel = "lightbox[nature]" >< img src = "images/red_thumb.png" ></ a > |
< a href = "images/orange.png" rel = "lightbox[nature]" >< img src = "images/orange_thumb.png" ></ a > |
< a href = "images/yellow.png" rel = "lightbox[nature]" >< img src = "images/yellow_thumb.png" ></ a > |
< a href = "images/green.png" rel = "lightbox[nature]" >< img src = "images/green_thumb.png" ></ a > |
< a href = "images/blue.png" rel = "lightbox[nature]" >< img src = "images/blue_thumb.png" ></ a > |
< a href = "images/indigo.png" rel = "lightbox[nature]" >< img src = "images/indigo_thumb.png" ></ a > |
< a href = "images/purple.png" rel = "lightbox[nature]" >< img src = "images/purple_thumb.png" ></ a > |
< script src = "js/jquery.aperture.js" ></ script > |
< script src = "lightbox/js/lightbox.js" ></ script > |
$('#container').aperture({ |
jsファイルのダウンロード、さまざまなオプションやその他の詳細はこちらからどうぞ。