/    Sign up×
Community /Pin to ProfileBookmark

My script interferes with fancybox

I’ve got 2 buttons with their own jquery scripts. One launches a fancybox video and the other shows a hidden popup contact form. I had the contact form (which shows another ‘thank you msg’ class when submitted) working fine, but now that I’ve added the fancybox button I think the stopPropagation is interfering with fancybox and I can’t get them to load together. Anyone know how I can approach this better?

HTML

[code=html]<div class=”buttoncont”>
<div class=”innercont”>
<div class=”thanks” style=”display:none;”><p>Thanks for contacting class</p></div>
<div class=”social”>
<!— FANCYBOX BUTTON LINK —>
<div class=”fancybox-media” href=”http://vimeo.com/9532951″ rel=”media-gallery”>
<a class=”btn”> <span class=”playarrow”></span><span>watch fancybox preview</span></a></div>
<!— FANCYBOX BUTTON LINK END—>
<!— CONTACT US LINK —>
<a class=”btn2″ href=”#innercont” id=’link’><span class=”contactbbl”></span><span>contact us</span></a>
<!— CONTACT US LINK END —>
</div>
<div id=”subscribe-pop”><p>DIV POPUP TRIGGERED FROM CONTACT US LINK</p></div>

<div id=”badge1”>
<a href=”http://www.site1.com”><img class=”badge1″ src=”images/badge1.png” height=”auto” width=”100%”></a>
</div>
<div id=“badge2”>
<a href=”http://www.site2.com”><img class=”badge2” src=”images/badge2.png” height=”auto” width=”100%”></a>
</div>

</div>
</div>[/code]

FANCYBOX SCRIPT

[CODE]<script type=”text/javascript”>
$(document).ready(function() {
$(‘.fancybox-media’)
.attr(‘rel’, ‘media-gallery’)
.fancybox({
padding: 0,
openEffect : ‘none’,
closeEffect : ‘none’,
prevEffect : ‘none’,
nextEffect : ‘none’,
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
});
</script>[/CODE]

POPUP FORM SCRIPT

[CODE]<script type=”text/javascript”>
$(‘html’).click(function() {
$(‘#subscribe-pop’).hide();
$(‘.thanks’).hide(); <!–ADDED–>
});

$(‘.innercont’).click(function(e){
e.stopPropagation();
});

$(‘#link’).click(function(e) {
$(‘#subscribe-pop’).toggle();
});

$(‘#mc_embed_signup .button’).click(function(e) { <!–ADDED–>
$(‘#subscribe-pop’).hide(); <!–ADDED–>
$(‘.thanks’).toggle(); <!–ADDED–>
});

$(‘#mc_embed_signup .cancel’).click(function(e) { <!–ADDED–>
$(‘#subscribe-pop’).hide();

});

$(‘.thanks’).click(function() { <!–ADDED–>
$(‘.thanks’).hide();
});
</script>[/CODE]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @rizzledon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...