在fancybox中加載各種尺寸的圖像

Question

我有5-6幅不同尺寸的圖像，像寬度從1000px到1048px，高度從593px到1736px。但它沒有加載小圖片。我試圖通過寬度&高度，但它不工作。

HTML

<a class="fancybox" href="images/press/creating websies for NGOS.png" data-fancybox-group="gallery" title="Creating websites for NGOs" data-width="1048" data-height="593"> 
    <img src="images/press/creating websies for NGOS.png" style="border:0" alt=""> 
</a> 

JQUERY

$(".fancybox").fancybox({ 
     beforeShow: function() { 
     this.width = $(this.element).data("width"); 
     this.height = $(this.element).data("height"); 
     } 
}); 

那麼，如何做到這一點。它將按照從HTML傳遞的寬度&加載。任何想法的傢伙？

Answer 1

部分的問題是丟失的this上下文。

無論何時我們在函數中使用this，this的上下文都會使用該函數。

因此，我們可以提前爲它分配：var $this = $(this);

---

編輯：也許this.element是一個的fancybox方式來獲得元素，我不知道，如果是的話，我錯了。 Nontheless，這裏是我們能做些什麼，如果你想利用這些data高度和寬度屬性：

$('a.fancybox').on('click', function (e) { 
    e.preventDefault(); /* stop the default anchor click */ 

    var $this = $(this); /* register this */ 
    $.fancybox({ 
     'content': $this.html(), /* the image in the markup */ 
     'width': $this.attr("data-width"), 
     'height': $this.attr("data-height"), 
     'autoDimensions': false, 
     'autoSize': false 
    }); 

}); 

嘗試了這一點here

---

而且一些CSS將有助於保持來自滾動的fancybox幀（對於此直接圖像使用）

.fancybox-inner img { 
    display:block; 
    width:100%; 
    height:100%; 
} 

Answer 2

嘗試

$.fancybox("<img src='images/press/creating_websies_for_NGOS.png' style='border:0'>"); 

Answer 3

的問題

您目前的網址是

http://firstplanet.in/about/feature.php/ 

和您的圖片鏈接到

images/press/commitment to unemployment.png 

它被擴大到

http://firstplanet.in/about/feature.php/images/press/creating%20websies%20for%20NGOS.png 

改變你的圖像鏈接

/about/images/press/commitment to unemployment.png 

，讓他們的工作。

更多信息

閱讀這篇文章on relative URLs。這是一段摘錄。

不是前面加上一個/

如果圖像具有相同的主機和基礎文檔相同的路徑：

http://www.colliope.com/birdpics/owl/pic01.jpg 
http://www.colliope.com/birdpics/owl/page.html 

我們會寫< img src="pic01.jpg" >

前面加上一個/

如果圖像具有相同的主機，但不同的路徑：

http://www.colliope.com/gifs/groovy14/button.gif 
http://www.colliope.com/birdpics/owl/page.html 

我們會寫< img src="/gifs/groovy14/button.gif" >