Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a javascript that uses jquery objects to do a number of things

first it finds images that are in a table adding these to a Fancybox gallery. This gallery has the Helper buttons allowing the original image to be seen in it's full size.

Secondly it finds tables that are wider than the holding div and reduces the text font size so it fits. Adding a make bigger button so the table can be seen in all it's glory within a fancybox.

I'm new to Wordpress and am struggling to understand the following

  1. Do i need to link to jquery.ui.js & css the way you do in a html document?
  2. Where to put the code, Do i link it in the header.php or as a addition to the Fancybox plugin?

  3. How do you make a Jquery object as this doesn't work

     $(document).ready(function() {
       $("table").each(function()
        // do stuff 
         alert ("hello Holly");
       )};
    
  4. How do you add the Fancybox helper buttons?

     $(document).ready(function() {
       $(".fancybox-button").fancybox({
            prevEffect      : 'none',
            nextEffect      : 'none',
            closeBtn        : false,
            helpers     : {
            buttons : {}
            }
    });
    

    });

Thanx for your help

share|improve this question

1 Answer 1

  1. If you are not already loading the jQuery UI .js and .css files in your theme/plugin you can add them via the wp_enqueue_script function: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  2. No, add them via the enqueue scripts function.

  3. You need to wrap any inline scripts in a jQuery No Conflict wrapper.

    jQuery(document).ready(function($) {
    // do stuff // });

more on jQuery no conflict in WordPress: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

share|improve this answer
    
You can actually load the jQuery UI core .js without needing to reference an external file. Example: function your_script_loader() { wp_enqueue_script('jquery-ui-core'); } add_action('wp_enqueue_scripts', 'your_script_loader'); –  Rachel Baker Jul 23 '12 at 18:11
    
Since posting this question i read that jquery.ui is part of the core WP & is within the include directories do i still need to link to it? –  Holly Jul 23 '12 at 21:41
    
Yes, you would still need to enqueue it. See your_script_loader() function above for the code to do this. –  Rachel Baker Jul 24 '12 at 0:09
    
HI I've been struggling to get this to work all day and not got it to work I'm putting it within header.php just above </head> I've also tried <?php function my_scripts_method() { wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom_script.js', array('jquery') ); } add_action('wp_enqueue_scripts', 'my_scripts_method'); ?> custom-script is jQuery(document).ready(function() { $("table").each(function() // do stuff alert ("hello Holly"); )}; tried hard coding the link to custom-script.js & that didn't work either. –  Holly Jul 24 '12 at 16:27
    
I did manage to load custom-script from within the theams admin page and that worked but it didn't have the ui-resizable.js because jquery-ui-core isn't loaded Any suggestions what i'm doing wrong? –  Holly Jul 24 '12 at 16:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.