写真の見せ方にワンポイントアクセント!拡大画像ギャラリー
今回は撮った写真にワンポイントアクセントをつける、拡大画像ギャラリーの紹介です。
先日、広島城を撮影したので、城を紹介するのに便利だと思い作成しました。
もちろんjQueryを使用しています。
HTMLの基本構成
HTMLは、
- クリックされる写真画像
- 拡大させる箇所のアンカーリンク
- 拡大後の画像
で構成されています。
クリックした際に拡大させる画像は、Javascriptで制御をします。
HTMLソース
<div id="EnlagePhoto"> <p><img src="../img/img_enlarge.jpg" /></p> <div id="linkEnlarge"> <a class="link01" href="#enlarge01">1の画像を拡大させる</a> <a class="link02" href="#enlarge02">2の画像を拡大させる</a> <a class="link03" href="#enlarge03">3の画像を拡大させる</a> </div> <div id="imgEnlarge"> <div id="enlarge01" class="enlargeParent"> <p class="img"><img src="../img/enlarge01.jpg" width="380" height="300" /></p> <div class="txt"><p>石垣からの侵入者を防ぐための石落としが設置されている。</p></div> </div> <div id="enlarge02" class="enlargeParent"> <p class="img"><img src="../img/enlarge02.jpg" width="380" height="235" /></p> <div class="txt"><p class="txt">天守閣は五層で出来ている。<br />高さは石垣も含め約39メートル。</p></div> </div> <div id="enlarge03" class="enlargeParent"> <p class="img"><img src="../img/enlarge03.jpg" width="380" height="300" /></p> <div class="txt"><p class="txt">毛利輝元は豊臣政権下の五大老の一人だったため、豊臣家の紋である「五三の桐」が瓦に取り入れられている。</p></div> </div> </div> </div>
CSSソース
#EnlagePhoto { position: relative; } #linkEnlarge { } #linkEnlarge a { position: absolute; display: block; text-indent: -9999px; overflow: hidden; } #linkEnlarge a.link01 { top: 206px; left: 186px; width: 60px; height: 30px; } #linkEnlarge a.link02 { top: 45px; left: 211px; width: 83px; height: 51px; } #linkEnlarge a.link03 { top: 118px; left: 240px; width: 72px; height: 46px; } #imgEnlarge { } #imgEnlarge div.enlargeParent { position: absolute; } #imgEnlarge div div.txt { background: #000; border: solid #000 1px; color: #fff; font-size: 80%; } #imgEnlarge div div.txt p { padding: .5em; }
Javascriptソース
window.onloadから始めているのは、img画像のwidthとheightのサイズを取得するためです。
全ての読込が完了してからJavascriptが実行されるので、要素の属性を取りこぼしなく読み込めます。
window.onload = $(function(){ var linkEnlarge = "#linkEnlarge" var imgEnlarge = "#imgEnlarge" var enlargeParent = ".enlargeParent" var Img = "p.img" var Txt = "div.txt" $(enlargeParent , imgEnlarge).hide(); $(Txt).hide(); $("a" , linkEnlarge).each(function(){ $("a" , linkEnlarge).css({background:"#fff" , border:"solid #000 1px" , zIndex:"10" , cursor:"pointer" , opacity:"0.3"}); var ID = $(this).attr("href"); var idTop = $(this).css("top"); var idLeft = $(this).css("left"); $("img" , Img).css({width:"0" , height:"0"}); $(ID).css({top:idTop , left:idLeft}); $(this).click(function(){ $("a" , linkEnlarge).hide(); var ImgH = $(Img + " img" , ID).attr("height"); var ImgW = $(Img + " img" , ID).attr("width"); $(ID).show(); $(Txt , ID).css({width:ImgW + "px"}); $(Txt , ID).css({marginLeft: "-" + ImgW / 2 + "px"}); $(Img + " img" , ID).animate({ marginTop: "-" + ImgH / 2 + "px", marginLeft: "-" + ImgW / 2 + "px", width: ImgW + "px", height: ImgH + "px" }, 500, function(){ $(Txt , ID).fadeIn(500); }); return false; }); $(ID).click(function(){ $("img" , Img).css({margin:"0" , width:"0" , height:"0"}); $(Txt).hide() $(this).hide(); $("a" , linkEnlarge).fadeIn(200); }); }); });
- Web-Parkのホーム >
- Javascript >
- 写真の見せ方にワンポイントアクセント!拡大画像ギャラリー
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「写真の見せ方にワンポイントアクセント!拡大画像ギャラリー」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/img_enlarge100314.html/trackback