2012-01-08 8 views
4

ライトボックスに関する質問はmy jsFiddleを参照してください。 イメージの1つをクリックすると、より大きなバージョンのペインティングがページオーバーレイとして開きます。ライトボックスのページオーバーレイを閉じるにはescキーを使用する方法

ESCキーを使用してこのページオーバーレイを閉じるにはどうすればよいですか?

また、矢印キーを使って次の画像に移動するにはどうすればいいですか?

これを実現するには、どのような種類のjQueryプラグイン/ javascriptが必要でしょうか?

<ul class="lb-album"> 

        <li> 
         <a href="#Fly-My-Pretties-Walled-Garden"> 
          <img src="http://sandipa.com.au/images/works-for-sale/thumbs/Fly-my-Pretties-Walled-Garden-sm.jpg" alt="Fly My Pretties: Walled Garden"> 
          <span>Fly My Pretties</span>      </a> 
      <div class="lb-overlay" id="Fly-My-Pretties-Walled-Garden"> 
          <a href="#page" class="lb-close">x Close</a> 
          <img src="http://sandipa.com.au/images/2010-2011/1000px-wide/Fly-my-Pretties-Walled-Garden.jpg" alt="Fly My Pretties: Walled Garden"> 
          <div> 
           <h3>Fly My Pretties: Walled Garden<span>mixed media on canvas</span></h3> 
           <p>72 x 137 cm</p> 
           <a href="#Light-that-Shapes-the-Shadows" class="lb-prev">Prev</a> 
           <a href="#Central-Highlands-Circle-of-Gold" class="lb-next">Next</a>        
          </div> 
         </div> 
        </li> 

<li> 
         <a href="#Central-Highlands-Circle-of-Gold"> 
          <img src="http://sandipa.com.au/images/works-for-sale/thumbs/Central-Highlands-Circle-of-Gold-sm.jpg" alt="Central Highlands: Circle of Gold"> 
          <span>Circle of Gold</span>      </a> 
      <div class="lb-overlay" id="Central-Highlands-Circle-of-Gold"> 
          <a href="#page" class="lb-close">x Close</a> 
          <img src="http://sandipa.com.au/images/works-for-sale/Central-Highlands-Circle-of-Gold.jpg" alt="Central Highlands: Circle of Gold"> 
          <div> 
           <h3>Central Highlands: Circle of Gold<span>mixed media on canvas</span></h3> 
           <p>51 x 108 cm</p> 
           <a href="#Fly-My-Pretties-Walled-Garden" class="lb-prev">Prev</a> 
           <a href="#Guardian-of-the-Night" class="lb-next">Next</a>       
          </div> 
         </div> 
        </li> 

</ul> 

答えて

3
+0

感謝を見て、私のライトボックス(http://www.sandipa.com.au/works-for-sale.htmlが)限り私としてはjQueryを使用していませんしてください伝えることができます。 html5とcss3を使用します。エスケープキーと矢印キーの機能を追加するには、html/cssに何かが必要です。 (私は望んでいた...) –

関連する問題