Set thumbnailWithImgTag to true to get thumbnail indicators as img tag in order to be able to set right image size ratio

This commit is contained in:
Hadi Nategh 2015-01-28 17:45:10 +00:00
parent dd7b4dec55
commit 20c482cc87
2 changed files with 25 additions and 19 deletions

View File

@ -307,6 +307,8 @@ function expose (widget)
thumbnailProperty: 'thumbnail', thumbnailProperty: 'thumbnail',
// Defines if the gallery indicators should display a thumbnail: // Defines if the gallery indicators should display a thumbnail:
thumbnailIndicators: true, thumbnailIndicators: true,
//thumbnail with image tag
thumbnailWithImgTag: true,
// Callback function executed when the Gallery is initialized. // Callback function executed when the Gallery is initialized.
// Is called with the gallery instance as "this" object: // Is called with the gallery instance as "this" object:
onopen: jQuery.proxy(this.expose_onopen,this), onopen: jQuery.proxy(this.expose_onopen,this),

View File

@ -1774,36 +1774,40 @@ span.et2_egw_action_ddHelper_itemsCnt {
/*Carousel thumbnails*/ /*Carousel thumbnails*/
.blueimp-gallery>.indicator>li { .blueimp-gallery>.indicator>li {
display: inline-block; display: inline-block;
width: 134px; width: auto;
height: 100px; height: 100px;
margin: none; margin: 0;
-webkit-box-sizing: content-box; background: transparent;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid transparent;
background: #ccc;
background: rgba(255, 255, 255, 0.17)center no-repeat;
border-radius: 5px;
box-shadow: 0 0 2px #000;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
background-repeat: no-repeat; border-radius: 0;
margin: 1px;
border:0; border:0;
background-size: content;
} }
.blueimp-gallery > .indicator > li > img {
display: inline-block;
width: auto;
height: 100px;
margin:0;
cursor: pointer;
z-index: -1;
position: relative;
}
/*Thumbnail border on hover*/ /*Thumbnail border on hover*/
.blueimp-gallery>.indicator>li:hover { .blueimp-gallery>.indicator>li:hover {
-webkit-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1); -webkit-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1); -moz-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1); box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
background: transparent;
} }
/*Active thumbnail border*/ /*Active thumbnail border*/
.blueimp-gallery>.indicator>.active .blueimp-gallery>.indicator>.active
{ {
-webkit-box-shadow: inset 0px 1px 0px 4px #0c5da5; -webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5;
-moz-box-shadow: inset 0px 1px 0px 4px #0c5da5; -moz-box-shadow: inset 0px 0px 0px 4px #0c5da5;
box-shadow: inset 0px 1px 0px 4px #0c5da5; box-shadow: inset 0px 0px 0px 4px #0c5da5;
background: transparent;
} }
/*Slideshow Play/Pause button*/ /*Slideshow Play/Pause button*/
.blueimp-gallery>.play-pause{ .blueimp-gallery>.play-pause{