WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
How to make changes to Fancybox javascript values? (11 posts)

  1. ElectricFeet
    Member
    Posted 6 months ago #

    Hi guys.

    Before the recent upgrades, I used to modify my Fancybox attributes by changing class-fire-ressources.php so that the Fancybox script read:

    <script type="text/javascript">
    	jQuery(document).ready(function( $) {
          // Fancybox
          $("a.grouped_elements").fancybox({
            'transitionIn'  : 'elastic' ,
            'transitionOut' : 'elastic' ,
            'speedIn'   : 200,
            'speedOut'    : 200,
            'overlayShow' : true,
            'hideOnOverlayClick' : true,
            'autoScale' : <?php echo ($autoscale == 1) ? 'true' : 'false' ?>,
            'changeFade' : 'fast',
            'enableEscapeButton' : true,
            'overlayOpacity' : '0.3',
            'onStart' : function(currentArray,currentIndex){
               var obj = currentArray[ currentIndex ];
               this.title = $(obj).find('img').attr("alt");
               },
            'titleFromAlt' : true,
            'titlePosition' : 'inside'
          });
    	});
    </script>

    Now this code has been taken out of class-fire-ressources.php and has been placed in tc-scripts.min.js (I understand why: the performance will be much better -- and my hack for getting individual titles is now included in the theme's functionality).

    However, I still require:

    'overlayShow' : true,
    'hideOnOverlayClick' : true,
    'overlayOpacity' : '0.3',
    'titlePosition' : 'inside'

    I can, of course go in and modify the minified file and I've found that it works if I do so. But (a) it's overwritten when the theme is updated and (b) editing a minified file is a bit of a pain.

    Can someone tell me the "correct" way to modify my child theme to change some of the javascript variable values?

  2. Andrew
    Forum Moderator
    Posted 6 months ago #

    Generally - I thought:
    - Find where the script is being enqueued and note down the enqueue handle
    - Then go to your Child Theme functions.php file and dequeue that script using its handle
    - And then enqueue the script you want to use instead through your Child Theme functions.php file

  3. ElectricFeet
    Member
    Posted 6 months ago #

    Thanks for responding Andrew, much appreciated.

    I haven't a clue what most of that means :-) but it sounds logical.

    I've at least been able to understand enough to do the legwork:

    tc-scripts.min.js is loaded in class-fire-ressources.php with the line:

    //tc scripts
    wp_enqueue_script( 'tc-scripts' ,TC_BASE_URL . 'inc/js/tc-scripts.min.js' ,array( 'jquery' ),null, $in_footer = true);

    I presume I therefore dequeue it in my functions.php with:

    //tc scripts
    wp_dequeue_script( 'tc-scripts');

    How do I then re-enqueue? And, more importantly, what do I requeue? If I'm simply requeueing the whole minified script, then I haven't really gained anything, as I would still need to edit it anyway.

    I was hoping that there would be some clever hooky-way to get into the script (or fancybox itself).

  4. Andrew
    Forum Moderator
    Posted 6 months ago #

    How do I then re-enqueue?

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Usage
    This is the enqueue function with parameters:

    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

    For convenience compare that to how the theme originally enqueued that file:

    //tc scripts
    wp_enqueue_script( 'tc-scripts' ,TC_BASE_URL . 'inc/js/tc-scripts.min.js' ,array( 'jquery' ),null, $in_footer = true);

    That should be a good example of how to enqueue your script, but do note that it's an example.
    You'd want something like this, with, I assume, the handle and path changed:

    wp_enqueue_script( 'tc-scripts-child' ,  get_stylesheet_directory_uri() . '/js/tc-scripts.js' ,array( 'jquery' ),null, $in_footer = true);

    That would mean you'd need a "js" folder with your "tc-scripts-child.js" file in your Child Theme folder.

    What I've then always done is wrap that enqueue in a function and then use the add_action hook for that function, e.g:

    function fancybox_scripts() {
    	wp_enqueue_script( 'tc-scripts-child' ,  get_stylesheet_directory_uri() . '/js/tc-scripts.js' ,array( 'jquery' ),null, $in_footer = true);
    }
    
    add_action( 'wp_enqueue_scripts', 'fancybox_scripts' );
  5. Andrew
    Forum Moderator
    Posted 6 months ago #

    And, more importantly, what do I requeue?

    That'll be your modified "tc-scripts" file. So copy the JS that's in the non-minified "tc-scripts" file and paste it into a new file in your Child Theme "js"(?) folder? Then make your tweaks to that file in your Child Theme.

  6. Andrew
    Forum Moderator
    Posted 6 months ago #

    If I'm simply requeueing the whole minified script, then I haven't really gained anything

    You wouldn't be losing your modification when the theme updates

  7. Andrew
    Forum Moderator
    Posted 6 months ago #

    Sorry could you clarify this:

    I would still need to edit it anyway.

    I can't see how you'd get around editing a file in this situation

  8. ElectricFeet
    Member
    Posted 6 months ago #

    Wonderful! Thanks Andrew.

    I guess the ideal situation would be for @Nikeo to give us a new hook so that we can add parameters, similar to how he does with the tc_post_list_layout hook.

    But maybe it's too late now for more Xmas presents :-)

  9. Andrew
    Forum Moderator
    Posted 6 months ago #

    ;)

  10. nikeo
    Member
    Theme Author

    Posted 6 months ago #

    @electricfeet,I love this sentence :

    I haven't a clue what most of that means :-) but it sounds logical.

    :-D

    by the way you are right, to be more flexible, this should be handled by a hook of parameters "localized" (meaning injected from php to javascript) in the script afterwards. I am definitely going to improve this.

    Thanks for this interesting thread (I guess this will be useful for many users) and those crystal clear explanations @Andrew!

  11. ElectricFeet
    Member
    Posted 6 months ago #

    :-)

Reply

You must log in to post.

About this Theme

About this Topic