I’m posting this because I spent countless hours trying to find a solution that would work, and this is the simplest (and only) one that I found in my research. I am convinced that there is a way built in to FancyBox to do this, but I could not figure it out, and I could not find any documentation that explained how. If you know how to make this work completely within the FancyBox framework, please post a comment.
Feel free to use this solution on any of your projects, but please leave the credits in there and provide one for me here. Thanks.
The Situation
I had a select (drop down) field on my site, and when the user selected a field, I wanted the selected field to trigger a link that would open a FancyBox pop up window that would be populated by an iframe source.
The Problem
FancyBox works only on links (a href tags) that have a specific class, and you cannot give a standard select field option an a href tag. I did try to create an unordered list and style it to look like a select field, but it didn’t work very well for me, and it wasn’t really the objective for what I was trying to do.
The Solution
In the end (after about 8 hours of searching and experimenting), I found this solution that worked like a charm. I had to tweak it a bit, of course, to make it work with FancyBox and iframes in my select field. A quick explanation before I get into the code:
1.) Create a select field with options that have the values of the URLs you want to display in the FancyBox,
2.) Rather than a submit button, create a regular a href link that is styled to look like a button,
3.) Install FancyBox on your website either with a WordPress plugin or the manual jQuery install,
4.) Add your FancyBox class or id to the a href link styled to look like a button, and
5.) Use the javascript below to change the value of the a href link when the user selects an option from the select field.
And now for the good stuff…
The FancyBox code (this is for the WordPress FancyBox plugin):
jQuery(function(){
<!-- fancy box -->
jQuery("a.myFancyBoxClass").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'width':275,
'height':300,
'type': 'iframe'
});
})
The javascript:
<script type="text/javascript"><br />
function update()<br />
{<br />
var newLink = document.myFormName.mySelectName.value;<br />
document.getElementById("myCustomLink").href = newLink;<br />
return;<br />
}<br />
</script>
The link CSS to make it look like a button:
<style type="text/css">
<!--
#myCustomLink {
background-image: url('myCustomButtonImage.jpg');
background-repeat: no-repeat;
background-color: transparent;
background-position: top left;
width: 109px;
height: 30px;
border: 0px;
cursor: pointer;
margin: 1px 0px 0px 4px;
clear: none;
text-align: center;
display: inline-block;
}
a#myCustomLink {
color: #484848;
text-transform: uppercase;
text-decoration: none;
font-size: 0.8em;
font-family: Arial, Verdana;
padding: 7px 0px 0px 0px;
}
--><br />
</style>
The HTML:
<form name="myFormName"> <select name="mySelectName" onchange="update();"> <option value="" selected="selected">Choose an option...</option> <option value="http://someURL.com">Option Value 1</option> <option value="http://someURL.com">Option Value 2</option> <option value="http://someURL.com">Option Value 3</option> <option value="http://someURL.com ">Option Value 4</option> <option value="http://someURL.com">Option Value 5</option> </select> <a href="#" class="myFancyBoxClass" name="all" id="myCustomLink">SUBMIT</a> </form>
Below is a working example. Make a selection from the drop down, and then click the submit button. You should see the website pop up in a FancyBox iframe.
[sc:fancybox_drop_down ]
hmmmm, really interesting