I made some enchantments to stripped-galleria css. With other things I moved thumbnailes away for much cleaner wiew. You can try it yourself (this looks better with black version)
Problem is that now when thumbnails are away from view I want them much bigger. At the moment the thumbnails size is so small tahat it seems to be intended not for human use...
I cant do this with CSS so is it possible at all?
.galleria-image img {
border: 0px solid #000000;
border-radius: 0.2em 0.2em 0.2em 0.2em;
margin: 9px 0px 5px 0px;
/*padding: 25px;*/ /*not usable before image size fix*/
box-shadow: 0 0 20px rgba(255, 250, 250, 0.6), 0 0 20px rgba(255, 250, 250, 0.7) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.7) inset; /*inset is for padding settings only*/
display: block;
}
.galleria-thumbnails img {
border: 0px solid #000000;
border-radius: 0.2em 0.2em 0.2em 0.2em;
margin: 0px;
padding: 0px;
}
.galleria-thumbnails-container {
bottom: -4% !important;transition: bottom 1s ease-out 0s;/*not so good, % does not work well in different size monitors !important is used for IE*/
}
.galleria-thumbnails-container:hover {
bottom: 0 !important; /*again, !important is for IE*/
}
.galleria-stage {bottom:3% !important;}
.galleria-info {visibility: hidden;}
.thumbnailCategories li, .thumbnailCategories li:hover, .stuffs_block .personal_block ul.thumbnailCategories li, .stuffs_block .personal_block ul.thumbnailCategories li:hover, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.7) inset; /*inset is for padding settings only*/
display: block;
}
.ats .thumbnailCategory .illustration {
margin: 15px 0 0;
}
.ats .thumbnailCategory .description {
height: auto;
}
Offline
Hello
thx for sharing : do you have a live example?
For the picture size I read http://piwigo.org/dev/browser/extension … ls.tpl#L18 $stripped.thumbSize which means that you might have already options for that
Offline
You can try something like this in CSS:
.galleria-thumbnails .galleria-image {height:80px;} .galleria-thumbnails-container {height:90px;} .galleria-stage {bottom:120px;} .galleria-carousel .galleria-thumb-nav-right, .galleria-carousel .galleria-thumb-nav-left {margin-top:20px;}
The values I propose here are just examples.
80px -> The height of each thumbnail
90px -> The height of the thumbnail strip (5px margin top & bottom)
120px -> The total margin below image (that makes 30px more margin)
The last one is needed to center approximately thumb arrows in the thumbnail strip.
Offline
Thanks
Fixed my layout - goal was to hide everything but image. Thumbs are out of site now but still usable.
If somebody would know how to make thumbnails scroll not with clik but with hover would be nice :)
And of course If somebody wants save his time CSS is here...
.galleria-image img {
border: 0px solid #000000;
border-radius: 0.2em 0.2em 0.2em 0.2em;
margin: 9px 0px 5px 0px;
/*padding: 25px;*/ /*not usable before image size fix*/
box-shadow: 0 0 20px rgba(255, 250, 250, 0.6), 0 0 20px rgba(255, 250, 250, 0.7) inset;
-webkit-box-shadow: 0 0 20px rgba(255, 250, 0, 0.6), 0 0 20px rgba(255, 250, 250, 0.7) inset; /*inset is for padding settings only*/
display: block;
}
.galleria-thumbnails img {
border: 0px solid #000000;
border-radius: 0.2em 0.2em 0.2em 0.2em;
margin: 0px;
padding: 0px;
}
.galleria-thumbnails-container {
height:120px !important;
bottom: -75px !important;/*!important is used for IE*/
transition: bottom 1s ease-out 0s;
-webkit-transition: bottom 1s ease-out 0s;
}
.galleria-thumbnails-container:hover {
bottom: 0 !important; /*again, important is for IE*/
}
.galleria-thumbnails .galleria-image {height:85px!important;}
.galleria-thumbnails-list {bottom: -20px;}
.galleria-stage {bottom:20px !important;}
.galleria-info {visibility: hidden;}
.thumbnailCategories li, .thumbnailCategories li:hover, .stuffs_block .personal_block ul.thumbnailCategories li, .stuffs_block .personal_block ul.thumbnailCategories li:hover, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li, .subcontent .stuffs_block .personal_block ul.thumbnailCategories li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.7) inset; /*inset is for padding settings only - not in use here*/
display: block;
}
Offline
If you want more information on how galleria works, you can check this site:
http://galleria.io/
I just used their script...
You will see that there are other themes (that are not free, the one I used is the only free & open source one).
There is also a support forum where you can take some hints on how to customize it.
Offline