[Plugin: FancyBox for WordPress] how to retain other effects in wordpress aswell

Hi,

You have two instances of jQuery loaded on your blog. This might be cause by theme loading jquery manually from the header.php file.

Open that file in the theme folder and look for a line like this or similar:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

If you find that line there you’ll have to ask the theme author to use the WordPress functions available to load javascript. For example, in WP jQuery should be loaded like this from the functions.php file of a theme:

function jquery_load() {
  wp_enqueue_script('jquery'); // Load jQuery
}
add_action('wp_print_scripts', 'jquery_load');

This method prevents jquery or other scripts from being loaded twice which causes problems. More info can be found here: https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script

thanks for the quick reply moskis .. Although i understand partially of what you are sayin .. at the same time i need to know, inorder to solve the problem how many files do i need to edit this code?

they say there is a jQuery UI framework for icons .. how i get fancybox to work now ?

I’m still assuming the theme loads all the javascript like jquery manually as i explained before, so in that case a couple of files would have to be edited, all the javascript should be removed from themefolder/header.php and added to themefolder/functions.php

jQuery UI is bundled with WordPress so to load jquery and jquery ui (the theme doesn’t need to include them) plus the theme additional scripts, something like this would be good:

In functions.php add:

function fullscren_theme_js() {jquery-ui-dialog
  wp_enqueue_script('jquery-ui-core', array('jquery')); // Load jQuery and jQuery UI core
  wp_enqueue_script('jquery-ui-dialog'); // jQuery UI Dialog
  wp_enqueue_script('fullscreen', get_bloginfo('stylesheet_directory') . '/js/theme.js');
  wp_enqueue_script('fullscreen-nav', get_bloginfo('stylesheet_directory') . '/js/nav.js');
}
add_action('wp_print_scripts', 'fullscren_theme_js');

Create a new theme.js file in theme’s “js” folder and add this:

jQuery(document).ready(function(){
    jQuery(navigationArrow("https://visioninsight.net/blog/wp-content/themes/fullscreen/fullscreen/images/arrow.png"));
});
jQuery(function(){
	// Dialog
	jQuery('#dialog').dialog({
		autoOpen: false,
		modal: true,
		width: 600,
		height: 400,
		buttons: {
			"Close": function() {
				jQuery(this).dialog("close");
			}
		}
	});
	// Dialog Link
	jQuery('#dialog_link').click(function(){
		jQuery('#dialog').dialog('open');
		return false;
	});
	//hover states on the static widgets
	jQuery('ul#icons li').hover(
		function() { jQuery(this).addClass('ui-state-hover'); },
		function() { jQuery(this).removeClass('ui-state-hover'); }
	);
});

And in header.php remove all of this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" charset="utf-8"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(navigationArrow("https://visioninsight.net/blog/wp-content/themes/fullscreen/fullscreen/images/arrow.png"));
});
jQuery(function(){
	// Dialog
	jQuery('#dialog').dialog({
		autoOpen: false,
		modal: true,
		width: 600,
		height: 400,
		buttons: {
			"Close": function() {
				jQuery(this).dialog("close");
			}
		}
	});
	// Dialog Link
	jQuery('#dialog_link').click(function(){
		jQuery('#dialog').dialog('open');
		return false;
	});
	//hover states on the static widgets
	jQuery('ul#icons li').hover(
		function() { jQuery(this).addClass('ui-state-hover'); },
		function() { jQuery(this).removeClass('ui-state-hover'); }
	);
});
</script>
<script type="text/javascript" src="https://visioninsight.net/blog/wp-content/themes/fullscreen/fullscreen/js/nav.js"></script>

As you can see it quite a bit of work and if there’s any directory or file in the wrong place it won’t work. Give it a go if you like (make a backup first) and be sure to ask the theme author to fix it himself. ??

Also on s side note i do not know what jQuery UI Dialog components the theme requires, looking at the code it might only need the dialog component so i included in the example above.

I completely forgot you should also and first of all try a troubleshooting option in the fancybox for wordpress options, option called do not call jquery.

In your case that might work as well but the theme should be fixed nonetheless. ??

And in the functions.php code block i made a typo, use this one:

function fullscren_theme_js() {
  wp_enqueue_script('jquery-ui-core', array('jquery')); // Load jQuery and jQuery UI core
  wp_enqueue_script('jquery-ui-dialog'); // jQuery UI Dialog
  wp_enqueue_script('fullscreen', get_bloginfo('stylesheet_directory') . '/js/theme.js');
  wp_enqueue_script('fullscreen-nav', get_bloginfo('stylesheet_directory') . '/js/nav.js');
}
add_action('wp_print_scripts', 'fullscren_theme_js');

I have tried the last solution you have given where i go into troubleshooting option and check on the do not call jquery and i have also turned off conflict mode .. which inturn helps run the blog smoothly.

I completely forgot you should also and first of all try a troubleshooting option in the fancybox for wordpress options, option called do not call jquery

Where is this option?/ I can’t find it. fancybox 1.2.6

I was told that fancybox loading “out of order” might be causing my intermittent jquery conflict /jquery access denied error.

goldenimage the options is in the TroubleShooting tab in the plugin’s options page.