Jump to content
Sign in to follow this  
jonthompson

Box Title Link To Lightbox With Gravity Form.

Recommended Posts

jonthompson    1
jonthompson

Ok, here is what I have so far. I downloaded Easy FancyBox and used this code to create a lightbox with a gravity form in it.


<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1">

[gravityform id="1" ajax="true"]

</div></div>


<a href="#fancyboxID-1" class="fancybox">Click here to enter your details</a>

I want the lightbox to show up when the box title and thumbnail image is clicked. this code works great, but how do I attach it to a certain box title?

Here is a link to the site I am working on, but I have no idea where to put the code yet so I just put up some boxes : http://josiahthompson.com

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

I'm not sure on this one. There's an option in the boxes to set a link up per box, this links the title and the image, so I'd imagine you'd be able to use a hook and tap into that to activate your code.

Have you tired using a modal button with the gravity form in? We have shortcodes for them so would be easier to set up. An example of the modal is on http://demo.pagelines.me/tools/

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jonthompson    1
jonthompson

I will experiment with hooks. thank you!

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie

The topic was marked as resolved.


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Claudio
      By Claudio+
      I have a problem with the typography settings. I set the H1 class with "font-weight: 300;" (Very thin weight), and "font-size: 50px;" (To have considerable evidence of my problem). Unfortunately, as you can see on the screenshots, those setting don't have any incidence on the site, Infact in the home page editor there is a trial title called "Text test", bold, and 26 px approximatly sized.
      Why the typography settings are not transposed on the site? Where I wrong?


    • wbeddoe
      By wbeddoe
      Greetings,
       
      Looking to be able to change the font of the Standard Title text in the Header/Highlight section.
       
      See screen shot
       
      Also, if I leave Highlight Header text and Highlight Subheader text blank, I get default text "Here's to the crazy ones..." appearing so I have to put a single space in the header and subheader text boxes to make that go away.
       
      Thoughts?
    • Claude203
      By Claude203
      I would like to format the Testimonial Box for mobile devices, considering that the container is a dynamic section. 
       
      Aside from targeting the specific elements in the @media section, is there anything else I could use to affect the dynamically changing shape?
       
      @media only screen and (max-device-width: 700px) {
      ?
      ?
      }
       
      Thank you!
    • swiftitnz
      By swiftitnz
      Hello people, I have been working on this site: http://mostrespectedagents.net/ and added few images for agent profiles manually.
       
      I was looking to use a plugin to get the lightbox functionality for thumbs > bigger images. Therefore, I installed 'Simple Lightbox' but it didn't work. Which is most likely because of clashing with DMS. Is it correct?
       
      Hence, I have used html/css (I have pasted below) and got the result but with a huge issue. If you kindly notice at the bottom of the site, there is a huge white space right below the footer/copyright module.
       
      Any suggestion on how to achieve the desired result without either of the issues?
       
      Any help is appreciated.
       
      Regards,
       
      Imran
       
      HTML:
      <a class="thumbnail" href="#thumb"><img src="http://mostrespectedagents.net/wp-content/uploads/2014/09/TW-Optimus-Team-Photo-Tenga-Helen.jpg" width="200px" align="left"><span><img src="http://mostrespectedagents.net/wp-content/uploads/2014/09/TW-Optimus-Team-Photo-Tenga-Helen.jpg" /></span></a><span style="font-size: 150%; font-weight: bold;">Tenga Schieber<br>Team Realty of Atlanta</span><br><br><span style="font-size: 110%; font-weight: bold;"><a href="http://www.teamrealtyofatlanta.com">www.teamrealtyofatlanta.com</a></span> CSS: 
      .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 5; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: black; padding: 1px; left: -700px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 1px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; right: 0; /*position where enlarged image should offset horizontally */ }
    • Romanesco
      By Romanesco
      Hi guys,
      What is the level of compatibility and integration of PageLines DMS 2 with the Gravity Forms WordPress plugin? Also any hints on styling would be greatly welcomed.
       
      *I've tried it on my demo site and it didn't look great
×