How to create zooming effect on image?

  • Profile Image
    max123jot
    Asked on November 06, 2017 at 07:41 PM

    https://www.jotform.com/help/220-How-to-create-a-lightbox-form


    the image in question 4 is a bit rectangular and i was hoping to enlarge so user could see better

    i am guessing a lightbox image is a good way to do this.

    the link above seems clear, but a bit too techno for me to try without first inquiring.

    any help from jot form is appreciated

    thanks

    max


  • Profile Image
    Nik_C
    Answered on November 07, 2017 at 02:47 AM

    The best way to achieve this, and use Lightbox embed method is to download Source code of your form: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form  and implement the lightbox there.

    And you could do that by creating another form that you can use as a lightbox, so in that form, you can only place the image you need:

    1510040257Screen Shot 2017-11-07 at 8.41

    And embed the code of lighbox in your main form. 

    The reason you have to use the Source code is that you cannot insert script code to our form builder. 

    On the other hand, I was able to create this zooming method:

    1510040638screencast.gif

    Here is my form so you can check: https://form.jotform.com/73101553551952

    And this is how to implement.

    Instead of your image add Text field to your form: 

    1510040702Screen Shot 2017-11-07 at 8.48

    And add the below code to it:

    1510040764Screen Shot 2017-11-07 at 8.49

    <div class="zoomin"><img title="All you need to know about CSS Transitions " src="https://www.jotform.com/uploads/max123jot/form_files/sample2.772.jpg" /></div>

    Then add the below code to your Custom CSS Field:

    .zoomin img {

      height: 200px;

      width: 300px;

      -webkit-transition: all 2s ease;

         -moz-transition: all 2s ease;

          -ms-transition: all 2s ease;

              transition: all 2s ease;

    }

    .zoomin img:hover {

      width: 700px;

      height: 500px;

    }

    Hope it helps.

    Let us know how it worked.

    Thank you!