CHAPTER 9: Web Gallery Plug-ins: A Tutorial Example
Defining a data model and functionality
184
Add link functionality 3.
In the grid.html template, add a link in each photo cell of the grid that retrieves the large-version page corresponding to the thumbnail in that cell: <lr:GridPhotoCell> <a href="$others/<%= image.exportFilename %>_large.html"> <img src="$others/bin/images/thumb/<%= image.exportFilename %>.jpg" id="<%= image.imageID %>" class="thumb" /> </a> </lr:GridPhotoCell>
Notice that the reference to the filename includes the appended text, "_large".
Define the large-image frame template 4.
Create the new HTML template page, large.html, in the top-level plug-in folder. The new page is similar to the grid.html page, except that it declares the use of large images, rather than thumbnails, and there is an image function that retrieves the single image to be shown. Use the common header and footer code, and define local variables: <% --[[ Define some variables to make locating other resources easier.]] local image = getImage( index ) local theRoot = ".." local others = "." local mySize = "large" %> <% --[[ Include the page header]] %> <%@ include file="header.html" %> <% --[[ ...add pagination logic...]] %> <% --[[ ...add image-display link...]] %> <% --[[ Include the page footer]] %> <%@ include file="footer.html" %>
5.
Add this pagination code after the include-header section. This version includes an Index option which takes the site back to the grid page: <div> <ul> <lr:Pagination> <lr:PreviousEnabled> <li><a href="$link">Previous</a></li> </lr:PreviousEnabled> <lr:PreviousDisabled> <li>Previous</li> </lr:PreviousDisabled> <li><a href="$gridPageLink">Index</a></li> <lr:NextEnabled> <li><a href="$link">Next</a></li> </lr:NextEnabled> <lr:NextDisabled> <li>Next</li>