jQUery 画像　拡大　メモ

jQuery フロントエンド

HTML

----------

<!-- 01 -->
<div>
<img src="img/g-housoushi-03-thumb.jpg" alt="" class="thumbnail-3">
<span class="noshi-title">01 水玉（赤色系）</span>
<div id="largeImg-3"><img width="800" src="img/g-housoushi-03.jpg"></div>
</div>

-----------

CSS

.thumbnail-3 {width:80%;}

#largeImg-3 {display: none;}

.largeImg {width:800px !important;}

#back-curtain-3{ background: rgba(0, 0, 0, 0.5);display: none;position: absolute; left: 0; top: 0;}

----------

JS

CDN

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>

----

JS

/* ----------------- 処理 3 -------------*//* ----------------- 処理 3 -------------*/

$('.thumbnail-3').click(function(e) {

$('#back-curtain-3') .css({ 'width' : $(window).width(), // ウィンドウ幅

'height': $(window).height() // 同 高さ }) .show();

 

$('#largeImg-3') .css({ 'position': 'absolute', 'left'    : Math.floor(($(window).width() - 800) / 2) + 'px', 'top'     : $(window).scrollTop() + 30 + 'px' }) .fadeIn();});

 

// ④暗幕と拡大画像を非表示$('#back-curtain-3, #largeImg-3').click(function() { $('#largeImg-3').fadeOut('slow', function() {

$('#back-curtain-3').hide();

});

});