I have the following code I am playing with, and it creates a nice gallery:
[[Gallery?
&album=`tremarctos ornatus`
&plugin=`slimbox`
&loop=`1`
&slimboxLoadJQuery=`1`
]]
The only problem is when you click a thumbnail the large image appears 'on top' of the page. I would rather the large image be present above the thumbnails, and change as the thumbnails are clicked. The following code does this:
[[!GalleryItem]]
[[!+galitem.image:notempty=`
<div class="image">
<a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>
<br />Albums: [[+galitem.albums]]
<br />Tags: [[+galitem.tags]]
</div>
`]]
<hr />
[[!Gallery? &album=`tremarctos ornatus` &toPlaceholder=`gallery`]]
<h1><a href="[[~[[*id]] &galAlbum=`[[+gallery.id]]`]]">[[+gallery.name]]</a></h1>
<p>[[+gallery.description]]</p>
[[+gallery]]
but it refreshes the page on each thumbnail click, so it is not very smooth. I have been trying MIGX which works great, but when you click the thumbnail it shows the large image on a blank page:
[[!getImageList?
&tvname=`gallery`
&tpl=`blog-gallery`
]]
and blog-gallery tpl contains:
<a class="gal" data-title="[[+title]]" href="[[+image]]">
<img src="[[+image:phpthumbof=`w=150&h=150&zc=1`]]" />
</a>
Each gallery does something I need, but is also lacking. If anyone can help I would very much appreciate it. Also The inputs for &album are always the album name, I want it to automatically choose the albums based on the pagetitle (therefore on the 'bear' page it will show only images in the album 'bear').
Regards,
DS
[ed. note: distant_smile last edited this post 12 years, 4 months ago.]
