Adobe 65007312 Programming Guide - Page 199

CHAPTER 11: Web Gallery Plug-ins: A Tutorial Example Defining a data model and functionality 199 Next Next The pages make use of the predefined navigation buttons (using the $link variable), associating them with the text "Previous" and "Next". This code makes sure that the "Previous" button is disabled on the first page, and the "Next" button is disabled on the last page. Each page also displays its own page number (using the $page variable), and allows direct navigation to other pages (using the $link and $page variables) Add another photo size When you click on a thumbnail image in the filmstrip, we want to display a large version of that image in another frame of the page. In order to make this happen, we need to do several things: X Define a "large" photo size in the data model. X Create an HTML template for the large-image display frame. X Add a link around each thumbnail image that responds to a click by finding and displaying the corresponding large image. Add the "large" photo size 1. The data model needs to define the new photo size and its supporting parameters. In the galleryInfo.lrweb file, add these items to the model table: model = { ... ["photoSizes.thumb.metadataExportMode"] = "copyright", ["photoSizes.large.width"] = 450, ["photoSizes.large.height"] = 450, ["appearance.thumb.cssID"] = ".thumb", }, 2. The project needs to include a template for the frame that displays the large image. In the manifest.lrweb file, add this command: AddPhotoPages { template = 'large.html', variant = '_large', destination = "content", } This will create an individual HTML page for each large image, which we can link to from the grid photo cell definition in grid.html. The name of each page has the text "_large" appended to it; for example, img0731_large.html.