simple JS to change Picture

Image 01

Description Image 01

Hi everybody!

This is a small collection of different Maxigallery Setups for "Picture & Thumbnails on the same page", which can be found on the MaxiGallery Wiki-page. Most of the solutions shown here can be found in the MODx-forum, but since most of these are somehow scattered and incomplete, i thought it would be great to merge and have them in one place. If you got any suggestions, improvements etc., let me know and i'll update this website and the forum-thread.

We'll start on this page with the setup featured on the Wiki-page, then go step by step further by adding functionality and effects, and finally a different approach of the setup using the Galleria script.

For these examples i use MaxiGallery Version 0.6 (test), which can be downloaded here. The snippet code is the same as for the current release of MaxiGallery Version 0.52 which you can grab here. Follow the installation instructions on the Wiki-page.

Setup 01 - simple JS to change the picture

this Setup is the one you'll find in the Wiki + the fix for the IEs found in this forum thread.

okay, let's start...

1. Setting up the gallerymanager-document

This will be the document which holds your MaxiGallery-call that we use to manage our galleries, so when you setup a gallery on a page and click on the "manage picture"-button, you'll be redirected to this page, where you can upload the pictures, sort them an add the title-, and description-text. Tick-off "Show in menu". The MaxiGallery call on this page will be:

[!MaxiGallery? &max_pic_size=`420x320` &max_thumb_size=`60x45` &is_target=`1` &max_pic_number=`6`!]

according to the call, our picture will be 420px wide and 320px high, the thumbnails 60px x 45px, we'll limit the number of uploadeable pictures to 6 and &is_target=`1` determines that the document is the target for picture manager mode.

2. Now, we'll create all necessary Chunks:

"mgGalleryOuter01" will be the template to display the gallery overview.

[+maxigallery.managebutton:isnot=``:then=`[+maxigallery.managebutton+]<br />`+]
[+maxigallery.pictures+]

"mgPicture01" is the template for our picture and the picture-title + description on top of it:

<p id="maxTitle">[+maxigallery.picture.title:htmlent+]</p>
<p id="maxDescr">[+maxigallery.picture.descr:htmlent+]</p>
<div id="picturecontainer">
<img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" />
</div>

"mgGalleryPicture01" will be the template for the thumbnails:

<div class="hoverthumb">
<a href="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+])">
<img class="thumbnail" title="[+maxigallery.picture.title:htmlent+]" src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" />
</a></div>

create a javascript-file and name it "js-setup01.js" for example, put it in your template-folder (or somewhere else, we just need the right path when we call the file). Content of the javascript-file is:

function showPic(url,title,descr,width,height) {
       var img = document.getElementById('maxImage');
       var titleHolder = document.getElementById('maxTitle');
       var descrHolder = document.getElementById('maxDescr');
      var newImg = new Image();
      newImg.onLoad = doImage(img,url,width,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("");
               }
               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("");
               }
               descrHolder.appendChild(node);
       }
}
 
function doImage(img,url,width,height) {
img.src=url;
}

3. setting up the MaxiGallery-calls and placing them in the template

This is the call for the picture. Place it in your template where you want the picture to appear:

[!MaxiGallery? &pictureTpl=`mgPicture01` &display=`pictureview` 
&max_pic_size=`420x320` &max_thumb_size=`60x45` &js=`assets/..path to your javascript-file.../js-setup01.js`!]

you see we call the templates we created earlier, "display=`pictureview`" is the gallery display-mode, and "&js=`...`" will place our javascript-file in the template, we could do the same with a gallery specific css-file by calling it with "&css=``. I kept the css for these example quite easy, so you can check the styling here: "/assets/templates/styles.css" and use it as a starting point for your own galleries...

one more thing we need is the MaxiGallery-call for the thumbnails:

[!MaxiGallery? &galleryOuterTpl=`mgGalleryOuter01` &galleryPictureTpl=`mgGalleryPicture01` &manage_target=`2`!]

it's actually just the call for the thumbnail template, and very important: "manage_target=`2`" will be the document ID of the document where we placed the MaxiGallery-call to manage our galleries

that's it, create a document with a template that holds our MaxiGallery-calls, save it, click on "manage picture", upload the pictures: voilà - you got your "Thumbnails and Picture on one Page"-gallery :)

next setup will use jQuery for effects and changing the pictures ->