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 =)

Recommended Answers

Neogy,

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

Airshow

Jump to Post

All 3 Replies

Neogy,

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

Airshow

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

:cool:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.