VPF::два div по горизонтали - Форум программистов

armor85

Дата 29.2.2008, 16:42 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

Здравствуйте,

использую плагин для jquery, называется jqGalViewII.
Это обычная галерея для картинок,
там два дива создаются один под другим, в верхнем
сама картинка, а в нижнем превью.
Как сделать так, чтобы дивы создавались не один под другим,
а рядом на одной линии?

вот код стиля:

Код


    .gvIIContainer{
        width:500px;
        position:relative;
        background:#000;
        padding:5px 0 5px 5px;
        /*border:10px solid #fff;*/
    }
    .gvIIContainer .gvIIImgContainer{
        width:490px;
        height:385px;

    }
    .gvIIContainer .gvIIImgContainer .gvIILoader{
        background: url(/MAINSITE/images/rel_interstitial_loading.gif) no-repeat center center;
        width:490px;
        height:385px;
        display:none;
    }
    .gvIIContainer .gvIIHolder{
        position:relative;
        height:207px;
        width:490px;
        overflow:auto;
    }

    .gvIIContainer .gvIIHolder .gvIIItem{
        float:top;
        height:55px;
        width:72px;
        border:5px solid #fff;
        margin:2px;
        position:relative;
        overflow:hidden;
    }
    .gvIIContainer .gvIIHolder .gvIIItem .gvIIFlash{
        background:#fff;
        position:absolute;
        top:0;
        left:0;
        height:55px;
        width:72px;
        cursor:pointer;
    }
    .gvIIContainer .gvIIHolder .gvIIItem img{
        position:absolute;
        top:0;
        left:0;
        padding:0;
        margin:0;
        margin-left:0;
        margin-top:0;
        border:none;
        cursor:pointer;
    }

Это сам скрипт.

Код


(function($){
    $.fn.jqGalViewII = function(options){
        return this.each(function(index){
            var el = this, $_ = $(this); $img = $('img', $_);
            el.opts = $.extend({}, $.fn.jqGalViewII.defaults, options);
            //  swap out current image gallery for jqGalView structure
            var $this = $.fn.jqGalViewII.swapOut($_);
            
            var $container = $('<div class="gvIIContainer">').appendTo($this);

            el.mainImgContainer = $('<div class="gvIIImgContainer">').appendTo($container);
            el.image = $('<img/>').appendTo(el.mainImgContainer);
            el.loader = $('<div class="gvIILoader"/>').appendTo(el.mainImgContainer);
            //  Build our holder for the thumbnail images
            var $holder = $('<div class="gvIIHolder"/>').appendTo($container);
            
            var $arrow = $('<div class="gvIIArrow"/>');

            //  remove current images and replace with jqGalview
            $(this).after($this).remove();
            
            $img.each(function(i){
                var $image = $(this);
                
                var $div = $('<div id="gvIIID'+i+'" class="gvIIItem">')
                .appendTo($holder)
                .append('<div class="gvIILoaderMini">');// end : $div
                
                if(el.opts.getUrlBy == 0)
                    this.altImg = $image.parent().attr('href');
                else if(el.opts.getUrlBy == 1)
                    this.altImg = el.opts.fullSizePath + this.src.split('/').pop();
                else if(el.opts.getUrlBy == 2)
                    this.altImg = $this.src.replace(el.opts.prefix,'');
                
                this.altTxt = $image.attr('alt');
                
                var image = new Image();
                image.onload = function(){
                    image.onload = null;
                    $div.empty().append($image);
                    $('<div class="gvIIFlash">').appendTo($div).css({opacity:".01"})
                    .mouseover(
                        function(){
                            var $f = $(this);
                            $f.css({opacity:".75"}).stop().animate({opacity:".01"},500);

                        }
                    )
                    .click(
                        function(){
                            $image.trigger('click');
                        }
                    );
                    $image.click(function(){
                        $.fn.jqGalViewII.view(this,el);           
                    });
                    if(i==0){
                        $image.trigger('click');
                        $image.siblings().trigger('mouseover');
                    }
                };// end : image.onload 
                image.src = this.src;
            });
            
            $arrow.appendTo($holder);
        });
    };
    
    $.fn.jqGalViewII.view = function(img,el){
        if(typeof img.altImg == 'undefined') return false;
        var url = /\?imgmax/.test(img.altImg) ? img.altImg : img.altImg+'?imgmax=800';
        var $i_wh = {}; // 
        var $i_whFinal = {}; // 
        var wContainer, hContainer;
        var $w, $h, $wOrg, $hOrg, isOver = false; 

        el.loader.show();

        wContainer = el.mainImgContainer.width();
        hContainer = el.mainImgContainer.height();
        el.mainImgContainer.show();
        
        el.image.attr({src:url}).css({top:0,left:0,position:'absolute'}).hide();
        $img = new Image();
        $img.onload = function(){
            $img.onload = null;
            $w = $wOrg = $img.width;
            $h = $hOrg = $img.height;

            if ($w > wContainer) {
                $h = $h * (wContainer / $w); 
                $w = wContainer; 
                if ($h > wContainer) { 
                    $w = $w * (hContainer / $h); 
                    $h = hContainer; 
                }
            } else if ($h > hContainer) { 
                $w = $w * (hContainer / $h); 
                $h = hContainer; 
                if ($w > wContainer) { 
                    $h = $h * (wContainer / $w); 
                    $w = wContainer;
                }
            }

            el.image.css({width:$w,height:$h, marginLeft:(wContainer-$w)*.5,marginTop:(hContainer-$h)*.5})
            el.loader.fadeOut('fast',function(){el.image.fadeIn();});
        };
        $img.src = url;
        
    };
    $.fn.jqGalViewII.swapOut = function($el){
        var id = $el.attr('id') ? (' id="'+$el.attr('id')+'"') : '';
        var $this = $('<div' + id + '>');
        return $this;
    };
    
    $.fn.jqGalViewII.defaults = {
        getUrlBy : 0, // 0 == from parent A tag | 1 == the full size resides in another folder
        fullSizePath : null,
        prefix: 'thumbnail.',
        arrowEase:'easeout'
    };
})(jQuery);

