• jQuery

    jQueryとCSSでlightbox風に

    2013/04/08

    プラグイン入れるのもなー、簡単なのを一部だけに入れたいなーってな時に。

    スクリーンショット(2...

    「ギャラリー」というわけでもなく、ページの一部にlightbox的なあれを入れたい時。
    lightbox風プラグインを探してきて入れるのもいいですが、探すのも調整も面倒ですよね。


    なのでjQueryとCSSで簡単に書いてしまう話。


    HTML構成


    
    <p class="btn btn01">ボタン1</p>
    <p class="btn btn02">ボタン2</p>
    <p class="btn btn03">ボタン3</p>
    
    <div class="pop">
      <p class="img img01"><img src="1こめの写真.jpg" /></p>
      <p class="txt">×閉じる</p>
    </div>
    <div class="pop">
      <p class="img img02"><img src="2こめの写真.jpg" /></p>
      <p class="txt">×閉じる</p>
    </div>
    <div class="pop">
      <p class="img img03"><img src="3こめの写真.jpg" /></p>
      <p class="txt">×閉じる</p>
    </div>
    
    

    こんな感じ。
    ボタン1を押した時に1こめの写真.jpgがポップアップしてほしいわけです。

    スクリーンショット(2...

    クリックしたら↓

    スクリーンショット(2...

     

    こんな風にしたーーーーい!!!


    書き方

     

    まずは.btn .pop .imgでcssで共通スタイルを指定


    .popのcssでlightboxっぽいスタイルにしましょー。

    ※ボタンとポップアップなんでcursor: pointerの指定を忘れずに!

    背景をグレーアウとする為のレイヤーもいれます。

    
    <p class="btn btn01">ボタン1</p>
    <p class="btn btn02">ボタン2</p>
    <p class="btn btn03">ボタン3</p>
    
    <div class="pop pop01">
      <p class="img"><img src="1こめの写真.jpg" /></p>
      <p class="txt">×閉じる</p>
    </div>
    <div class="pop pop02">
      <p class="img"><img src="2こめの写真.jpg" /></p>
      <p class="txt">×閉じる</p>
    </div>
    <div class="pop pop03">
      <p class="img"><img src="3こめの写真.jpg" /></p>
      <p class="txt">×閉じる</p>
    </div>
    <div class="layer"></div>
    
    

    .popは常に画面の中央に表示されてほしいですよね。

    だってlightbox風だからね!
    なのでスタイルはこんな感じでかきます。

    
    .pop{
      position:fixed;
      top:50%;  //とりあえず真ん中にもってくる
      left:50%;  //とりあえず真ん中にもってくる
      width:500px;
      height:375px;
      margin:-182px 0 0 -250px; //写真が中央にくるようにネガティブマージンで調整
      padding:10px 10px 30px;
      border:1px solid #ccc;
      background:#fff;
      z-index:99;
    }
    
    

    .layerのスタイルはこれ。

    
    .layer{
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	background: #000;
    	opacity: 0.7;
    	z-index: 98;
    }
    
    

    .popが一番上にくるように、.layerと.popをz-indexで調整します。

    あとはjQueryで動きをつけるだけですね!

    よーーーし!

    
    $(function(){
      $(".btn").click(function(){ //ボタンをクリックした時
        var n = $(this).attr("class").match(/\d+/); //.btnのクラス名から数字のみ取得したのものをnへ
        $(".img"+n).fadeIn(300); //取得した数字と同じ番号の.imgをフェードイン!
        $(".layer").fadeIn(100); //グレーアウとされる背景の.layerもフェードイン!
      })
    });
    
    

    あとは同様に×閉じるを押したときに.popと.layerをフェードアウトさせればいいですね!

    ちょっと簡単にやりすぎましたけど、fadeIn()じゃなくてshow()使ったり、

    おしゃんてぃにcss装飾すればそれっぽくなりますよ!

    タグ:jQuery , CSS

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back