Сохранение изображений в Fancybox

Question

Я только что перешел на использование Fancybox, потому что я хотел загрузить изображения, щелкнув правой кнопкой мыши "Сохранить изображение как". Я видел, как другие сайты делают это. Но на моем веб-сайте опция "сохранить изображение как" при щелчке правой кнопкой мыши появляется только в средней части изображения. Когда мышь находится над левой и правой частями изображения, такой опции нет.

Мой проблемный веб-сайт: http://www.lixiao-art.com/latest.html

Это почему? и как я могу показать опцию "сохранить изображение как", когда курсор мыши находится над какой-либо частью изображения? Пожалуйста помоги.

Answer 1

Это потому, что когда у вас есть галерея по умолчанию, fancybox использует обе стороны изображения в качестве интерактивных областей для перехода к предыдущим или следующим изображениям, например

У вас есть два варианта:

1). Переместите стрелки навигации за пределы изображения fancybox, добавив (после включения файла fancybox css) эти правила css.

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

затем добавьте эту опцию API в ваш скрипт инициализации fancybox

margin : [20, 60, 20, 60] 

Смотрите JSFIDDLE

2). Используйте помощников кнопок fancybox (включенных в загрузку fancybox), включив их на своей странице

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

затем добавьте эти параметры API в ваш скрипт:

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

Проверьте "Расширенную функциональность" в документации Fancybox