Explore the community › Forums › Lectora › Lectora Questions & Answers › Click Event to Resize Then Click Again to Go Back to Normal › Reply To: Click Event to Resize Then Click Again to Go Back to Normal
I accomplish the ‘click to zoom’ function on an image by first creating a separate, hidden, page in the title after the last page.
When you use this technique, you need to manage your course navigation so the user stops on the ‘real’ last page and can’t continue beyond that to the ‘hidden’ pages. I do this with a conditional ‘Next’ button.
The Next button has 2 actions:
- GoTo next page
- On Page Show, Set State, Target = This Object, State = Disable, Condition -> CurrentPageName = conclusion
- Name the ‘real’ last page in your title ‘conclusion’ (without quotes)
- This disables the Next button on any page named conclusion
With the Next button setup correctly, now you can add a page in your title after the ‘real’ conclusion page. Name the page something unique like ‘ZoomImage’ (without quotes) or something like that. Insert the same image on this page and then size it as big as you can. Increase the page size if you need to. Disinherit all but the Exit button. Add an ‘Exit’ button in the upper right of this ‘ZoomImage’ page if you want a uniquely different Exit button here. If you do, disinherit the ‘regual’ exit button for this page.
Now, to make the zoom work. Add an action to the image on its original page that:
- OnClick, GoTo to the page called ‘ZoomImage’, New Window, WindowStyle = Lightbox
The Lightbox style forces the new window to have exclusive focus so the user can’t get back to the course until the close it with the Exit button you added to the page.
I usually add a text box centered below or above the original image containing the words (click image to zoom) … include the parenthesis.
I’ve attached a simple example title.
Hope this helps. Email me if this doesn’t make sense.