jQuery is no more working when I use inline method

Tominator

unread,

May 24, 2009, 10:53:55 AM5/24/09

to fancybox

I set inline method for fancy_box, but jQuery was no more working in
FancyBox. It works in original code, but not in Fancy box.
I want to use fancy box for login, registration and others, and I want
to use effects.
What should I do to fix this problem?

Tomas

JFK

unread,

May 25, 2009, 2:08:15 PM5/25/09

to fancybox

Don't get me wrong, I am not trying to be rude BUT I think this is now
the time for people posting questions in this forum to be VERY
specific and provide links with examples if they want to be helped.
Also, people should read and be sure that they understand fully how to
implement fancybox ..... some basic understanding of all: html, css
and jquery will be very useful to avoid basic issues.

Additionally, people should look for similar threads previously posted
that may help them to solve the issue they have before they post a new
thread (it's a little bit tiring to be answering the same questions
over and over again)

I don't really see what the problem is with the description here so
please Tomas, could you be more specific?

Tominator

unread,

May 26, 2009, 8:26:31 AM5/26/09

to fancybox

I am really sorry, here is source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta name="author" content="Tomáš Bončo">

<title>Test</title>
<link type="text/css" href="style/jquery.fancybox.css"
rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plugins/UI/jquery.fancybox.js"></
script>
<script type="text/javascript" src="plugins/UI/jquery.easing.js"></
script>

<script>
$(document).ready(function(){

$("#data").hide();

/* Using custom settings */

$("#login").fancybox({
'hideOnContentClick': false,
'frameWidth': 800,
'padding': 10
});

$("a.group").fancybox({
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'overlayShow': true
});

$(".text").click(function(){
alert("clicked");
});
});
</script>
</head>

<body>
<a id="login" href="#data" title="LOGIN PAGE">Login</a>
<div id="data">
<input type="text">
<div class="text">Click Me</div>
</div>

</body>
</html>

JFK

unread,

May 26, 2009, 3:02:32 PM5/26/09

to fancybox

ok, I guess what you call 'jquery stop working on fancybox' is because
your following alert doesn't work within the fancybox:

$(".text").click(function(){
alert("clicked");
});

if you want this alert or any other jquery function to work within a
fancybox then you have to call them when you activate fancybox with
the option 'callbackOnShow'

so move your alert to your #login id (the element which opens in
fancybox) like this:

$("#login").fancybox({
'hideOnContentClick': false,
'frameWidth': 800,

'padding': 10,
'callbackOnShow': function() {
$(".text").click(function (){

alert("clicked");
});
}
});

this should do the trick

Reply all

Reply to author

Forward