Loading iframe fancy box via select / option tag.

petar

unread,

Apr 30, 2010, 4:02:04 PM4/30/10

to fancybox

Hello,

I need to enable the user to open up the fancy box with iframe by
selecting an option from a drop down select.

So for instance.

<form>
<select>
<option value-"1" id="o1"> option 1 </option>
<option value-"trigger"id="o2"> trigger </option>
<option value-"3" id="o3"> option 3 </option>
</select>
</form>

where the option "trigger" would call out the fancy box. I know very
little javascript but I tried modifying things myself and to pass
along the link for the iframe by OnFocus and OnChange ... no luck :(

Any help with this or guidance in the right direction is greatly
appreciated!
Thanks in advance!

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

petar

unread,

Apr 30, 2010, 6:03:57 PM4/30/10

to fancybox

I found this interesting solution from another post, but it still
doesn't work, I wonder if someone could take a look and tell me if I'm
doing something wrong as it is calling the fancy box out, just not
loading it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/
jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="/fancybox/
jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/
jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="style.css" />

<script type="text/javascript" >
$(document).ready(function() {
$("a.fancylink").fancybox();
});
</script>

</head>
<body>
<a class="fancylink" href="loadOverlay.html"></a>

<p onclick='$("a.fancylink").trigger
("click");'>open fancybox from paragraph</p>
<p> </p>

<form><select><option onclick='$("a.fancylink").trigger
("click");'> click </option></select> </form>
</body>
</html>

Ozu Natsu

unread,

Apr 30, 2010, 6:24:07 PM4/30/10

to fanc...@googlegroups.com

First of all, your select should have an id. You can then use jquery
to select it.

In the document ready function, bind your function to the change event as such:

$("#status").change(function(){
statusChanged();
});

in the statusChanged(){

$.fancybox({'option: 'value'});

petar

unread,

May 2, 2010, 11:53:36 AM5/2/10

to fancybox

Thanks so much for your help,
I couldn't get it to work your way. But I found a different solution
and am posting it here if anyone has a need for it:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/
jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="/fancybox/
jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/
jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="style.css" />

<script type="text/javascript" >
$(document).ready(function(){

$("#autostart").fancybox({
'width': 800,
'height': 700,
'type': 'iframe'

});
});

</script>

</head>
<body>

<a href="loadOverlay.html" id="autostart" style="display:none"></a>
<form><select>
<option value="op1">option 1</option>
<option value="op2" onclick="$
('#autostart').trigger('click');">trigger</option>
<option value="op3">option 3</option>
</select> </form>
</body>
</html>

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

On Apr 30, 6:24 pm, Ozu Natsu <ozu.na...@gmail.com> wrote:
> First of all, yourselectshould have an id. You can then use jquery

> toselectit.
>
> In the document ready function, bind your function to the change event as such:
>
> $("#status").change(function(){
> statusChanged();
> });
>
> in the statusChanged(){
>
> $.fancybox({'option: 'value'});
>
>
>
> }
> On Fri, Apr 30, 2010 at 3:02 PM, petar <petarsubo...@gmail.com> wrote:
> > Hello,
>
> > I need to enable the user to open up the fancy box withiframeby
> > selecting an option from a drop downselect.
>
> > So for instance.
>
> > <form>
> > <select>
> > <option value-"1" id="o1"> option 1 </option>
> > <option value-"trigger"id="o2"> trigger </option>
> > <option value-"3" id="o3"> option 3 </option>
> > </select>
> > </form>
>
> > where the option "trigger" would call out the fancy box. I know very
> > little javascript but I tried modifying things myself and to pass

> > along the link for theiframeby OnFocus and OnChange ... no luck :(

>
> > Any help with this or guidance in the right direction is greatly
> > appreciated!
> > Thanks in advance!
>
> > --
> > You received this message because you are subscribed to the Google Groups "fancybox" group.
> > To post to this group, send email to fanc...@googlegroups.com.
> > To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

> > For more options, visit this group athttp://groups.google.com/group/fancybox?hl=en.

>
> --
> You received this message because you are subscribed to the Google Groups "fancybox" group.
> To post to this group, send email to fanc...@googlegroups.com.
> To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

> For more options, visit this group athttp://groups.google.com/group/fancybox?hl=en.

Reply all

Reply to author

Forward