How to stop the images being cropped off the side?

  • swindells
    Asked on July 22, 2014 at 1:23 AM
    When Welvin returns it would be great if he knows how to stop the images being cropped off the side?
  • jonathan
    Replied on July 22, 2014 at 4:58 AM

    Hi,

    Were you referring to this web page http://www.sophieswindells.co.uk/Sophie_Swindells/scriptsublime.html ?

    I checked it on my browser, but I did not encounter the same cropped images you mentioned

    How to stop the images being cropped off the side? Image 1 Screenshot 20

     

    Perhaps you need to specify the images width dimension so that it will not exceed the width where they are contained. 

    Please inform us if this issue persist.

    Thanks.

     

     

     

     

  • Welvin Support Team Lead
    Replied on July 22, 2014 at 5:21 AM

    I decided to open the images as Lightbox. Hope you will like it. I haven't found any solution for the images on the right. Using custom CSS codes is too complicated since that involves multiple elements.

    Please check it here: https://shots.jotform.com/welvin/pages/Sophie_Swindells_scriptnew.html

     

    If this sounds good, get/copy all the source codes with all the added scripts here: https://shots.jotform.com/welvin/pages/Sophie_Swindells_scriptnew.txt.  Same step on the previous threads:

    1. Save the source codes as an HTML file

    2. Upload the HTML file to your hostpapa file manager

    3. Get the direct link of the HTML file

    4. Hhyperlink it to the iWeb HTML block.

     

    Let us know if you need further assistance.

    Thanks

  • swindells
    Replied on July 22, 2014 at 6:02 AM

    That's great! It works really well and has sorted out all the issues at once. The alignment is now correct, the second page is starting at the top and the images can be viewed in zoom. 

     

    Brilliant, thank you very much Welvin :)

  • Welvin Support Team Lead
    Replied on July 22, 2014 at 7:12 AM

    Our pleasure to help! :)

    Thanks

  • swindells
    Replied on September 25, 2014 at 12:37 PM

    Hi Welvin, I need your help!

    I've added a couple of new images on my site and was so careful to try and do everything correctly but the order form is not working properly. 4 problems:

    1. The alignment of the quantity boxes is out.

    2. The images can't be viewed in zoom anymore when you click on them.

    3. When you click on the 'view christmas cards' button in gallery 1 it won't let me go to gallery 2.

    4. The outline box in gallery 2 has got too large, not sure why this has happened. I added a new image in the gallery but removed it's number from the CSS code, so don't understand.

    Here's a link to the URL:

    http://www.sophieswindells.co.uk/Sophie_Swindells/sophiesourcecode.html

    Your help with this would be really appreciated. Thank you

     

  • Mark
    Replied on September 25, 2014 at 1:37 PM

    Hi,

    Welvin is not online yet, but he surely response you once he is online and provide you the solution.

    Thanks!

  • swindells
    Replied on September 28, 2014 at 6:59 AM

    Hello Welvin or Adajan, are either of you able to help me with this little problem please? Many thanks

  • Ben
    Replied on September 28, 2014 at 7:21 AM

    Hi,

    Mo colleagues are not available right now, but I can assure you that they are updated on your message.

    I would however like to try to resolve this issue with you. I have noticed that you have added 2 images, but with wrong addresses. Please correct them and let us know if that resolves the issue.

    Since this is a custom built solution, I can not help you as my colleague Welvin would as he is familiar with this, but this might resolve everything.

    The images with wrong entry are:
    - planetstack_ss52tp.png
    - hideaway_ss55tp.png

    Please make sure that their name does not have space " " nor "%20" in them. Currently they are linked like this:

    https://s3.amazonaws.com/jufs/swindells/form_files/hideaway%20_ss55tp.png

    While they should be pasted like this instead:

    https://s3.amazonaws.com/jufs/swindells/form_files/hideaway_ss55tp.png

    If you click on the first two links you will see that they are not available, while the other 2 are.

    Also, please be careful when removing things from your HTML. I have noticed that you are missing the head element

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>SOPHIE SWINDELLS GREETINGS CARD ORDER FORM - TRADE ONLY</title>

    </head>

    <body>

    SOPHIE SWINDELLS GREETINGS CARD ORDER FORM - TRADE ONLY

    Do let me know if this resolves the issues or if some are still there.

    Best Regards,
    Ben

  • swindells
    Replied on September 28, 2014 at 8:26 AM

    Hi Ben, thank you for looking into this for me.

    As advised, I changed the image addresses that were wrong, well spotted. The header bar seems to be there so don't understand that one. I uploaded the updated source code to my website but unfortunately the problems are still there. :(

    The images quantity boxes are out of alignment, the images are not enlarging when clicked on and various other things. Need some help with this, i've tried everything I know. Im sure Abajan or Wayne will know.

    Thank you.

    Sophie

     

     

  • Ben
    Replied on September 28, 2014 at 9:06 AM

    Hi Sophie,

    You are welcome. I have tried looking at the code again here http://www.sophieswindells.co.uk/Sophie_Swindells/scriptsublime.html, but I got 404 not found error. It seems that the code is not yet uploaded there.

    The header bar seems to be there so don't understand that one.

    I was looking at the link above and it did not have that when I looked, which is why I have mentioned it. Can you please tell me if that is the correct link to take a look at or if there is some other page that I should go to?

    Best Regards,
    Ben

  • swindells
    Replied on September 28, 2014 at 2:51 PM

    Hi, the correct URL is: http://www.sophieswindells.co.uk/Sophie_Swindells/sourcecode.html

    Would be great if you can take a look.

    Thank you

  • jonathan
    Replied on September 28, 2014 at 6:32 PM

    Hi Sophie,

    I was able to see the issue you reported on your custom solution.

    http://www.sophieswindells.co.uk/Sophie_Swindells/sourcecode.html

     

    From the look of it, you were not able to correctly apply the solution that was applied on this original solution by Welvin  https://shots.jotform.com/welvin/pages/Sophie_Swindells_scriptnew.html

    May I inquire if you still have copy the original working website before you applied the recent changes?

    It would be less complex to fix the problem if we can revert to the original working version and then let us do the modifications for you.

    I tried checking the old URL http://www.sophieswindells.co.uk/Sophie_Swindells/scriptsublime.html but it seems to be removed already.

    Tell us if there is still way for us to go back to this original working version.

     

    Thanks.

     

  • swindells
    Replied on September 29, 2014 at 12:15 PM

    Hi Jonathan,

     

    That was really helpful thank you! I reverted back to the original working version Welvin created and that sorted out all the problems! :) Here it is now: http://www.sophieswindells.co.uk/Sophie_Swindells/editedcode.html

    I was able to edit some of the code and change a couple of the images.  What confused me was I was getting the source code from the JotForm builder site and that code was wrong. Welvin has created something different for me. So, I guess I just add the new images to the image library in jotform but the rest of the work is done with this other code outside of form builder. 

     

    Can I somehow clone the form so that in Form Builder it looks correct or does this not matter?

     

    Thank you

     

  • Ben
    Replied on September 29, 2014 at 1:41 PM

    Hi Sophie,

    I am glad that you get it all working now.

    I however can not access the link above http://www.sophieswindells.co.uk/Sophie_Swindells/editedcode.html (from my understanding it is not needed as the issue has been resolved).

    Welvin has created something different for me. So, I guess I just add the new images to the image library in jotform but the rest of the work is done with this other code outside of form builder.

    Yes, that is correct, my colleague Welvin has created a custom solution for you so you should always use it over the form builder code (and follow all instructions that Welvin might have given to you).

    Can I somehow clone the form so that in Form Builder it looks correct or does this not matter?

    From my understanding you should leave form builder as it is to have everything working properly.

    I hope that my message had answered at least few of your questions. Do let us know if you have any other questions and we will get back to them.

    Best Regards,
    Ben