Creating CSS Button - FancyBox
ancientalkemistAsked on December 03, 2013 at 05:46 PMI am trying to get my Invite a Friend form to open in fancybox from an Invite a Friend! button. I know it's possible...just not quite sure how to do it.
Here is how i did it with another form I am using:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<a class="fancybox" data-fancybox-type="iframe" target="_blank" href="https://inkdit.com/...forminfo data-fancybox-width="850" data-fancybox-height="650">Membership Application</a>
JotForm SupportabajanAnswered on December 03, 2013 at 06:11 PMDo you have a web page where you're trying to do this? If so, please provide the URL, so we can have a look at the page's source to see if we can come up a workable solution. Also, you mentioned another form where you successfully did it. May we see that form?
-
ancientalkemistAnswered on December 03, 2013 at 06:24 PM
I am creating my website on squarespace and it isn't live yet. I successfully used fancybox by putting the following code in a code block:
<link type="text/css" rel="stylesheet" target="_blank" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link type="text/css" rel="stylesheet" target="_blank" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link type="text/css" rel="stylesheet" target="_blank" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<a class="fancybox" data-fancybox-type="iframe" target="_blank" href="https://link to form with form number"data-fancybox-width="850" data-fancybox-height="650">Membership Application</a>
I tried using your lightbox code and it doesn't seem to work on squarespace. -
JotForm SupportabajanAnswered on December 03, 2013 at 06:29 PM
Hi again,
Thanks for that additional information. While searching the internet for a solution, I found the following video which seems like it would help:
I'm going to see if I can come up with something (perhaps by combining the info you supplied with what I learn from the video) but I'm not making any guarantees.
-
ancientalkemistAnswered on December 03, 2013 at 07:43 PMThanks...that would be great!
JotForm Support Forum wrote:
-
JotForm SupportabajanAnswered on December 03, 2013 at 08:38 PM
@ancientalkemist
Just to update you, my tests look promising.
-
ancientalkemistAnswered on December 03, 2013 at 10:06 PM
I got it to work on jsfiddle. Here is the link.
http://jsfiddle.net/Se8Yu/478/
However the sizing attributes are not working on squarespace for some reason.
-
JotForm SupportabajanAnswered on December 03, 2013 at 10:09 PM
LOL
You beat my reply by seconds. Just as I was about to post my demo, I got a notification of a new post in the thread.
Anyway, I'm glad you were able to figure it out. By the way, here's my demo.
Cheers -
JotForm SupportabajanAnswered on December 03, 2013 at 10:11 PM
We'll see if we can work on the Squarespace situation for you.
-
ancientalkemistAnswered on December 05, 2013 at 03:23 AMI'd like to compare the code if you don't mind. You managed to be able to style the button. I didn't get that far. :)
Thanks!
JotForm Support Forum wrote:
JotForm SupportEltonCrisAnswered on December 05, 2013 at 07:21 AM@ancientalkemist
That's great! Glad to hear my colleague was able to help.
Upon looking my colleagues code, the button was generated at http://cssbuttongenerator.com/. Then apply the button class on the form hyperlink under class attribute e.g <a class="fancybox button-blue"
Cheers!
-
ancientalkemistAnswered on December 05, 2013 at 01:07 PMThanks! I was also interested in comparing the JavaScript code that got fancy box to work.
JotForm Support Forum wrote:
-
ancientalkemistAnswered on December 07, 2013 at 07:05 PM
Any word on the javascript???
-
JotForm SupportabajanAnswered on December 07, 2013 at 07:29 PM
Hi again,
If the demo is loaded in Chrome and then the page's source is viewed, you'll see that all of the resources to which the page refers are clickable links. When you click the said links, you'll see the code. For your convenience, the addresses to which the links point are repeated below:
Stylesheets:
https://shots.jotform.com/wayne/source/jquery.fancybox.css
https://shots.jotform.com/wayne/css/button-blue.css
https://shots.jotform.com/wayne/css/center-content.css
Scripts:https://shots.jotform.com/wayne/lib/jquery-1.10.1.min.js
(That's the minified [compressed] version of jQuery 1.10.1)
https://shots.jotform.com/wayne/source/jquery.fancybox.js
It's important to note that fancybox.js must be placed after the library (jQuery). It's also advisable to load CSS before scripts but that's not critical.If you need further help with this, please let us know.
Thanks -
ancientalkemistAnswered on December 07, 2013 at 08:08 PM
Awesome! Thanks!
-
ancientalkemistAnswered on December 07, 2013 at 08:43 PM
Sorry to bother you...but I am aware of the basic scripts and I kno wthat they get loaded in the head of the document. What I am looking for is the javascript code that you used to load and call up the fancybox that comes after loading the scripts. The one where you applied the button class?
-
ancientalkemistAnswered on December 07, 2013 at 08:44 PM
Never mind..I found it! Thanks
