Thank you for your assistance doze. Sorry about the confusing post. It was late, and I figured I’d try and keep it as short as possible.
Not sure if I understood correctly your gallery setup.. Do you mean that you have one page that lists thumbnails in normal mode and when thumbnail is clicked, it links to another document which has the gallery in "pics and thumbnails on same page" setup? or what?
Yes, exactly, you’ve got it.
Here is the page that has the thumb gallery comprised of images from other galleries (normal mode):
http://fer.gomediahost.com/index.php?id=47
here is the call from that page:
[!MaxiGallery? &pic_query_ids=`76,84,77,78,79,80,81,82,86,87,88,89` &pics_per_row=`4` &max_thumb_size=`200` &galleryPictureTpl=`ferGalleryPictureSquarestpl` &manageButtonTpl=`ferManageButtonHiddenTpl` &max_pic_number=`12!]
(the pic_query_ids are coming from gallery 52 and 72)
http://fer.gomediahost.com/index.php?id=52
http://fer.gomediahost.com/index.php?id=72
the snippet calls on these pages are as formatted as follows (pics and thumbs on same page) (this is page 52):
The thumbs (They aren’t really thumbs in the traditional sense, I guess. They are those little grey boxes. It’s kind of abstract, but this is what the design called for.)
[!MaxiGallery? &galleryPictureTpl=`fer_mgGalleryPicture2fer` &js=`ferMgJs` &galleryOuterTpl=`fer_mg_galleryOuterTpl` &max_thumb_size=`250` &pics_per_row=`9` &customFields=`Category` &manageOuterTpl=`fer_manageOuterTpl` &managePictureTpl=`fer_managePictureTpl` &quality_pic=`100` &quality_thumb=`100` &manageButtonTpl=`ferManageButtonTpl` &manage_target=`57`!]
...and the call for the pic:
[!MaxiGallery? &pictureTpl=`ferMgPicture2` &quality_pic=`100` &quality_thumb=`100` &display=`pictureview`!]
(The TPLs are listed at the bottom of my post, to try and keep this as neat as possible.)
So, even though you’ve been able decipher my post and see what I’m doing, I’m having a little trouble understanding your suggestions (sorry, I’m kinda a noob):
you need to create a custom template for the gallery that lists the thumbails and links them to childgalleries to add the picture ID to url query string, eg. picId=[+maxigallery.picture.id+]. Then in the landing document (the childgallery document) you need to read the picId parameter with a snippet (eg. snippet code: return $_GET[’picId’]; ) and display that picture initially in the document.
I’m stuck on this part: picId=[+maxigallery.picture.id+]
I think I’ve got the snippet call right though.
I don’t understand (and can’t find info on) adding info to the query string and retrieving it.
as for this:
Quote from: bhop on Yesterday at 11:30 PM
Second -- is there any way to dynamically apply a css class to the thumbnail that is currently clicked on? (I want to apply a border or something around the thumbnail that is currently "active").
You could use the link a:active css selector or use jQuery or some other library to add the css class in the showPic() js function.. Or actually first remove it from previously selected image and add to the currently selected one.. you can add an ID to the thumbnail <li> html elements in your template to a picture ID and a class "thumbnail", so it’s pretty easy to do with jQuery for example $(’#picture_id_here_from_showPic_parameters’).addClass(’activePicture’); and removing $(’.thumbnail’).removeClass(’activePicture’);
I’m going to have to do a little more research before I can get that going (I barely know any js at all). However, I will post any progress I make.
Thanks again for you assistance!
Note: Sorry, but I can’t ensure that these links will be active far into the future, so just a heads up to anyone reading this later on.
Below, I’ve listed the relevant TPLs:
&galleryPictureTpl=`ferGalleryPictureSquarestpl`
[+maxigallery.embedtype:is=`smoothgallery`:then=`
<div class="imageElement">
<h3>[+maxigallery.picture.title:htmlent+]</h3>
<p>[+maxigallery.picture.descr:htmlent+]</p>
<a href="[+maxigallery.picture_link_url+]" title="[+maxigallery.strings.click_to_zoom+]" class="open"></a>
<img src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="full" />
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" />
</div>
`+]
[+maxigallery.embedtype:isnot=`smoothgallery`:then=`
<li>
[+maxigallery.embedtype:is=`slidebox`:then=`
<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox_[+maxigallery.path_to_gal+]gallery">
`+]
[+maxigallery.embedtype:is=`lightboxv2`:then=`
<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[image[+maxigallery.pageinfo.id+]set]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">
`+]
[+maxigallery.embedtype:is=`slimbox`:then=`
<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[image[+maxigallery.pageinfo.id+]set]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">
`+]
[+maxigallery.embedtype:is=`popup`:then=`
<a href="javascript:void(0);" onClick="javascript:openWindow('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]',[+maxigallery.picture_height_normal+],[+maxigallery.picture_width_normal+],'gallery');">
`+]
[+maxigallery.embedtype:is=`external`:then=`
<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="external">
`+]
[+maxigallery.embedtype:is=`normal`:then=`
<div class="masker">
<a href="[~[+maxigallery.picture.gal_id+]~]" title="[+maxigallery.strings.go_to_gallery+]">
`+]
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
</a>
</div>
[+maxigallery.picture.title:isnot=``:then=`
<p style="width: [+maxigallery.picture_width_thumb+]px;">
[+maxigallery.picture.title:htmlent+]
</p>
`+]
</li>
`+]
&galleryPictureTpl=`fer_mgGalleryPicture2fer`
<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;">
</a>
</li>
&js=`ferMgJs`
<script type="text/javascript">
function showPic(url,title,descr,width,height) {
var img = document.getElementById('maxImage');
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>
&galleryOuterTpl=`fer_mg_galleryOuterTpl`
[+maxigallery.managebutton:isnot=``:then=`
<center>[+maxigallery.managebutton+]</center>
<br />
`+]
[+maxigallery.childgalleries:isnot=``:then=`
<div class="childscontainer">
[+maxigallery.childembedtype:is=`smoothgallery`:then=`
<div id="myGallerySet[+maxigallery.pageinfo.id+]">
[+maxigallery.childgalleries+]
</div>
`+]
[+maxigallery.childembedtype:isnot=`smoothgallery`:then=`
<ul class="thumbs">
[+maxigallery.childgalleries+]
</ul>
`+]
</div>
`+]
[+maxigallery.pagenumbers:isnot=``:then=`
[+maxigallery.pagecount:isnot=`1`:then=`
<div class="pagenumbers">
[+maxigallery.currentpage:is=`1`:then=`
[+maxigallery.strings.previous+] |
`:else=`
<a href="[+maxigallery.previous_page_url+]">[+maxigallery.strings.previous+]</a> |
`+]
[+maxigallery.pagenumbers+]
[+maxigallery.currentpage:is=`[+maxigallery.pagecount+]`:then=`
[+maxigallery.strings.next+]
`:else=`
<a href="[+maxigallery.next_page_url+]">[+maxigallery.strings.next+]</a>
`+]
</div>
`+]
`+]
[+maxigallery.embedtype:is=`smoothgallery`:then=`
<div id="myGallery[+maxigallery.config.smoothgallery_id:isnot=`-1`:then=`[+maxigallery.config.smoothgallery_id+]`:else=`[+maxigallery.pageinfo.id+]`+]">
[+maxigallery.pictures+]
</div>
`+]
[+maxigallery.embedtype:isnot=`smoothgallery`:then=`
[+maxigallery.pictures:isnot=``:then=`
<ul class="thumbs">
[+maxigallery.pictures+]
</ul>
</div><!-- end of project details div - This div was opened in the fer gallery template -->
`+]
`+]
