0

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

Results of Single Engine Code

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}

IF Statement Results

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
    }, 
  ], 

});

Multiple Code Results

  • It would help if you show us the rendered code when you have that if statement inside of the JavaScript array. Also, that example does not seem to have your variable pair {photos} in it. – jrothafer May 5 '16 at 19:13
  • I will edit and show the results, but the {photos} variable is an ExpressionEngine variable to identify the Channel and then the other variables are the fields within the {photos} channel. – Trevor Griffith May 5 '16 at 19:19
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

| improve this answer | |
  • Thanks stuartmcd69. You say that there are several post about this discussion. What did you search for? I did research before I made the post and couldn't find what I was looking for. – Trevor Griffith May 9 '16 at 13:44
  • That worked Stuartmcd69! Thank you. – Trevor Griffith May 9 '16 at 15:43
  • I think searched for JavaScript template expressionengine - like the one I linked to. – stuartmcd69 May 10 '16 at 1:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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