Making An AJAX Photo Gallery
Making a simple photo gallery is a task that can be accomplished using the <v:a> tag with the ajax attribute, along with the <v:collection> and <v:img> tags.
<h2><v:text path="artist_name"/></h2> <v:collection path="images"> <div class="imageDiv"> <v:a href="/image" ajax="bigPicDisplay"><v:img path="image" image_size="thumb" /></v:a> </div> </v:collection>
This will display a thumbnail version of all the images in our Images Collection. The <v:a> tag points to an image.html page, which will do nothing but display a larger version of the the image. Just one line of code:
<v:img path="image" image_size="big"/>
Since we set the ajax attribute in our <v:a> tag, clicking on a thumbnail will not redirect the user to the image.html page. Instead, the contents of image.html -- the large version of our image -- will be displayed in the bigPicDisplay div. This happens asynchronously, so the image will be loaded without a full page refresh. Here's the result:
