When enlarging a product picture, it appears wrong on site

  • Profile Image
    zapin
    Asked on December 07, 2017 at 02:13 PM

    I have posted an almost simular post before, but it didn`t solve my problem, so I would like to give it another try, I hope that is ok.

    My problem is that when I enlarge a product picture, it will come up in the middle of the form, which makes it a problem when you click a picture in top or bottom of the form (since my form is very long). Anyway I can get the picture to enlarge at the place I´m at in the form, instead of in the middle ?

    Alternative could I maybe discard this function, and instead make it so, that picture is enlarged when hovering the mouse over it ?

    I know I can solve the problem by making the form smaller in height, but I would like that the user doesn`t have to scroll in the form.

  • Profile Image
    EltonCris
    Answered on December 07, 2017 at 03:46 PM

    It is possible to change its size on hover state. That's the only way to overcome it for now.

    Here's how:

    1. First, you need to disable the product image preview in the payment field settings.

    a. Click the payment field in your form > click the wand icon to open its payment settings > additional gateway settings

    b. Set clickable image preview to NO

    2. Inject this CSS codes to your form to enlarge the image on hover state.

    .form-product-item:hover img {

        height: auto;

        width: 50%;

        position: absolute;

        top:70px;

        z-index:1;

    }

    .form-product-item:hover{

        padding-left:68px;

    }

    .form-product-item{

        box-sizing:border-box;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Example

  • Profile Image
    zapin
    Answered on December 09, 2017 at 09:33 AM

    I´ve tried to embeed your CSS code to my form, and set image preview to "no", but it doesn´t seem to work, it is like the picture is hidden somehow in the back of the form when you hover over it, can you please help me out with that problem ?

    When I do so, how will it appear and work on phone ?

    This is the form I´ve been changing in :

     https://eu.jotform.com/build/73326246243352

    Page on which it is active :

    https://sparmad.com/faerdigretter/


  • Profile Image
    John_Benson
    Answered on December 09, 2017 at 03:50 PM

    Please check my demo form: https://form.jotform.com/73426436928970

    Is that what you're trying to achieve? If yes, please add this custom CSS code to your form:

    .form-product-item:hover img {

    height: auto !important;

    width: auto !important;

    position: initial !important;

    }

    To add the custom CSS code, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here's the demo form in action:

    151285257942az.gif

    I hope this helps. Contact us again if you need further assistance.

  • Profile Image
    zapin
    Answered on December 10, 2017 at 12:55 AM

    Yes that is almost what I´m trying to achieve, only problem with this, is that I would like for it only to enlarge when you hover over the picture, not when over the text, since it makes the scroll a bit confusing, when enlarging everything on the way, is that possible ?



  • Profile Image
    EltonCris
    Answered on December 10, 2017 at 02:36 AM

    Sorry but I could not find a workaround with that functionality. We can only enlarge the image itself on hover state.

    Our solutions are the closest one you could get. Unfortunately, in my CSS codes, I missed a piece of CSS code that's why the image is cut off during hover. 

    You can correct it by replacing with the following CSS codes.

    .form-product-item:hover img { height: auto; width: 50%; position: absolute; top:70px; z-index:1; } .form-product-item:hover{ padding-left:68px; } .form-product-item{ box-sizing:border-box; }.form-product-item {overflow: visible;}