If you are already familiar with MODx, and added the maxigallery snippet inside the MODx manager, here’s a quick fix using CSS.

First, you have to use a snippet call for the gallery page
[!MaxiGallery? &display=`childgalleries`!]

And add this to subpages
[!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &pics_per_row=`3` &max_thumb_size=`180` &max_pic_size=`0` &manager_webgroups=`Editors`!]

You can change the thumbnail size&max_thumb_size=`180`anyway you like.

edit line 54-62 of galleryoutertpl.html
http://mysite.com/assets/snippets/maxigallery/templates/galleryoutertpl.html

[+maxigallery.embedtype:isnot=`smoothgallery`:then=`
[+maxigallery.pictures:isnot=``:then=`
<div class="thumbscontainer">
<ul class="thumbs">
[+maxigallery.pictures+]
</ul>
</div>
`+]
`+]

with this

[+maxigallery.embedtype:isnot=`smoothgallery`:then=`
[+maxigallery.pictures:isnot=``:then=`
<div class="thumbscontainer">
<div class="masker">
<ul class="thumbs">
[+maxigallery.pictures+]
</ul>
</div>
</div>
`+]
`+]

and added this to my css style

.thumbscontainer {
float:left;
margin-bottom:20px;
}

.masker li{
float:left;
height:100px;
overflow:hidden;
padding:10px;
width:100px;
}
.masker a img {
border:medium none;
}
.masker a:hover img {
opacity:0.7;
}
.masker {
margin-bottom:-5px;
width:450px;
}
ul.thumbs li {
display:block;
float:left;
list-style-image:none !important;
list-style-position:outside;
list-style-type:none;
margin:0px 0px 0pt !important;
}
ul.thumbs {
clear:both;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
ul.thumbs li img {
border:medium none;
margin:0pt !important;
}
ul.thumbs li a {
background:transparent none repeat scroll 0% !important;
border:0pt none;
text-decoration:none;
}
ul.thumbs li p {
overflow:hidden;
}
.thumbs .clearboth {
clear:both;
}
Advertisements