Munya

Дата 29.2.2008, 16:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 15.2.2007

Репутация: нет
Всего: нет

Можно вот так например:

Код


<div style="width:210px">
<div style=" width:100px; height:200px; border:1px solid #0033CC; float:right"></div>
<div style=" width:100px; height:200px; border:1px solid #0033CC; float:left"></div>
</div>

или вот так, но тогда div превратится в span

Код


<div style="width:210px">
<div style=" width:100px; height:200px; border:1px solid #0033CC; display:inline;"></div>
<div style=" width:100px; height:200px; border:1px solid #0033CC; display:inline;"></div>
</div>

armor85

Дата 29.2.2008, 17:00 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

Так я сам могу.

Я именно в этом примере разобраться не могу.

DE20

Дата 1.3.2008, 13:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 9.2.2008

Репутация: 1
Всего: 1

Измененные CSS блоки:

Код


 .gvIIContainer{
        width:600px; /* здесь ширину подходящую, чтобы 2-е колонки влезли*/
        position:relative;
        background:#000;
        padding:5px 0 5px 5px;
        /*border:10px solid #fff;*/
    }
    .gvIIContainer .gvIIImgContainer{
        width:490px;
        height:385px;
float: left; /*<---*/

    }

    }
    .gvIIContainer .gvIIHolder{
        position:relative;
        height:490px;
        width:140px; /*ширина div превью*/
        overflow:auto;
float: left; /*<---*/
    }

Это сообщение отредактировал(а) DE20 - 1.3.2008, 13:32

armor85

Дата 1.3.2008, 16:16 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

DE20, всё равно хрен знает что получается.
Может как-то сам скрипт разделить, на отдельные
дивы, а их уже по ячейкам таблицы раскидать?

Sardar

Дата 1.3.2008, 16:33 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

armor85, не переношу топик в вёрстку только потому, что контент генеришь используя jQuery. Вопрос же по сути чисто по вёрстке. Лучше всего использовать таблицу.

Как вариант float: left предложенный DE20, но помни, такие плавающие слои не задают высоту родительскому div'у, тот попросту схлопнеться если ничего кроме плавающих слоёв в нём нет. Оба слоя налезут тогда на всё, что идёт дальше. Что бы это предотвратить, нужно поставить высоту .gvIIContainer{ height: 490px; }

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »