Enlarge inventory widget's image on hover

  • Profile Image
    AHSRecognitionServices
    Asked on September 16, 2019 at 01:25 PM

    Hello, I have created an order form with images of print cards that our staff can order for free.  I am wondering if I can link an inventory counter behind the scene so that we know what we have in stock.  I looked at your inventory widget but I can't figure out how to hover over the image so you can see it larger before placing my order.  Any help or ideas you can give is appreciated.  Thanks

  • Profile Image
    Vanessa_T
    Answered on September 16, 2019 at 03:56 PM

    You can simply use the inventory widget, then add custom CSS to enlarge the image by default or on hover.

    Please see this sample form I've created:

    https://form.jotform.com/92585962027971

    By default, the inventory widget's image is like the one on Card 1, which I've added a CSS to enlarge when hovered. You can also set the image to be large on load like Card 2, or add a hover function to enlarge like Card 3.

    1568663769A.gif

    Let us know which layout you would like to achieve so I can give you a step by step guide on the CSS. It would also be better if you already setup your form using the inventory widget, so that the custom CSS that I can give will already match your form.

  • Profile Image
    AHSRecognitionServices
    Answered on October 02, 2019 at 12:44 PM

    Hi Vanessa, thank you for your help.   I have recreated the form in the inventory widget  and am ready for you to look at the custom CSS guide.  My new url is https://www.jotform.com/build/92744450065255

  • Profile Image
    AndrewHag
    Answered on October 02, 2019 at 01:30 PM

    I checked your form and I am not able to see the images that you added.

    1570037030Recognition Print Card Order F

    Could you please confirm which layout you wish to have in those three? I would suggest you to clone the form shared by my colleague and grab the CSS code of any of the layout that you like from the widget custom CSS tab.

    1570037327The Easiest Online Form Builde

    Once you copy the code of your choice, just go to your form and paste the same code that you copied.

    Guides: How-to-Inject-CSS-Codes-to-Widgets

    How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    AHSRecognitionServices
    Answered on October 02, 2019 at 02:54 PM

    Hi, the images don't show up in Microsoft edge if that is what you are using.  I did the clone as you suggested but I cannot get the second line to accept two images - see below.  I will use the clone as the images are bigger if you can help me with the second line please.  https://www.jotform.com/build/92745600037252


  • Profile Image
    Nik_C
    Answered on October 02, 2019 at 03:35 PM

    I'm afraid that none of the images are showing:

    1570044835Screen Shot 2019-10-02 at 9.33

    Are these images stored on your domain? Since links are not accessible:

    https://share.ahsnet.ca/teams/hr/RecognitionStrategies/RSPS/Photo%20Contest%20Library/Card%201.jpg


  • Profile Image
    AHSRecognitionServices
    Answered on October 02, 2019 at 03:48 PM

    https://www.jotform.com/build/92745600037252

    Does this help.  The images are showing up for me just fine.



  • Profile Image
    Vanessa_T
    Answered on October 02, 2019 at 04:09 PM

    Unfortunately, I am also not able to see the images on your form.

    1570046686Screen Shot 2019-10-03 at 4.04

    It is possible the you are seeing the images just fine due to the following reasons:

    1. You are logged in in the same domain as the source image

    2. You are on the same network where the source images are hosted

    What I would suggest is either:

    1. You or ask someone on your IT department to enable sharing of the images or make it public

    2. Upload the images to Google Drive or Dropbox and use the shared link from there as the Product Image's source.

    1570046948The Easiest Online Form Builde

  • Profile Image
    AHSRecognitionServices
    Answered on October 02, 2019 at 04:23 PM

    Hi, thank you for the suggestion, I will fix.

  • Profile Image
    Vanessa_T
    Answered on October 02, 2019 at 04:27 PM

    You are most welcome. Once you got the images showing, let us known if your need further assistance and we will be glad to help.