Галерея Javascript, которая автоматически использует все большие изображения на странице

У меня есть сайт с большим количеством изображений на одной большой странице.

самым простым был бы скрипт, который я мог бы включить, который автоматически выполняет поиск по той же странице и использует все изображения размером больше 100px для создания галереи слайд-шоу из них.

кто-нибудь знает такой простой скрипт, который не нуждается в каких-либо навыках программирования?

Я нашел это для начала:

jQuery получить все изображения в элементе больше, чем a конкретный размер

чтобы получить все изображения большего размера, вы можете использовать что-то вроде этого:

var allImages = $('img', yourDivElement)

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

обновление:

после еще нескольких исследований я нашел это наиболее подходящим:Галерея Fancybox

Он должен быть реализован на этой странице:

http://www.kathrinhoffmann.com/

8
image-gallery javascript jquery

5 ответов

Это действительно зависит от того, что ваш любимый лайтбокс (галерея"открывашка"). Допустим, вам нравится 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);
    }
});

Скрипка.

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' : '';
    }
});
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/

2

ничто не мешает вам обернуть ваши изображения (которые вы уже нашли) с необходимой разметкой и передать их в fancybox:

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

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

вы можете увидеть рабочую демо в эта скрипка (будьте осторожны, я использовал body как корневой элемент для поиска изображений в демо, вам лучше добавить класс/атрибут к элементу, который содержит все изображения, с которыми вы хотите работать, и использовать его вместо этого).

1

спасибо,

я решил это так:

Я скачал fancybox и добавил этот код инструкции fancybox в нижней части моей страницы в kathrinhoffmann.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);
    }
});
0