Explore the community Forums Lectora Lectora Questions & Answers Click Event to Resize Then Click Again to Go Back to Normal

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #448253 Score: 0
    Profile photo of TxLady
    TxLady
    Member
    beginner
    intermediate
    advanced
    contributor
    wise owl
    curious george
    friend finder
    2 pts
    @TxLady

    I have an image I want the student to click on to make it resize bigger to see the details (it’s a chart image) then I want them to click it again to return to the normal size.  But I don’t see a way.  It just keeps getting larger and larger!  How do I limit the number of clicks?

    I want them to be able to click once (resize is set to 150%).  I tried adding a button to show the original image but that doesn’t work.

    Is the solution to have two different sized images and if so – how would that work?

    #448257 Score: 1
    Profile photo of Adam Cain
    Adam Cain
    Member
    beginner
    intermediate
    profile
    picture perfect
    wise owl
    friend finder
    Group Member
    curious george
    contributor
    25 pts
    @cainam

    Like most things in Lectora, probably a few different ways you could do this.  Advantages to each depending on the use case.  For your particular setup, probably easier to specify specific dimensions vs percentage.  (if you click to zoom into 150%, then click again to zoom to 100%, it will stay the same size, because 100% of current dimensions is the same size).  I believe you would have to do something like 70% when zoomed out.

    Other options:

    1. Like you mentioned, have 2 images – If you click on image 1, it hides itself and shows image 2.  Click on image 2, and it hides itself, and shows image 1.  (probably easiest)
    2. have 1 image, and 2 transparent buttons on top.  Transparent 1 initially visible, and Transparent 2 initially hidden.  Then when you click each they hide themselves, shows the other, and sizes appropriately (again, easier to use specific dimensions vs percentage probably)
    This post has received 1 vote up.
    #448259 Score: 1
    Profile photo of Brian Robertson
    Brian Robertson
    Member
    beginner
    intermediate
    LUC16 Attendee
    curious george
    wise owl
    contributor
    profile
    13 pts
    @brobertson4402

    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.

    This post has received 1 vote up.
    Attachments:
    1. ZoomImage.zip
    #448270 Score: 0
    Profile photo of TxLady
    TxLady
    Member
    beginner
    intermediate
    advanced
    contributor
    wise owl
    curious george
    friend finder
    2 pts
    @TxLady

    Both of you have given me some very good ideas!  I’m just absolutely loving immediate answers!  I’m in the middle of 2-8 hour courses and 2-24 hour courses.  The 24-hours are split into 3 modules.  So I’m going a little bit crazy over here.

    I hate to say it – but COVID-19 has been good for my business.  I’m assuming everyone is getting a lot of eLearning work – not a bad thing.  Again – thank you so much!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.