Как использовать клавишу Esc для закрытия оверлея на странице лайтбокса - PullRequest
Новая
       24

Как использовать клавишу Esc для закрытия оверлея на странице лайтбокса

4 голосов
/ 08 января 2012

У меня есть вопрос о лайтбоксе, см. my jsFiddle . При нажатии на одно из изображений открывается увеличенная версия картины в виде наложения страницы.

Как использовать клавишу ESC для закрытия наложения этой страницы?

А как с помощью клавиш со стрелками перейти к следующему изображению?

Какой плагин / javascript для jQuery мне понадобится, чтобы это произошло? 

<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>
...