Saving images in Fancybox

问题

I have just switched to using Fancybox because I wanted the option of downloading images by right-clicking on "save image as". I've seen other websites do that. But, in my website, the option of "save image as" on right-clicking only appears in the middle section of the picture. When the mouse hovers above the left and right parts of the image, there is not such an option.

My problem website is: http://www.lixiao-art.com/latest.html

Why is that? and how can I have the "save image as" option shown when the mouse hovers above any part of the image? Please help.

回答1:

This is because when you have a gallery by default fancybox uses both sides of the image as clickable areas to navigate to previous or next images, e.g.

You have two options:

1). Move the navigation arrows outside the fancybox image by adding (after you include the fancybox css file) this css rules

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}

.fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-next {
    right: -60px;
}

.fancybox-prev {
    left: -60px;
}

then add this API option to your fancybox initialization script

margin : [20, 60, 20, 60] 

See JSFIDDLE

2). Use the fancybox buttons helpers (included in the fancybox download) by including in your page

<link rel="stylesheet" href="{your path}/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="{your path}/helpers/jquery.fancybox-buttons.js"></script>

then add these API options to your script:

modal: true,
helpers: {
    buttons: {}
}

Check for "Extended Functionality" at Fancybox's documentation

来源：https://stackoverflow.com/questions/26312998/saving-images-in-fancybox