8

1つの大きなページにたくさんの画像があるサイトがあります。

最も簡単なのは、同じページを自動的に検索し、100ピクセルを超えるすべての画像を使用してそれらからスライドショーギャラリーを作成する、私が含めることができるスクリプトです。

誰もがそのような簡単なスクリプトを知っています、それはプログラミングスキルを必要としませんか？

私は最初にこれを見つけました：

jQueryは、特定のサイズより大きい要素内のすべての画像を取得します

すべての画像をあるサイズより大きくするには、次のようなものを使用できます。

var allImages = $('img', yourDivElement)

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

アップデート：

さらに調査した結果、これが最も適切であることがわかりました：Fancybox Gallery

このページに実装する必要があります：

http://www.kathrinhoffmann.com/

4

5 に答える 5

3

それは本当にあなたの好きなライトボックス（「ギャラリーオープナー」）に依存します。ShadowBoxが好きだとしましょう。rel="shadowbox[gallery-name]"ギャラリー名はオプションである必要があります。シャドウボックスの楽しい面は、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);
    }
});

フィドル。

于 2013-05-19T07:34:34.147 に答える
3

画像の元の幅と高さを取得するために、次のようなことを試みましたか？

// 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' : '';
    }
});
于 2013-05-24T07:22:39.713 に答える
2

@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/

Bramが提案したように、ここにFancyboxギャラリーがあります。

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

于 2013-05-19T07:44:06.790 に答える
1

fancybox（すでに見つけた）画像を必要なマークアップでラップし、それらを次の場所に渡すことを妨げるものは何もありません。

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

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

このフィドルで動作中のデモを見ることができます（デモで画像を検索するためのルート要素として使用したことに注意してください。操作bodyするすべての画像を保持する要素にクラス/属性を追加して、代わりに使用することをお勧めします）。

于 2013-05-19T13:02:42.450 に答える
0

ありがとう、

私はそれを次のように解決しました：

私はfancyboxをダウンロードし、 kathrinhoffmann.comのページの下部にあるfancyboxの説明からこのコードを追加しました。

<!-- 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);
    }
});
于 2013-05-26T00:23:23.680 に答える