ExpressionEngine code being used with JQuery

Question

I have been working with ExpressionEngine for awhile, but I am fairly new to Jquery.

I have a photo slideshow that works well if I hard code all the data in the template, but when I try to use ExpressionEngine variables to pull the data from the channel field it breaks the JQuery because there is extra code.

ExpressionEngine Code

    {photos}
{if "{gallery_site}" == "Facebook"} 
    {
    name:'{gallery_nav_title}',
    url:'{gallery_site_url}',
    selected:{default_gallery}
    },  
    {/if}
    {/photos}

Results

{
name:'Spring Jubilee 2016', 
url:'https://www.facebook.com/media/set/?set=a.10153370870941895.1073741883.26942986894&type=3',
selected:true 
},

This works perfectly.

Jquery Single Entry Code

$("#photomax").photomax({ 

  facebook_album_photos:[ 

{
name:'{gallery_nav_title}', 
url:'{gallery_site_url}', 
selected:{default_gallery}
},  
  ],
});

This code works perfectly

Jquery IF Statement Code Added

$("#photomax").photomax({ 

facebook_album_photos:[ 

    {if "{gallery_site}" == "Facebook"} 
    {
    name:'{gallery_nav_title}', 
    url:'{gallery_site_url}', 
    selected:{default_gallery}
    },
    {/if}

Results

$("#photomax").photomax({ 

facebook_album_photos:[ 

    {if "{gallery_site}" == "Facebook"} 
{
name:'Spring Jubilee 2016', 
url:'https://www.facebook.com/media/set/?set=a.10153370870941895.1073741883.26942986894&type=3',
selected:true 
},
    {/if}

When I place the IF statement into the code it breaks the code.

I need the If statement because I have a Matrix setup up to add Multiple galleries. The Galleries can come from Facebook or Instagram and I have different code depending on where it is coming.

Here is code showing multiple galleries working WITHOUT the IF Statement and ExpressionEngine code.

$("#photomax").photomax({ 

  instagram_user_tagged_photos:[ 
    { 
      name:"Instagram User Tag", 
      url:"https://instagram.com/muradosmann", 
      hashtag:"#followme", 
      selected:false
    }, 
  ], 

  facebook_album_photos:[ 
    { 
      name:"Facebook Album Photos", 
      url:"https://www.facebook.com/media/set/?set=a.10153495891665541.1073741843.76810820540&type=3", 
      selected:true
    }, 
  ], 

});

Answer 1

There's a few posts around on the subject but you could start with adding a config override either via the CP or if you're using an Override you should only need:

$config['protect_javascript'] = 'n';

Like this post