Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    My script conflicts 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:
    <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>
    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>
    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>
    Last edited by VIPStephan; 02-13-2014 at 07:48 AM. Reason: corrected code BB tags


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •