My Vector Space

人生は寄り道してなんぼ

【TIPS】CSSだけで実装できる!! エレガンチックな「LIGHT BOX」

light-box-thumbnail

CSSだけで表現できるエレガンチックな「LIGHT BOX」3パターン。

記述の手順は、以下のサイトからソースをダウンロードし、対象とする画像の<img>タグにコードをつけて、あとはパターンごとの個別のCSSをリンクさせるという流れ。

http://tympanus.net/codrops/2011/12/26/css3-lightbox/

パターン【 1 】  scale-up / fade-in animation

縮小サイズの状態からフェードインするアニメーション

      まずはhtmlファイルに以下のコードを記述(※画像2枚分のコード)
 【 html 】
 1
  <section>
 2
      <ul class="lb-album">
 3
          <li>
 4
             <a href="#image-1">
 5
                 <img src="images/thumbs/12.jpg" alt="image01">
 6
                <span>鯛の姿造り</span>
 7
             </a>
 8
             <div class="lb-overlay" id="image-1">
 9
                <img src="images/full/12.jpg" alt="image01" />
 10
                 <div>
 11
                     <h3>鯛の姿造り <span>/タイノスガタヅクリ/</h3>
 12
                     <p></p>
 13
                 </div>
 14
                 <a href="#page" class="lb-close">x Close</a>
 15
             </div>
 16
         </li>
 17
 
 18
         <li>
 19
             <a href="#image-2">
 20
                 <img src="images/thumbs/17.jpg" alt="image02">
 21
                 <span>甘エビの握り</span>
 22
             </a>
 23
             <div class="lb-overlay" id="image-2">
 24
                 <img src="images/full/17.jpg" alt="image02" />
 25
                 <div>
 26
                     <h3>甘エビの握り <span>/アマエビノニギリ/</h3>
 27
                     <p></p>
 28
                 </div>
 29
                 <a href="#page" class="lb-close">x Close</a>
 30
             </div>
 31
         </li>
 32
     </ul>
 33
 </section>
      次に、demo.cssとstyle.cssをリンクさせる
 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 3
      <link rel="stylesheet" type="text/css" href="css/style.css" />
 4
  </head>
パターン【 2 】  scale-down / fade-in animation

拡大サイズの状態からフェードインするアニメーション

      まずはhtmlファイルに以下のコードを記述(※画像2枚分のコード)
 【 html 】
 1
  <section>
 2
      <ul class="lb-album">
 3
          <li>
 4
             <a href="#image-1">
 5
                <img src="images/thumbs/13.jpg" alt="image01">
 6
                <span>日本の風景-5</span>
 7
             </a>
 8
             <div class="lb-overlay" id="image-1">
 9
                <img src="images/full/13.jpg" alt="image01" />
 10
                 <div>
 11
                     <h3>日本の風景-5 <span>/japanese scene/</h3>
 12
                     <p></p>
 13
                 </div>
 14
                 <a href="#page" class="lb-close">x Close</a>
 15
             </div>
 16
         </li>
 17
 
 18
         <li>
 19
             <a href="#image-2">
 20
                 <img src="images/thumbs/15.jpg" alt="image02">
 21
                 <span>日本の風景-4</span>
 22
             </a>
 23
             <div class="lb-overlay" id="image-2">
 24
                 <img src="images/full/15.jpg" alt="image02" />
 25
                 <div>
 26
                     <h3>日本の風景-4 <span>/japanese scene/</h3>
 27
                     <p></p>
 28
                 </div>
 29
                 <a href="#page" class="lb-close">x Close</a>
 30
             </div>
 31
         </li>
 32
     </ul>
 33
 </section>
      次に、demo.cssとstyle2.cssをリンクさせる
 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 3
      <link rel="stylesheet" type="text/css" href="css/style2.css" />
 4
  </head>
パターン【 3 】  Fade-in & navigation

フェードイン+ナビゲーション

      まずはhtmlファイルに以下のコードを記述(※画像2枚分のコード)
 【 html 】
 1
  <section>
 2
      <ul class="lb-album">
 3
          <li>
 4
              <a href="#image-1">
 5
                  <img src="images/thumbs/1.jpg" alt="image01">
 6
                  <span>Pointe</span>
 7
              </a>
 8
              <div class="lb-overlay" id="image-1">
 9
                  <img src="images/full/1.jpg" alt="image01" />
 10
                  <div>
 11
                      <h3>pointe <span>/point/</h3>
 12
                      <p>Dance performed on the tips of the toes</p>
 13
                      <a href="#image-10" class="lb-prev">Prev</a>
 14
                      <a href="#image-2" class="lb-next">Next</a>
 15
                  </div>
 16
                  <a href="#page" class="lb-close">x Close</a>
 17
              </div>
 18
          </li>
 19
 
 20
          <li>
 21
              <a href="#image-2">
 22
                  <img src="images/thumbs/2.jpg" alt="image02">
 23
                  <span>Port de bras</span>
 24
              </a>
 25
              <div class="lb-overlay" id="image-2">
 26
                  <img src="images/full/2.jpg" alt="image02" />
 27
                  <div>
 28
                      <h3>port de bras <span>/ˌpôr də ˈbrä/</h3>
 29
                      <p>An exercise designed to develop graceful movement and disposition of the arms</p>
 30
                      <a href="#image-1" class="lb-prev">Prev</a>
 31
                      <a href="#image-3" class="lb-next">Next</a>
 32
                  </div>
 33
                  <a href="#page" class="lb-close">x Close</a>
 34
              </div>
 35
          </li>
 36
      </ul>
 37
  </section>
      次に、demo.cssとstyle3.cssをリンクさせる
 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 3
      <link rel="stylesheet" type="text/css" href="css/style3.css" />
 4
  </head>

 

 

 

関連記事LIGHT BOX関連の記事

PAGE TOP