Javascript 如何为galleria大形象添加边框?

Javascript 如何为galleria大形象添加边框?,javascript,jquery,css,jquery-plugins,galleria,Javascript,Jquery,Css,Jquery Plugins,Galleria,嗨,我想给galleria big image添加一个边框。我怎么能给你这个 我就这样给你 div.galleria-image img{ border: 5px solid #ccc; } 但它会剪切右边框或下边框,并为拇指尾图像显示上边框 这是我的css文件 .galleria-container{position:relative;overflow:hidden; height:570px; margin-bottom:30px; } .galleria-thumbnails-conta

嗨,我想给galleria big image添加一个边框。我怎么能给你这个

我就这样给你

div.galleria-image img{ border: 5px solid #ccc; }
但它会剪切右边框或下边框,并为拇指尾图像显示上边框

这是我的css文件

.galleria-container{position:relative;overflow:hidden; height:570px; margin-bottom:30px; }
.galleria-thumbnails-container { }
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;}
.galleria-stage{position:absolute;top:10px;bottom:80px;left:0px;right:10px;overflow:hidden;}
div.galleria-stage img { border: 1px solid red; }
.galleria-thumbnails-container{height:65px;bottom:0;position:absolute;left:0px;right:10px;z-index:2;}
.galleria-carousel .galleria-thumbnails-list{margin-left:30px;margin-right:30px;}
.galleria-thumbnails .galleria-image{height:50px;width:60px;background:#fff;margin:0 13px 0 0; float:left;cursor:pointer;}
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2; }
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(images/classic-loader.gif) no-repeat 2px 2px; }
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;}
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;}
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;}
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb; }
.galleria-info-title+.galleria-info-description{margin-top:7px;}
.galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;}
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;}
.galleria-info-link:hover,
.galleria-info-close:hover{opacity:.5; }
.galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0; }
.galleria-image-nav-left,
.galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;}
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover{opacity:1.0;}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 11px;position:absolute;left:0;top:0;height:60px;width:23px;z-index:3;opacity:1.0;}
.galleria-thumb-nav-right{background-position:-578px 11px;border-right:none;right:0;left:auto;}
.galleria-thumbnails-container .disabled,
.galleria-thumbnails-container .disabled:hover{opacity:.6;cursor:default; }
.galleria-thumb-nav-left:hover,
.galleria-thumb-nav-right:hover{opacity:1;/*background-color:#111;*/}
.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right{display:block; }
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right{background-image:url(images/classic-map.png);background-repeat:no-repeat;}
div.galleria-image img{ border: 5px solid #ccc; }

任何人都知道解决办法,请帮帮我

尝试添加
边框:1px纯红色
div.galleria-image img

galleria-image分区图像{边框:1px 纯红;}

编辑:看起来上面的CSS会导致缩略图也有边框

试试这个:


凯丹广场分区舞台img{边框:1px实心红色;}


尝试添加
边框:1px纯红色
div.galleria-image img

galleria-image分区图像{边框:1px 纯红;}

编辑:看起来上面的CSS会导致缩略图也有边框

试试这个:


凯丹广场分区舞台img{边框:1px实心红色;}

调用galleria()时,将image_margin选项设置为2(注意:当我尝试使用1时,底部的边距被截断)。这就是我使用的:

$('#gallery').galleria({
    autoplay: 5000,
    data_source: slides,
    pause_on_interaction: false,
    transition: 'fade',
    image_margin: 2
});
我的网站的css文件具有以下定义,可将1px的灰色边框添加到大型图像中:

.凯丹广场{ 边框:1px实心#中交; }

调用galleria()时,将image_margin选项设置为2(注意:当我尝试使用1时,底部的边距被截断)。这就是我使用的:

$('#gallery').galleria({
    autoplay: 5000,
    data_source: slides,
    pause_on_interaction: false,
    transition: 'fade',
    image_margin: 2
});
我的网站的css文件具有以下定义,可将1px的灰色边框添加到大型图像中:

.凯丹广场{ 边框:1px实心#中交;
}

您需要显示父div的溢出。我遇到了这个问题,我添加了这个问题,效果很好

·加莱里亚货柜{
溢出:可见!重要;
}
.galleria图像,.galleria舞台{
溢出:可见!重要;
}
.galleria舞台。galleria images。galleria img{
边框:1px实心#333333;
}

您需要显示父div的溢出。我遇到了这个问题,我添加了这个问题,效果很好

·加莱里亚货柜{
溢出:可见!重要;
}
.galleria图像,.galleria舞台{
溢出:可见!重要;
}
.galleria舞台。galleria images。galleria img{
边框:1px实心#333333;
}

似乎需要将imageMargin选项设置为应该设置的两倍


就像我一直试图在它周围放置一个6px的边框,底部一直被切断,直到我将imageMargin设置为12。

看起来imageMargin选项需要设置为它应该设置的两倍


就像我一直在尝试在它周围放置一个6px的边框,底部一直被切断,直到我将imageMargin设置为12。

例如,如果您的边框是4px,那么您应该将imageMargin变量设置为8,如果边框是8px,那么将其设置为16(因为您有两条边,所以是双边)


例如,如果边框为4px,则应将image_margin变量设置为8;如果边框为8px,则应将其设置为16(因为有两条边,所以为双精度)


您好,先生,如果这样,它会在galleria缩略图设计上创建一个上边框。好的,先生,但主图像右边框没有显示。怎么办?div.galleria-stage img{border:1px纯红;}这不起作用您好,先生,如果这样,它会在galleria缩略图设计上创建上边框。好的,先生,但主图像右边框没有显示。该怎么办?div.galleria-stage img{边框:1px纯红;}这不起作用