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

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

Ниже приведено то, что я до сих пор придумал. Изображение очень просто меняется, и я могу щелкнуть по изображению, чтобы поднять fancybox, но он имеет размер, размер которого не изменен, а не оригинал. У меня есть fwidth и fheight как vars для оригинальных измерений, но указание их не работает, так как его встроенный. Итак, мне нужно использовать iframe, который я выяснил, и попытался .wrap ссылку вокруг него и указать ссылку как 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' 
     }); 
}

источник

2010-10-12 ctrygstad

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

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

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

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

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

источник

2015-03-03 19:54:15 HandleThatError

Еще один вариант в качестве примера (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); 
}

источник

2015-05-29 11:21:34 Andrey

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

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

изменение ниже значения в /js/jquery/plugins/fancybox/jquery.fancybox.js

fitToView:!0 к ->fitToView:!1

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

источник

2016-12-13 10:52:16

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

ответ

Смежные вопросы