holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
etemplate/js/expose.js
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),

42
etemplate/templates/default/etemplate2.css
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{