Community & Support

how to move the Galleria thumbnail to the left?

Hi there,

Is someone know how to move the Galleria thumbnail to the left?

example: http://devkick.com/lab/galleria/demo_02.htm

Comments

All in the CSS

You can do it with the css files. I looked at the code on the page you mentioned, then copied the default Galleria css into my style.css folder. I then made changes based on what I saw at the page you linked. Here is what my css looks like:

.item-list .galleria {
list-style:none;
width: 200px;
float: left;
}

.item-list .galleria li {
display:block;
width:50px;
height:65px;
overflow:hidden;
float:left;
margin:0 2px 2px 0;
background: #eee;
border:3px double #eee;
}

.item-list .galleria li.hover {
border-color:#bbb;
}

.item-list .galleria li.active {
border-style:solid;
border-color:#222;
}

.item-list .galleria li a {
display:none;
}

.item-list .galleria li div {
position:absolute;
display:none;
top:0;
}

.item-list .galleria li div img {
cursor:pointer;
}

.item-list .galleria li.active div img,
.item-list .galleria li.active div {
display:block;
}

.item-list .galleria li img.thumb {
cursor:pointer;
top:auto;
left:auto;
display:block;
width:auto;
height:auto;
}

.item-list .galleria li .caption {
display:block;
padding-top:.5em;
}

* html .item-list .galleria li div span { width:400px } /* MSIE bug */

.galleria-nav {
display: none;
}

.galleria_container {
margin:0 10px 60px 10px;
height:640px;
width:640px;
float:right;
}

I hope this helps.

Thanks!

I had this same problem and this worked great. I have one question, when you say you copied your Galleria css file into your style.css folder is this just to save a copy of the original?