0

Okay I have an issue....I have two things I want to happen on the same page....I have a slide in menu (Jquery contact form) where people can write me an email and a FancyBox gallery..

But these two javascripts wont play nice...if both are enable as they are now, The contact portion work fine but the images opens in an empty browser window instead of the fancyBox style.

The Code
Contact Javascript

$(document).ready(function(){
									  
                $("#contactLink").click(function(){						 
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
            });
         
             function closeForm(){
                $("#messageSent").show("slow");
                 setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }

The FancyBox Code

$(document).ready(function() {
			$("a.zoom").fancybox();

			$("a.zoom1").fancybox({
				'overlayOpacity'	:	0.7,
				'overlayColor'		:	'#FFF'
			});

			$("a.zoom2").fancybox({
				'zoomSpeedIn'		:	500,
				'zoomSpeedOut'		:	500
			});
		});

Any suggestions would be greatly appreciated =)

2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by Airshow
1

Neogy,

First thing to try is to combine the two code blocks above into a single $(document).ready(function(){.....}); structure.

Airshow

0

Neogy,

First thing to try is to combine the two code blocks above into a single $(document).ready(function(){.....}); structure.

Airshow

I have tried several different methods of combining the two javascript, but most resultet in none of the scripts working...but then I tried the following code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
   <!-- <script type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>-->
	<script type="text/javascript">
	
		$(document).ready(function() {
			$("a.zoom").fancybox();

			$("a.zoom1").fancybox({
				'overlayOpacity'	:	0.7,
				'overlayColor'		:	'#FFF'
			});

			$("a.zoom2").fancybox({
				'zoomSpeedIn'		:	500,
				'zoomSpeedOut'		:	500
			});
			$("#contactLink").click(function(){

			if ($("#contactForm").is(":hidden")){
			$("#contactForm").slideDown("slow");
			}
			else{
			$("#contactForm").slideUp("slow");
			}
			});
			
		});
		function closeForm(){
                $("#messageSent").show("slow");
                 setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }
	</script>

disabling the javascript for the contact rolldown menu and combining the two ready functions worked...thank you Air...thank you very much

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.