How to make changes to Fancybox javascript values?

(@electricfeet)

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?

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

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 5 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
Thread Starter ElectricFeet
(@electricfeet)

12 years, 5 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).
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 5 months ago
How do I then re-enqueue?

http://codex.ww.wp.xz.cn/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' );
```
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 5 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.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 5 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

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 5 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

Thread Starter ElectricFeet
(@electricfeet)

12 years, 5 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 🙂

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 5 months ago

😉

Theme Author presscustomizr
(@nikeo)

12 years, 5 months ago

@electricfeet,I love this sentence :

I haven’t a clue what most of that means 🙂 but it sounds logical.

😀

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!

Thread Starter ElectricFeet
(@electricfeet)

12 years, 5 months ago

🙂

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

The topic ‘How to make changes to Fancybox javascript values?’ is closed to new replies.

Tags