You need to add
I have created a website ( www.babyalex.info/index.php?id=4 ) using ModX and want to use Maxi Gallery to manage my photos. The gallery is not linked on the main site at the moment, but if you set id=4 in the url you will see the main gallery page where i want to have to user choose the child gallery. If you look at this page, it should be obvious that there is a problem, in that the photo links to Gallery 1 and the photos shown from that gallery do not appear in the main content div, or rather the div does not expand behind the pics like it would with normal content. Any ideas on how to correct this?
<br style="clear:both"/>
The maxigallery galleryPictureTpl (see assets/snippets/maxigallery/templates folder, and wiki info about parameters that have "tpl" in them) is used for rendering individual picture element in the gallery overview view. Add the ’pic’ class there to the img tag. You can modify the default template or create a new one based on that and define it in the snippet call.
Secondly, if you use the link on the page for ’Pictures of Me’ (or, id=3), you will see that the manually setup pictures I have inserted have a nice frame around them. I have achieved this by using a class called ’pic’. How can I have the class ’pic’ applied to the generated images? Or, is there a different approach I should use to achieve the desired effect?
Create each gallery as separate document under the main gallery document. Then in the main gallery document, use this example to show only one picture in page, but all pics in slimbox picture set. Use the &gal_query_ids parameter or &view_gallery parameter to get each individual gallery to the page. You can also list the documents using Ditto and have the maxigallery calls in Ditto’s template to build an automated system. Then when you create new child gallery document, it will automatically be listed in the main gallery page. In the ditto template, use &gal_query_ids=`[+id+]` or &view_gallery=`[+id+]` to get the gallery.
In the end, what I would really like to have happen is this, though I am quite uncertain how to accomplish it:
I want the main page when going to photos to look similar to the current ’Pictures of Me’ page, but with each item a link to a child gallery, with some Text under it and possibly some hover over text also to describe the gallery. When a child gallery image is clicked, the user will see the embedded slimbox type view of the pictures in that gallery. Clicking on the picture in the slimbox view would display (probably in a new window) the largest resolution image for downloading.
title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]"
title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]<br/><a href='[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]' target='_blank'>Open large picture</a>"
You need to addOK, this worked well, thanks.
<br style="clear:both"/>
to your site template after [*content*] placeholder.
The maxigallery galleryPictureTpl (see assets/snippets/maxigallery/templates folder, and wiki info about parameters that have "tpl" in them) is used for rendering individual picture element in the gallery overview view. Add the ’pic’ class there to the img tag. You can modify the default template or create a new one based on that and define it in the snippet call.OK, this kinda worked. If you look at the page now ( www.babyalex.info/index.php?id=4 ) you will see that a small white box has been placed around the pictures, but there are still two problems:
In maxigallery default css, take the "border" declare out from this block:
1) The blue border, defined in the class ’pic’ does not show up. I am not sure if this is a css precedence issue or something else in the maxiGallery code.
ul.thumbs li img {
border: medium none;
margin: 0pt !important;
}
In maxigallery default css, add "background:none;" declare to this block:
2) There is a little golden dot that I cannot seem to find the source of. I would like to remove this. Any suggestions?
ul.thumbs li {
display: block;
float: left;
list-style-image: none !important;
list-style-position: outside;
list-style-type: none;
margin: 5px 5px 0pt !important;
}
[!MaxiGallery? &display=`childgalleries` &order_by=`pos` &limit=`1`!]
[!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &pics_per_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!]
[+maxigallery.embedtype:is=`slimbox`:then=` <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[maxigallery]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]<br/><br/><a href='[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]' target='_blank'>-- Open full size picture for saving</a>"> `+]
a, a:link {
text-decoration: none;
color: #fff;
}
a:visited { color: #fff; }
a:hover { color: #fff; text-decoration: underline; }
a:active { color: #c33; border-color: #c33 }
<a href='[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]' target='_blank'>
<a class='slimboxlink' href='[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]' target='_blank'>
a.slimboxlink, a.slimboxlink:link {
text-decoration: none;
color: #000000;
}
a.slimboxlink:visited { color: #000000; }
a.slimboxlink:hover { color: #000000; text-decoration: underline; }
a:active { color: #c33; border-color: #c33 }