Passing a complex PHP variable to be written by an external .js file

Question

Hello all!

This is my first post on stackoverflow. After hours of searching and trialing, StackOverflow coming up on alot of possible fixes: I decided it was time to ask the question myself. I am constructing a Wordpress powered portfolio website for my own web design work. I have done some extensive customization thus far and I am now at the final stretch. Also note I do not expect direct plugin support but I will cite the plugins being used, that it could help potentially.

Preface:

1. I am using a plugin called NextGen Gallery, this plugin powers my portfolio. All my clients have their own gallery which I display on the portfolio site.
2. I have also installed a plugin called Fancybox for Wordpress. This plugin allows for a good looking lightbox display of all my clients.
3. I have a third plugin called Custom Fields for NextGen Gallery, this plugin allows me to add custom fields specific to each gallery and image within. You will see I have already utilized this by creating custom thumbnails through a link added through the Custom Fields plugin.

All that being said my goal was to, utilizing the custom fields plugin, add html rich description text and html rich Client title text specific to each slide. The top of the slide reads the Client name and under the slide reads a description with links. I have made some progress but here is where I am stuck...

Problem:

jquery.fancybox.js will not take my PHP variable generated by "NextGen Custom Fields" plugin as it is written in a file called gallery-popportfolio.php (The template file for NGG). I have tested this extensively and had the same results. A few simple code bits added:

Within gallery-popportfolio.php I place this:

<?php $clientname = nggcf_get_gallery_field($gallery->ID, "clientnamelink"); ?>
<script type="text/javascript"> var clientname = '<?= $clientname ?>'; </script>
<script type="text/javascript" src=".../jquery.fancybox.js"></script>

Within jquery.fancybox.js I insert this: (This is a excerpt, the only thing I add is .append(clientname):

append('<div class="fancybox-bg" id="fancybox-bg-n">').append(clientname)

Now what makes this quite interesting to me, is that within gallery-popportfolio.php if I asign $clientname to be something static like a line of text. The .js file will than accept the variable and place it exactly where I need it to be. The problem is when I apply this dynamic string to the $clientname variable it simply renders nothing. As well as this, when I echo $clientname with the complex variable in the PHP file I am getting a correct result.

Question:

I am stumped, I seemed so close yet no proper result.

Am I missing a step to make the external .js file accept a more complex php variable?

Is it possible I simply need to move the php code I have written elsewhere?

What is my next best step?

NOTES:

I was following this thread to reach where I am now: StackOverflow Thread

My working portfolio site is at: EoghanMcInerney.com

Thanks in advance for any help! Much appreciated!

Answer 1

If you mean "not a string" by complex variable, for $clientname, then your code won't work.

In this line of code :

<script type="text/javascript"> var clientname = '<?= $clientname ?>'; </script>

$clientname should be a string without the ' character. I suggest you change the code above to

<script type="text/javascript"> var clientname = <?= json_encode($clientname) ?>; </script>

And when you append you should construct a string from clientname and append that.