How to count the THUMB -not the images

526 Posts

elz64 Reply #1, 18 years, 1 month ago

Hi again,

I’m still puzzling around the thumbs’s template always to integrate thumbs and images on the same page.

here’s the tpl for thumbs originally taken from wiki and used now.

<li>
       <a name="vignette[+maxigallery.counter+]" href="javascript:void(0);"
onClick="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:mymodifier+]','[+maxigallery.picture.descr:escslashandmore+]',[+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+]" width="[+maxigallery.picture_width_thumb+]" />
      </a>
</li>

As you can see, I added :

<a name="vignette[+maxigallery.counter+]...."

to identify each link, them, in order to automatically fire the first image at page loading, instead having to click on this first link we add :

<script type="text/javascript">
lien = document.getElementsByName('vignette[+maxigallery.counter+]');
lien[0].onclick();
</script>

But the place holder [+maxigallery.counter+] seams not being used as it returns nothing.
(by the way the script is working fine with the same name for each <a> anyway, but I’d rather prefer identify correctly each of them.

thank you

Schtroumpf Grognon - Grouchy Smurf
---------------------------------
Faites pas attention.. - Don't pay attention
http://www.dzi-neo.net

4,213 Posts

doze Reply #2, 18 years, 1 month ago

There is no such placeholder as [+maxigallery.counter+] in galleryPictureTpl.. So that’s why it doesn’t return anything.

There are following placeholders that could help:
[+maxigallery.rownumber+]
[+maxigallery.picrownumber+]
[+maxigallery.picpagenumber+]
[+maxigallery.picnumber+]

So if you use in the template <a id="vignette[+maxigallery.picnumber+]"..

and have this for example in the galleryOuterTpl at the bottom:

<script type="text/javascript">
pic = document.getElementById(’vignette1’);
pic.onclick();
</script>

Should do it.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

526 Posts

elz64 Reply #3, 18 years, 1 month ago

Thanks!

But I ’m not sure..
You suggest to use [+maxigallery.picnumber+] in my thumb ’gallery’ template, but this placeholder does not returns any value neither...

I probably do not undestood the second part of you proposal with galleryOutertpl.. I dont see the relationship.

I’m stillusing this chunck to call the fucntion (and I added CDATA stement to preserve valid XHTML...)

<script type="text/javascript">
//<![CDATA[
lien = document.getElementsByName('vignette1');
lien[0].onclick();
//]]> 
</script>

Schtroumpf Grognon - Grouchy Smurf
---------------------------------
Faites pas attention.. - Don't pay attention
http://www.dzi-neo.net

4,213 Posts

doze Reply #4, 18 years, 1 month ago

Quote from: elz64 at Aug 12, 2008, 12:02 PM

You suggest to use [+maxigallery.picnumber+] in my thumb ’gallery’ template, but this placeholder does not returns any value neither...

Get the v0.6 test version. Those placeholders are there.
Quote from: elz64 at Aug 12, 2008, 12:02 PM

I probably do not undestood the second part of you proposal with galleryOutertpl.. I dont see the relationship.

What relationship you are not seeing? Every thumbnail in my example would have an id (id="vignette1", id="vignette2", id="vignette3"... etc. the number comes from [+maxigallery.picnumber+] placeholder). Then the extra JS is added to the end of galleryOuterTpl to get the first thumbnail link (id="vignette1") and call the onclick() from there. Then the first picture should always be shown by default when the page reloads.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

526 Posts

elz64 Reply #5, 18 years, 1 month ago

With v0.6 I actually have the needed place holder that counts the thumbs so my original script is now fully ok.

But I did not had to touch to galleryOutertpl...

Thank you

Schtroumpf Grognon - Grouchy Smurf
---------------------------------
Faites pas attention.. - Don't pay attention
http://www.dzi-neo.net

4,213 Posts

doze Reply #6, 18 years, 1 month ago

Ok, good. Where did you add that Js part?

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

526 Posts

elz64 Reply #7, 18 years, 1 month ago

exactly at the same place, when I opened this thread.
in a chunck used as tpl for MG, like described in the wiki.

thank a lot

<li>
       <a name="vignette[+maxigallery.counter+]" href="javascript:void(0);"
onClick="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:mymodifier+]','[+maxigallery.picture.descr:escslashandmore+]',[+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+]" width="[+maxigallery.picture_width_thumb+]" />
      </a>
</li>

this tpl is in the MG call

[!MaxiGallery?  &galleryPictureTpl=`tpl-mg-projet-thumb` &pics_per_row=`3` &max_thumb_size=`50` &thumb_use_dropshadow=`1`  &js=`mgJs` &max_pic_size=`737` &quality_pic=`100` !]

Schtroumpf Grognon - Grouchy Smurf
---------------------------------
Faites pas attention.. - Don't pay attention
http://www.dzi-neo.net

4,213 Posts

doze Reply #8, 18 years, 1 month ago

Yeah.. but where did you put the following:

<script type="text/javascript">
//<![CDATA[
lien = document.getElementsByName('vignette1');
lien[0].onclick();
//]]> 
</script>

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

526 Posts

elz64 Reply #9, 18 years, 1 month ago

well,
in a chunk {{afficher-vignette1}} / afficher means "display" / , right after the Normal image wich is almost at the end of the html so I’m sure all element are loaded yet.

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

 {{afficher-vignette1}}

Schtroumpf Grognon - Grouchy Smurf
---------------------------------
Faites pas attention.. - Don't pay attention
http://www.dzi-neo.net

4,213 Posts

doze Reply #10, 18 years, 1 month ago

Yep, ok.. depending on which snippet call you have on top, the Js could be rendered before the thumbnails are and that could cause problems (can only happen with certain browser). You could add jQuery to the mix and wrap that js inside $(document).ready(function() { .... }); block. With jQuery, you can also do image transitions easily, see this.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."