Can't get simple jQuery working

  • kip1790

    (@kip1790)


    15 years, 9 months ago

    Trying to use Fancybox jQuery to load up URLs in an iFrame, not the actual WP Fancybox plugin. I got the code from fancybox.net and when I load it outside of my theme folder it works fine. When I copy the exact code into my Header as below and link to the JS files it loads Google in the full page as opposed to loading up Google in the fancybox. Tried everything, really need some guidance please… 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link media='screen' href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<meta charset='utf-8' />
<?php wp_enqueue_script("jquery"); ?>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <!-- jQuery -->
<strong><script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />
      <script type="text/javascript">
		$j=jQuery.noConflict();
		$(document).ready(function() {

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

		});
	</script></strong>

    This is the link I use to test it out <a id="various3" href="http://google.ca">Iframe</a>

    Any help would be much appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • SpankMarvin

    (@spankmarvin)

    15 years, 9 months ago

    For the ‘fancybox’ files that are being referenced — are these in your theme? If so, you cannot reference them relatively. Instead reference in the following format:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

    So, add the php as a prefix to the js URLs. Also, what’s with the _strong_ tag in your head?

    Thread Starter kip1790

    (@kip1790)

    15 years, 9 months ago

    The tag was part of the post to highlight the code but didn’t bold it as anticipated.

    I tried this, I’ve even uploaded them online and reference the full URL but still no luck. I have a jquery contact form on the same page and that works fine. I removed the contact form and any references at all and it still doesn’t work.

    If I put the index.html file with the same code into my wordpress folder referencing the same JS and CSS it works fine, it’s ONLY when I add it to header.php it just doesn’t work. Any other ideas?

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Can't get simple jQuery working’ is closed to new replies.

Tags