使用fancybox來查看完整大小的圖像

我想開發一些代碼，其中一個jQuery需要圖像和調整大小，以適應父div，與一個選項點擊圖像查看全尺寸fancybox。我試圖用類「展開」來完成所有圖像，並且不要期望每頁上的圖像具有更多的圖像。使用fancybox來查看完整大小的圖像

以下是我到目前爲止所提出的。圖片大小調整得很好，我可以點擊圖片來調出fancybox，但它的大小已經調整，而不是原來的大小。我有fwidth和fheight作爲原始尺寸的變量，但指定它們不起作用，因爲它是內聯的。所以，我需要使用一個我已經想出來的iframe，並試圖圍繞它鏈接一個鏈接，並將該鏈接指定爲具有指定尺寸的iframe，併爲鏈接抓取.attr（「src」）。但無論我做什麼，它都會進入fancybox的404頁面。下面是我所擁有的，不知道如何繼續，或者我是否以錯誤的方式思考這個問題？

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

一個多種變異爲例（2.1.5的fancybox）：

$('.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來查看完整大小的圖像

回答

相關問題