[solved] Gallery: how to link subgallery thumb with first image directly

[Erhaoen]

CMSMS 1.8.2
Gallery 1.4.1


Hello all, I'm new to CMSMS but already loving it.


I want to have many subgalleries in my main gallery, but each of them is going to have very few images inside (from 1 up to 5). This makes me think that standard templates are too complicated for my needs. When I click subgallery thumb it takes me to target destination, displays miniatures and at this point I can finally click any image to trigger js slideshow of my choice. But I'd like to skip this step and make subgallery thumbnail link directly to the first image of its directory and see big images in fancybox without going anywhere. Is there any easy way to achieve this? I have no idea how to link subdirectory thumbnail to first image as it's my first time I see smarty. Or mayby I'm wrong and it's not the way it should be done ?

Sorry if there's answer somewhere already, I couldn't find it because of poor english or low search skill

[Jos]

It is possible to show one thumb and clicking on it will open the lightbox and navigate through all the images of that subgallery.

It is not possible to accomplish this with one single {Gallery} tag in a page. You would have to add a {Gallery dir='yoursubdir'} tag for every subgallery you want to show that way.

Is that what you want?

[Erhaoen]

Yes, sounds perfect and calling each subdir separately will not be any problem I think.

[Jos]

Ok, the you can take a look here:
http://forum.cmsmadesimple.org/index.ph ... .html 

[Erhaoen]

Thanks Jos, I found this thread before, indeed lightbox part works fine. The reason I'm not celebrating yet is that for some reason prototype.js prevents from working all JQuery scripts, so I'll research some more how to fix it or if I can make something similar using JQuery based js effect. I will keep you posted.

[Erhaoen]

EDIT: Damn, when I add more galleries, fancybox cycles thru all of them. I still need to separate galleries, mayby give them unique ids somehow? I'll research it more later. But I am getting there slowly, right ? 

-----

It works with fancybox also  :D
I replaced foreach loop with your code in fancybox template:

Code: Select all

{assign var='firstimage' value='1'}
{foreach from=$images item=image}
	<div class="img">
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a><br />
		{$image->title}
	{elseif $firstimage}
   <a href="{$image->file}" title="{$image->title}" rel="fancybox"><img src="{$image->thumb}" alt="{$image->title}" /></a>
	{assign var='firstimage' value='0'}
	{else}
   <a class="hide" href="{$image->file}" title="{$image->title}" rel="fancybox">{* no thumb here *}</a>
	{/if}
	</div>
{/foreach}

... added this line to css to hide thumbs

Code: Select all

.gallery .img .hide{  display: none; }

and small javascript modification to make this work:

Code: Select all

<__script__ type="text/javascript" charset="utf-8">
$(function() { 
    if ($('*').is('a[rel="fancybox"]')) { 
        $('a[rel="fancybox"]').fancybox({
              'zoomSpeedIn':      500, 
              'zoomSpeedOut':   400, 
              'overlayShow':      false,
              'overlayOpacity': 0.0,
              'hideOnContentClick': false,
              'easingIn': 'easeOutBack',
              'easingOut': 'easeInBack'
        }); 
    } 
});
</__script>

Mayby it's not perfect but it works as I pictured it in my head

Thanks again for great module and support, kudos !

[Jos]

To make sure fancybox doesn't go through all the images of different subgalleries, you can change

Code: Select all

rel="fancybox"

to

Code: Select all

rel="gallery{$galleryid}"

everywhere you see it in the template

[Erhaoen]

Yup of course it works, thanks! I changed all rel="fancybox" to rel="gallery{$galleryid}" in template and also removed [rel="fancybox"] from JavaScript part to make it happen. Cheers!