Hi Everyone, i currently have a gallery setup in the right column of a page - this displays one main image (260px wide) and a series of thumb nails beneath it. When each of the thumbs is selected that image is displayed as the main image. All works great and my code is below. I do however have a couple of improvements that i wondered if anyone know how to incorporate:
(1) When a thumbnail is selected the page reloads, and moves focus to the top of the page - any way round this?
(2) I would like the user to be able to select the main image (260px) and display a larger version (the actual image size and not 260px), using colorbox - how do i do this?
[[!GalleryItem? &imageWidth=`260` &id=`[[*firstgalitem]]`]]
[[!+galitem.image:notempty=`
<div class="galmainimg">
<img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" />
</div>
`]]
[[!Gallery? &album=`[[*gallerylist]]` &toPlaceholder=`gallery` &numThumbs=`4` &thumbWidth=`70` &thumbHeight=`70` ]]
[[!+gallery]]
Any help much appreciated