как: динамическая ширина div в зависимости от содержимого галереи - PullRequest
Новая
       31

как: динамическая ширина div в зависимости от содержимого галереи

0 голосов
/ 16 апреля 2011

http://portfolio.curiouslucious.com/?page_id=8

Я пытаюсь создать горизонтальную прокручивающуюся галерею (с отредактированной темой WordPress) В настоящее время у меня есть плагин nextGen Gallery, который управляет всеми моими изображениями.

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

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width:10000px;
overflow: hidden;
clear:both; 
display:inline-block !important;
}

/* ----------- Gallery style -------------*/

есть ли способ динамического изменения ширины в зависимости от количества изображений?

вот код stylesheet.css 

/* Blocks       */
#container { width:1000px; margin:25px 60px; }
#left-box { float:left; width:270px; margin-right:65px; }
#sidebar { float:right; text-align:right; }
#sidebar ul { text-align:right; list-style:none; }
#sidebar h3 { font-size:1em; }
#sidebar small { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }
#author_note { font-size:0.85em; width:220px; padding:5px; border:1px solid #CDCDCD; float:right; text-align:right; }
#notes { width:600px; float:left; margin-top:20px; overflow-x:auto; overflow-y:hidden;     height:500px; display:inline-block;}
#notes h1 { font-size:1.6em; font-weight:normal; margin:0; padding:0; }
#logo { float:right; margin-top:30px; }
#navigation { clear:right;float:right; width:270px; text-align:right; }
.copyright { margin-top:40px; color:#999999; } 
.copyright a { color:#666666; text-decoration:underline; }
.copyright .theme { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }    
.copyright .theme a { color:#999; text-decoration:none; }
.pages { margin-top:80px; font-size:1.1em; font-weight:200; }
.pages li { margin-top:5px; font-size:0.9em; }
.categories { margin-top:45px; font-size:0.85em; }
.links { margin-top:45px; font-size:0.85em; }
.navigation { margin-bottom:50px; font-size:0.85em; }

Я бы предпочел избегать JavaScript, если это возможно, поскольку я знаю, что у меня будут огромные проблемы с его реализацией. Но любая помощь будет оценена. Спасибо !!

Ответы [ 2 ]

1 голос
/ 17 апреля 2011

Если вам не нужна поддержка IE7, тогда вы можете подать заявку ... 

.theContent {
  display: table;
}

.ngg-galleryoverview {
  display: table-row;
  float: none;
}

ngg-gallery-thumbnail-box {
  display: table-cell;
  float: none;
}

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

0 голосов
/ 16 апреля 2011

Я не думаю, что вы пытаетесь сделать это с помощью чистого CSS.Я создал специальный плагин jQuery, который должен работать с вашим кодом.

Демонстрация: http://jsfiddle.net/wdm954/KHT32/4/

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

Код плагина jQuery ...

РЕДАКТИРОВАТЬ :: Исправления!

#scrollGal {
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
    padding: 15px;
}

#scrollGal img {
    float: left;
    margin: 0px;
    padding: 0px;
}

#scrollGal div {
    margin: 0px;
    padding: 0px;
}

#notes {
    overflow-x: visible;
    overflow-y: visible;
}

РЕДАКТИРОВАТЬ: Удалите div "scrollGal" из вашего HTML.Замените JS следующим (новый код обернет соответствующий div с div scrollGal) ... 

(function( $ ){
    $.fn.scrollGal = function() {
        return this.each(function() {

            $(this).wrap('<div id="scrollGal" />');
            $sg = $(this).parent();

            var obj = $(this).find('img');
            var arr = $.makeArray(obj);
            var w = 0, ww = 0, h = 0;
            $.each(arr, function(i, val) {
                w += $(this).width();
                w += (parseInt($(this).css('marginRight')));
                // find greatest width
                var nw = $(this).width();
                if (nw > ww) ww = nw;
                // find greatest height
                var nh = $(this).height();
                if (nh > h) h = nh;
            });
            $sg.width(ww);
            $sg.height(h);
            $sg.children('div').width(w);

        });
    };
})( jQuery );

$('#ngg-gallery-1-8').scrollGal();
...