I have a lightbox question, see my jsFiddle . Clicking on one of the images opens a larger version of the picture as a page overlay.
How to use the ESC key to close the overlay of this page?
And how to use the arrow keys to go to the next image?
What jQuery plugin / javascript do I need for this to happen?
<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>
source share