We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 8822
    • 203 Posts
    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