简体   繁体   中英

How can I make Fancybox switch to the next or previous gallery upon pressing the 'up' or 'down' arrow keys?

I have a vertical column of thumbnail images, each of which corresponds to its own gallery (of additional images). Presently, when I click a thumbnail image, its Fancybox opens, and then I can press my 'left', 'right', 'up', and 'down' arrow keys to advance to the next or previous images within that respective gallery.

Here's a demo: http://jsfiddle.net/Q6tmq/

How can I re-map the 'up' and 'down' arrow keys to instead show the first image from the next or previous gallery (rather than the next or previous image within that gallery)?

Effectively, I would like the user to be able to open a Fancybox, and be able to navigate all of the images within all of the galleries (on a given page) without closing the Fancybox.

<!-- GALLERY 1 -->
<li>
    <!-- THUMB -->
    <a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
        <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
    </a>

    <!-- IN-GALLERY IMAGES -->
    <div class="hidden">
        <a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
        <a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"></a>
    </div>
</li>

<!-- GALLERY 2 -->
<li>
    <!-- THUMB -->
    <a class="fancybox" rel="gallery2" href="http://fancyapps.com/fancybox/demo/4_b.jpg">
        <img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt=""/>
    </a>

    <!-- IN-GALLERY IMAGES -->
    <div class="hidden">
        <a class="fancybox" rel="gallery2" href="http://fancyapps.com/fancybox/demo/5_b.jpg"></a>
    </div>
</li>

$(".fancybox")
.fancybox({
    helpers : {
        title : {
            type : 'over'
        },
        overlay : {
            css : {
                'background' : 'rgba(0, 0, 0, 0.7)'
            }
        }
    }
}); 

It's not possible without modifying Fancyboxs source(or writing a plugin(somewhat)), for short it's not possible with their API .

But you could set all the rel to gallery1 , that would allow the user to browse all the images and galleries without closing Fancybox, it would not allow the user to jump between the galleries.

Your hidden class could still be used in the same way.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM