Javascript圖庫自動使用所有大型圖像網頁

Question

我有一個網站在一個大頁面上有很多圖像。

最簡單的是我可以包含的腳本，它會自動搜索同一頁面，並使用大於100px的所有圖像從它們創建幻燈片庫。

任何人都知道這樣一個簡單的腳本，那不需要任何編程技巧？

我發現這一個開始：

jQuery get all images within an element larger than a specific size

要獲得所有圖片較大，一些大小，你可以使用這樣的事情：

var allImages = $('img', yourDivElement) 

var largeImages = allImages.filter(function(){ 
    return ($(this).width() > 70) || ($(this).height() > 70) 
}) 

---

更新：

一些研究之後，我發現這個最恰當不過了：Fancybox Gallery

應此頁上實現：

http://www.kathrinhoffmann.com/

Answer 1

感謝，

我解決了它這樣的：

我下載的fancybox並添加此代碼來自我的頁面底部的fancybox instructionskathrinhoffmann.com：

<!-- Add jQuery library --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

<!-- Add mousewheel plugin (this is optional) --> 
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> 

<!-- Add fancyBox --> 
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script> 

<!-- Optionally add helpers - button, thumbnail and/or media --> 
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="s$ 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script> 

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="sc$ 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
       $(".fancybox").fancybox(); 
     }); 
</script> 

然後我包括我自己的腳本：

<script type="text/javascript" src="/add_fancybox.js"></script> 

，看起來像這樣：

var img = $("img"), 
    a = "<a href='", 
    b = "' rel='group' class='fancybox'>"; 

img.each(function() { 
    var $this = $(this); 
    if ($this.width() > 50 && $this.height() > 50) { 
     $this.wrap(a + $this.attr("src") + b); 
    } 
}); 

Answer 2

這真的取決於什麼是你最喜歡的收藏夾（ 「畫廊開幕」）。假設你喜歡ShadowBox。它需要rel="shadowbox[gallery-name]"其中圖庫名稱是可選的。 shadowbox的好玩的一面是lightbox而不是shadowbox也可以。

然後，您需要做的是使用此rel屬性在圖像周圍添加鏈接標記。

var img = $("img"), 
    a = "<a href='", 
    b = "' rel='lightbox[", 
    galName = "chooseName", 
    c = "]'>"; 

img.each(function() { 
    var $this = $(this); 
    if ($this.width() > 100 || $this.height() > 100) { 
     $this.wrap(a + $this.attr("src") + b + galName + c); 
    } 
}); 

Fiddle。

Answer 3

@Bram Vanroy幾乎是正確的，但您需要注意實際尺寸（不受CSS等影響）和未加載圖像（這就是爲什麼我的過濾器需要回調以返回過濾圖像）：

http://jsfiddle.net/coma/wh44u/3/

$(function() { 

    $('img').filterBiggerThan(100, function(big) { 

     console.log(big); 

    }); 

}); 

$.fn.filterBiggerThan = function (limit, callback) { 

    var imgs = []; 
    var last = this.length - 1; 

    this.each(function(i) { 

     var original = $(this); 
     var img = $('<img/>') 
     .appendTo('body') 
     .css({maxWidth: 'none'}) 
     .load(function(event) { 

      if(img.width() > limit || img.height() > limit) { 

       imgs.push(original); 

      } 

      img.remove(); 

      if(i >= last) { 

       callback(imgs); 

      } 

     }); 

     img.attr('src', this.src); 

    }); 

}; 

這裏有一個例子：

http://jsfiddle.net/coma/NefFM/22/

這裏有一個的fancybox畫廊爲布拉姆建議：

http://jsfiddle.net/coma/NefFM/32/

Answer 4

沒有什麼阻止你與所需的標記包裹你的圖片（即你已找到），並通過EM到fancybox：

largeImages.each(function(){ 
    $(this).wrap('<a></a>').parent().attr({'rel':'gallery', href: this.src}); 
}); 

$('a[rel=gallery]').fancybox(); 

你可以看到在this fiddle的工作演示（注意我用body作爲根元素在演示找到圖片，你最好的一些類/屬性添加到包含所有你想工作，並用它代替圖像元素）。

Answer 5

您是否嘗試過做這樣的事情來獲得圖像的原始寬度和高度：

// loop through img elements 
$('.img-class').each(function(){ 

    // create new image object 
    image = new Image(); 

    // assign img src attribute value to object src property 
    image.src = $(this).attr('src'); 

    // function that adds class to image if width and height is greater that 100px 
    image.onload = function(){ 

     // assign width and height values 
     var width = this.width, 
      height = this.height; 

     // if an image is greater than 100px width and height assign the 
     // string fancybox to image object className property 
     image.className = (width > 100 && height > 100) ? 'fancybox' : ''; 
    } 
});