0

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

Improve this question

1 Answer 1

Reset to default
2

  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

Improve this answer
7
  • 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
    Commented Jul 23, 2012 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
    Commented Jul 23, 2012 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
    Commented Jul 24, 2012 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
    Commented Jul 24, 2012 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
    Commented Jul 24, 2012 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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