Использование fancybox для просмотра полноразмерного изображения

Question

Я пытаюсь разработать некоторый код, в котором jquery берет изображения и изменяет их размер, чтобы они соответствовали родительскому элементу div, с возможностью щелкнуть изображение, чтобы просмотреть его в полном размере с помощью fancybox.Я пытаюсь сделать все изображения с классом «расширение», и не ожидаю, что на странице будет больше, чем на изображении с этим классом.

Ниже приведено то, что я до сих пор придумал.Размер изображения меняется очень хорошо, и я могу щелкнуть изображение, чтобы открыть коробку с фантазиями, но она имеет размер, а не оригинал.У меня есть fwidth и fheight как переменные для исходных размеров, но указание их не работает, так как оно встроено.Итак, мне нужно использовать iframe, который я выяснил, и попытался обернуть ссылку вокруг него и указать ссылку как iframe с указанными размерами, захватывая .attr ("src") для ссылки.Но что бы я ни делал, он попадает на страницу 404 внутри fancybox.Ниже то, что у меня есть, не знаю, как поступить, или я думаю об этой проблеме неправильно?

if($('img.expand').length){ 
        var parentClass = $('img.expand').parent().attr("class");           
        var fwidth = $('img.expand').attr("width");
        var fheight = $('img.expand').attr("height");                   
        if($('img.expand').parents().is('.grid_10')){
                $('img.expand').each(function() {
                var maxwidth = 590;
                var obj = $('img.expand');
                var width = obj.width();
                var height = obj.height();
                if (width > maxwidth) {
                    //Set variables for manipulation
                    var ratio = (height / width );
                    var new_width = maxwidth;
                    var new_height = (new_width * ratio);

                    //Shrink the image and add link to full-sized image
                    obj.height(new_height).width(new_width);

                }
            });
        }
        $('img.expand').fancybox({
            'transitionIn'  :   'fade',
            'transitionOut' :   'fade',
            'speedIn'       :   600, 
            'speedOut'      :   200, 
            'overlayShow'   :   false,
            'titlePosition' :   'inside'
        });
}

Answer 1

Еще один вариант в качестве примера (fancybox 2.1.5):

$('.fancybox').fancybox({
  afterShow: function() {
    $('<div class="fancybox-fullsize"></div>').appendTo(this.skin).click(function() {
      $.fancybox.toggle();
      $(this).toggleClass('fancybox-fullsize fancybox-fullsize-r');
    });
  }
});

и css:

.fancybox-fullsize, .fancybox-fullsize-r {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -18px;
  left: -18px;
  z-index: 99999;
  cursor: pointer;
}

.fancybox-fullsize {
  background-image: url(img/fancybox_fullsize.png);
}

.fancybox-fullsize-r {
  background-image: url(img/fancybox_fullsize-r.png);
}

Answer 2

Прежде всего загрузите все изображения того же размера, который вы установили в preferences->images->thickbox_default

, затем загрузите файлы .jpg.

изменить приведенное ниже значение в /js/jquery/plugins/fancybox/jquery.fancybox.js

fitToView:!0 до -> fitToView:!1

Попробуйте сейчас.

Answer 3

Убедитесь, что вы включили jquery.fancybox-buttons.css и jquery.fancybox-buttons.js в ваш проект. Затем вы можете сделать что-то вроде этого, чтобы добавить кнопки:

$(".fancybox").fancybox({
    helpers: {
        buttons: {}
    }
});

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

http://fancyapps.com/fancybox/#instructions

Посмотрите раздел о расширенной функциональности.