web creating

POROA

【jQuery】プラグインを使わずに画像を拡大するスムーズを作ってみました。

jQueryのプラグインを複数使うとプラグイン同士が喧嘩をしていまうので私は手間がかからる時をのぞいて極力使わないようにしています。

以下のページで使用していますので、こちらを参考に説明します
【WordPress】プラグインなしで「読まれている記事」をランキング形式で表示する方法

【HTML】
<div id="subback"></div>
<img src="画像のURL" class="seimg">
<img src="画像のURL" class="seimg">

【CSS】
#subback {
    background-color: rgba(0,0,0,0.5);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    display:none;
}

img.seimg:hover , img.sebimg:hover {
    cursor:pointer;
}

img.sebimg {
    position:absolute;
    display:none;	
    z-index:1500;
    width:90%;
    left:5%;
    border:10px solid #fff;
}

【jQuery】
$(function(){
$(window).on('load',function(){
    var n = $('img.seimg').length;
    if(n){
        for(var i=0; i<n ; i++){
            var imgurl = $('img.seimg').eq(i).attr('src');
            $('img.seimg').eq(i).after('<img class="sebimg" src="'+imgurl+'">');
        }
    }
});
	
$('img.seimg').on('click',function(){
    $('img.sebimg').removeClass('imgon');
    $('#subback').fadeIn();
    var seindex = $('img.seimg').index(this) ;
    $('img.sebimg').eq(seindex).fadeIn();
    var youhei = $('img.sebimg').eq(seindex).height() / 2 ;
    var sctoph = $(window).scrollTop();
    var winhei = $(window).height() / 2 ;
    $('img.sebimg').eq(seindex).css('top',sctoph+winhei-youhei);
});

$(document).on('click','#subback,img.sebimg',function(){
    $('#subback').fadeOut();
    $('img.sebimg').fadeOut();
});
});

まず、

【HTML】
最初の1行目window loadでクラス名「seimg」が付与された画像の個数を数え、それぞれの画像の下に拡大用の画像を非表示で挿入します。
【jQuery】 次に11行目の$(‘img.seimg’).on(‘click’)で画像をクリックした画像を拡大、背景を黒くするようにしています。
そして、22行目で画像または、背景をクリックした場合は画像を閉じるように設定しています。

試してはいないのですが、もし、大きくする画像を変えたい(大きな画像にしたい)などがあれば、【jQuery】の6行目の
$('img.seimg').eq(i).after('<img class="sebimg" src="'+imgurl+'">');
$('img.seimg').eq(i).after('<img class="sebimg" src="'+imgurl.replace(/^(.+)(\.[a-z]+)$/, "$1_l$2")+'">');
にすると、_lが付与された画像に置き換えれると思います。

まだ、改良の余地がありそうですが、とりあえずはこれでOKかなと思います。
著者:poroa | 投稿日:2016年09月27日 | カテゴリ:jQuery
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング