Оформленията получават допълнителна рамка

Опитвам се да получа изображение/фотогалерия с пълна ширина с изотоп. Проблемът ми е, че Isotope добавя някои допълнителни пиксели около всяко изображение, когато се зарежда за първи път, така че има черна рамка около всяко изображение. Когато преоразмеря прозореца си, границите изчезват и когато го преоразмеря обратно на цял екран, той също се показва без граници.

Просто искам да получа изображенията едно до друго без никакви граници, но всичко, което опитвам, не работи.

Можете да видите как работи тук: връзка

html код:

<div class="isotope">
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-4.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/animals-q-c-200-200-5.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-5.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item large"><img src="http://lorempixel.com/output/animals-q-c-400-400-6.jpg" width="400" height="400" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/animals-q-c-200-200-4.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/city-q-c-200-200-10.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item large"><img src="http://lorempixel.com/output/animals-q-c-400-400-7.jpg" width="400" height="400" alt="beest"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/city-q-c-200-200-9.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/animals-q-c-200-200-2.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item large"><img src="http://lorempixel.com/output/city-q-c-400-400-8.jpg" width="400" height="400" alt="stad"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-6.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item"><img src="http://lorempixel.com/output/animals-q-c-200-200-3.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-7.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item"><img src="http://lorempixel.com/output/animals-q-c-200-200-1.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" width="200" height="200" alt="stad"/></div>
</div>

javascript код:

$.noConflict();
jQuery( document ).ready(function( $ ) {

    var $container = $('.isotope').imagesLoaded( function() {
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'packery'
        });
    });  
});

css код:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    background: #000;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.isotope {
    width: 100%;
}

/* ---- .item ---- */

.grid-sizer {
    width: 10%;
}

.item {
    float: left;
    width: 10%;
    height: auto;
    background: #000;
    border: 0;
}

.item.med {
    width: 20%;
    height: auto;
}

.item.large { 
    width: 40%;
    height: auto; 
}

.item img {
    width: 100%;
    height: auto;
}

Ширината на html елементите е правилна, но когато проверя css в браузъра Isotope добавя някои допълнителни пиксели към лявата и горната позиция на елементите. Дано някой може да ми помогне?

Редактиране:

Изглежда, че работи добре на мобилни устройства и таблети. Може би има нещо общо с

<meta name="viewport" content="width=device-width, initial-scale=1">

в заглавката на html?


html jquery jquery-isotope
person Martijn Bastiaansen    schedule 25.03.2015    source източник
comment
Пробвал ли си без ImageLoaded? Все още ли прави същото? Подозирам, че това е проблемът   -  person StudioTime    schedule 26.03.2015
comment
Не проработи. imagesLoaded е необходим, в противен случай оформлението е объркано, защото няма височина на елементите. С imagesLoaded isotope просто рендерира, когато всички изображения са заредени и всички елементи имат настройките за ширина и височина   -  person Martijn Bastiaansen    schedule 26.03.2015
comment
Да, разбирам - предполагам, че нямате размерите на изображението   -  person StudioTime    schedule 27.03.2015
comment
Само максимална ширина и височина, но изобразяването на височината зависи от ширината, така че не мога да взема фиксирани размери. И проблемът беше с опцията за изотопно оформление. Проблемът съществува, когато извадих заредените изображения   -  person Martijn Bastiaansen    schedule 27.03.2015

Отговори (2)


arrow_upward
0
arrow_downward

Това може да не е толкова решение, колкото работа, но си поиграх с това известно време и изглежда, че може просто да се наложи да се обадите на Изотопно оформление след инициализиране на контейнера. Не знам защо е така, поради което това не е истинско решение.

Ето работеща цигулка. Актуализирах jQuery до това, елиминирайки „packery“, тъй като продължаваше да ми дава грешка в цигулката:

$.noConflict();
jQuery( document ).ready(function( $ ) {

var $container = $('.isotope')
    $container.isotope({
        itemSelector: '.item',
        // layoutMode: 'packery'
    });

$container.isotope('layout');

});`

Още нещо, което трябва да имате предвид, ако ще използвате проценти за колоните, е използването на оформлението на Masonry и задаване на изрични стойности за ширините на вашите колони.

person Pixelsmith    schedule 26.03.2015

arrow_upward
0
arrow_downward

Благодаря на Pixelsmith, че ме насочи в правилната посока. Трябва да променя малко вашия jQuery, но извикването на изотопното оформление свърши работа през по-голямата част от частта. Моят jquery сега изглежда така:

$.noConflict();
jQuery( document ).ready(function( $ ) {

    $('.isotope').imagesLoaded( function() {
        var $container = $('.isotope');
        $container.isotope({
            layoutMode: 'packery',
            packery: {
                columnWidth: '.grid-sizer'
            },
            itemSelector: '.item'
        });
        $container.isotope('layout');
    });
});

Извикване на imagesLoaded, така че ширината и височината на елементите са правилни и изотопът функционира добре. За моя проект packery е по-добър от masonry, защото packery запълва всички празнини, masonry просто търси първата възможна празнина и не запълва празни празнини.

person Martijn Bastiaansen    schedule 26.03.2015
comment
Чудесно е да чуя, че сте се справили! Сега разбирам, че Packery изисква допълнителен пакет, поради което не работеше за мен. Все още съм заинтригуван защо това второ обаждане е необходимо, но може би някой с по-големи умения в jQuery/Isotope може да ме насочи някой ден. - person Pixelsmith; 27.03.2015
comment
Мисля, че някъде елемент се променя, докато Isotope се зарежда, така че оформлението трябва да се изчисли отново. Когато отворя сайта си за тестване сега, първо виждам границите и за част от секундата виждам изображенията да се приближават едно до друго. - person Martijn Bastiaansen; 27.03.2015