Ok, so last night I took a deep breath and tried again.
First I tried installing the MaxiGallery from the trunk and then used the snippet code from MaxiGallery version 0.5.2. (I can’t find the actual snippet code in the trunk?)
But I couldn’t make it work with the wiki example
http://wiki.modxcms.com/index.php/MaxiGallery#Picture_and_thumbnails_on_same_page
I didn’t really get any errors, just a page with a manager button that wasn’t working.
Anyways, I then downloaded MaxiGallery from modxcms.com/downloads and used that one instead.
Now everything is working just fine.
I realized that I don’t really have a need for customFields at the moment, since the title and description field is sufficient enough.
The only problem I have now is making MaxiGallery format html code in the two fields.
I tried removing the PHx modifier :htmlent in the [+maxigallery.picture.title:htmlent+] and [+maxigallery.picture.descr:htmlent+] .
When you enter the page it displays the html just fine, but if you then click on another image, that’s where things start to go wrong. When I click on another image where no html is added it works, but then I can’t go back to the first image with the html code in the title - and description field.
Maybe this doesn’t make any sense at all, in that case you can have a look here:
http://dev.ziestha.dk/kids. And yes, I know that the use of tables is probably gonna hurt your eyes, but unfortunately I haven’t done the design so that wasn’t up to me.
Here is my setup:
Snippets:
[!MaxiGallery? &galleryPictureTpl=`mgGalleryPicture` &galleryOuterTpl=`mgOuterGallery` &manage_target=`187` &js=`mgJs`!]
[!MaxiGallery? &pictureTpl=`mgPicture` &display=`pictureview`!]
Chunks:
mgGalleryPicture
<li>
<a href="javascript:void(0);"
onClick="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+]);return
false;">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
class="thumbnail" title="[+maxigallery.picture.title:htmlent+]"
alt="[+maxigallery.picture.title:htmlent+]" />
</a>
</li>
mgOuterGallery
<table class="mgThumbscontainer" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="mgThumbs">
<ul class="thumbs">
[+maxigallery.pictures+]
</ul>
<div style="clear: both;">
<p>[+maxigallery.managebutton+]</p>
{{mgMenu}}
</div>
</td>
mgPicture
<td id="mgInfoBox">
<h1 id="mgTitleBox">
[+maxigallery.picture.title+]
</h1>
<p id="mgDescrBox">
[+maxigallery.picture.descr+]
</p>
</td>
<td class="picturecontainer">
<img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" />
</td>
</tr>
</table>
mgJs
<script type="text/javascript">
function showPic(url,title,descr,width,height) {
var img = document.getElementById('maxImage');
var titleHolder = document.getElementById('mgTitleBox');
var descrHolder = document.getElementById('mgDescrBox');
img.src=url;
img.width=width;
img.height=height;
if (titleHolder != null) {
for (var i = 0; i < titleHolder.childNodes.length; i++) {
titleHolder.removeChild(titleHolder.childNodes[i]);
};
if (title != "") {
var node=document.createTextNode(title);
}
else {
var node=document.createTextNode(title);
}
titleHolder.appendChild(node);
}
if (descrHolder != null) {
for (var i = 0; i < descrHolder.childNodes.length; i++) {
descrHolder.removeChild(descrHolder.childNodes[i]);
};
if (descr != "") {
var node=document.createTextNode(descr);
}
else {
var node=document.createTextNode(descr);
}
descrHolder.appendChild(node);
}
}
</script>
If you are still reading then thank you.
thanks, larsb