Click Event to Resize Then Click Again to Go Back to Normal

txlady Community Member Posts: 101 ☆ Roadie ☆
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?


  • cainam
    cainam Community Member Posts: 363 ♦ Idol ♦
    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)
    - Adam Cain
  • brobertson4402
    brobertson4402 Community Member Posts: 24
    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.
  • txlady
    txlady Community Member Posts: 101 ☆ Roadie ☆
    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!