I have a simple question that I just can’t seem to find an answer for anywhere.
On a website I intend to do I would like to use a simple picture gallery (similar to Freeway’s tutorial 3) to show pictures. I’d have 10 thumbnails at the bottom of the screen that show the picture I select in the larger placeholder frame on the top of the screen. So far so good - as per tutorial.
However, what I don’t know how to do is an extra level of complexity: I would like to have 5 tiny boxes with page numbers on the side of the screen that, depending on the page I’ve selected, highlight and show the thumbnails of that page only, e.g. [1] [2] [3] [4] [>]. Furthermore, If there are more pages than the five boxes I can provide for on the screen, I’d like the page numbers to change, e.g. [<] [3] [4] [5] [>], and reference the correct “pages”.
How would I do that? It seems so common functionality on most news sites. I know it must be done using layers with the action “Trigger Show/Hide Layers”. But how would I group the page number boxes to sets and trigger the right thumbnail layer that again then triggers display of the right picture when selected?
Thanks for any detailed instructions to a beginner.
The paging controls you have seen on various news sites are created by the server, using an application coded in one or another scripting languages that run on that server. The news is stored in a database and whenever you visit a page, your request is converted from a URL into a set of queries that extract data from the database. Paging is important in that setting because it keeps you from waiting while hundreds of current items are accessed and streamed to your browser. More prosaically, it also means more “impressions” for banner ads.
You could simulate this technique in Freeway by creating static pages that looked the way the server-generated navigation looks, and triggering a full-page refresh with each click. Since you’re trying to do this without a page refresh, then you will be deep into the territory of DHTML (Dynamic HTML) using JavaScript to modify the document that’s currently being displayed in the browser.
Take a look at the Carousel Action for one approach. That system allows you to have multiple content items in the same x/y space on your page, and to animate between them with a click on a next button or a tab. There is a CSS class assigned to the current tab (the one that corresponds to the pane of the carousel currently visible on screen) and that can be used to create a “you are here” effect in the navigation. Each tab could be your thumbnail, in this model.