Viewing Image opens a form/iFrame
Image opens a form/iFrame
|
User: darrendixie123456789 11 years ago
|
|
|
I have recently asked a company to check the on-page SEO on my EW site. A number of interesting points have been raised, one of which has led me to create this post. On the homepage of my website you can download a product brochure. This is a simple graphic linked to a .pdf download using EW. The SEO company have suggested that I put the download behind a form, so I can collect contact data... a very sensible idea! Does anyone know of a widget that will enable me to place an image on a page and when clicked up pops a window (iFrame window) to a page containing a form? I have thought about linking the graphic to a new page with the form on but I would like a styled window like a lightbox/Click to Expand Image effect that presents the form to the user without leaving the current page. I've seen this type of thing done lots of time, many from site surveys which pop up when you load the site. Thanks Darren |
|
|
User: Roddy 11 years ago
|
|
|
Some of the lightbox style popups are capable of displaying either HTML or iFrames. None of the existing lightbox widgets can do this although the ones for Vimeo and YouTube movies in an lightbox are close. This demo is based on Colorbox… http://everwebcodebox.com/widget-test/iframe.html In line with my new policy of leveraging the HTML5 elements for maximum SEO, I have enclosed the image and its lightbox link in a figure element and the caption is enclosed in a <figcaption> so that it will be seen as relating to the image and the linked file by the spiders. The caption box and the one for alt text can be left empty by those who really don't want their websites to be found. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
✔ Best Answer
|
|
|
User: darrendixie123456789 11 years ago
|
|
| Thanks Roddy, a Lightbox iFrame widget like that would be perfect! | |
|
User: Roddy 11 years ago
|
|
|
Click the link again and you should see the opacity slider added as requested. Now are you happy - or not?
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: darrendixie123456789 11 years ago
|
|
|
Hi Roddy, you seem to work at an amazing speed! Are you sure you don't have a little team of developers working for you? Very impressive. The widget works so the soon to be new home page I am working on will keep the brochure download behind a form. I've used jot form so when users complete the form you are directed to the url of the .pdf. In time, I will move from jot form to form stack as it has some more advanced features but everything you have done works and solves my problem - thanks! One thing I have had to adjust to is the percentage width/height for the window when it opens. For something like a slideshow, header or footer I can see how percentages would work for background colour etc - this would be obvious (and something I hope gets added to EW in the future). As I have made a block page with a fixed width/height that the iFrame displays, it seems counter intuitive to have percentage widths for the window that opens. None-the-less, I have settled with a percentage value and it everything works great. Thanks again. Here's the test page should anyone want to see it in action: http://synergyschoolradio.com/synergy-school-radio-home-1.html Just click on the "Download the latest..." image above the footer. Notice this page also has the new navigation down arrow pseudo code you published last week :) Nice... |
|
|
User: Roddy 11 years ago
|
|
|
Most of the lightboxes use a percentage in some way or another to control the size of the window. Since they are developed, in the main, for images this works out OK. Images are easy to make responsive by giving them a percentage width and auto height. An iframe is not so easy as it needs to be given a percentage padding based on the required aspect ratio. For more info about this, see the demo of responsive Vimeo player which is displayed in an iframe… http://everwebcodebox.com/html5/video.html If you can control the size of the page which is displayed in the iframe, there are jQuery modals where you can specify the exact size of the lightbox window. Unfortunately, the one I used a lot is not compatible with the version of jQuery used by EverWeb and we know what happens when you you two different versions of jQuery on the same page - don't we? Another option would be to use the widget shown on THIS page to open the form in a new browser window. This wouldn't work in your case because the PDF would also open in this window which would be too small. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |