[!MaxiGallery? &galleryPictureTpl=`mgGalleryPicture` &js=`mgJs` &manage_target=`58`!] [!MaxiGallery? &js=`mgJsPop` &galleryPictureTpl=`mgGalleryPicture2` &picture_target=`61` &limit=`1`!]
1. Add parameter to the showPic function for picture ID.How do I get the picId parameter set? I think I understand the rest of it, but I’m stuck on this step.
2. Add link to the picture element, eg. around <img id="maxImage"... with some ID.
like this?
<a href="javascript:void(0);" onClick="javascript:openWindow('[+maxigallery.picture_link_url+]');return
false;" id=maxImageId><img id="maxImage"
src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
alt="[+maxigallery.picture.title:htmlent+]" /></a>
You add picId variable to the javascript function, and in your custom maxigallery galleryPictureTpl template where it creates the links to change the picture, you use [+maxigallery.picture.id+] as the value for the picId parameter..
1. Add parameter to the showPic function for picture ID.How do I get the picId parameter set? I think I understand the rest of it, but I’m stuck on this step.
Well.. yes, but the link by default should be url to the first picture that opens when the gallery page is viewed, eg. [~document_id_of_the_popup_document~]?pic=picture_id_of_the_first_picture. And also put double quotes around the id attribute value
2. Add link to the picture element, eg. around <img id="maxImage"... with some ID.like this? <a href="javascript:void(0);" onClick="javascript:openWindow('[+maxigallery.picture_link_url+]');return false;" id=maxImageId><img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" /></a>
4. Change the showPic function so that after the image is swapped, it will also update the links onClick attribute value so that it will link to the big image, eg. javascript:openWindow(’url_to_the_popup_document.html?pic=’+picId); where picId is the variable that holds the picture id what you have added to the function.
<div class="picturecontainer">
<a href="javascript:void(0);" onClick="javascript:openWindow('[~61~]?gal_id=[+maxigallery.picture.gal_id+]&pic=[+maxigallery.picture.id+]');return
false;" id="maxImageId">
<img id="maxImage"
src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
alt="[+maxigallery.picture.title:htmlent+]" /></a>
<p id="maxTitle">[+maxigallery.picture.title:htmlent+]</p>
<p id="maxDescr">[+maxigallery.picture.descr:htmlent+]</p>
</div><script type="text/javascript">
function showPic(url,title,descr,width,height,picid) {
var img = document.getElementById('maxImage');
var picid = document.getElementById('maxImageId');
var titleHolder = document.getElementById('maxTitle');
var descrHolder = document.getElementById('maxDescr');
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("");
}
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);
}
}
</script>
var piclinkid = document.getElementById('maxImageId');
piclinkid.onclick = function() {openWindow('[~61~]?&pic='+picid)}
var picid = document.getElementById('maxImageId'); <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+],[+maxigallery.picture.id+]);return
false;">
Ok, that’s great, thanks!
Ok, that worked! I will post the complete instructions to the wiki. Thank you!