Inserting Advance Custom Fields in Javascript

Question

I have a file called smart screen-front.php. Inside this file I am trying to output some php variables inside some javascript:

<?php
header("Content-type: text/javascript"); // This bit must come first!
?>
<?php $ssimage1 = get_field('smartscreen_slider_image_1'); ?>
<?php $ssimage2 = get_field('smartscreen_slider_image_2'); ?>
<?php $ssimage3 = get_field('smartscreen_slider_image_3'); ?>
<?php $ssimage4 = get_field('smartscreen_slider_image_4'); ?>
<?php $ssimage5 = get_field('smartscreen_slider_image_5'); ?>
<?php $ssimage6 = get_field('smartscreen_slider_image_6'); ?>
<?php $ssimage7 = get_field('smartscreen_slider_image_7'); ?>
<script type="text/javascript">
 jQuery(document).ready(function () {

            jQuery.supersized({

                // Functionality
                slide_interval          :   10000,      // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,
                keyboard_nav            :   1,

                // Speed of transition

                // Components
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [           // Slideshow Images
                    {image : <?php echo $ssimage1; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''} ,
                    {image : <?php echo $ssimage2; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>', thumb : '', url : ''} ,
                    {image : <?php echo $ssimage3; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>', thumb : '', url : ''} ,
                    {image : <?php echo $ssimage4; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''} ,
                    {image : <?php echo $ssimage5; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''},
                    {image : <?php echo $ssimage6; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''} ,
                    {image : <?php echo $ssimage7; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''}

                    ]
            });
        }

);
</script>

This is not outputting the php variables. What am I doing wrong.

What happens if you just try to output those variables into a <div/>? Are they being populated at all? — Marc
– Marc, Commented Mar 2, 2015 at 3:57

NanoWizard · Accepted Answer · 2015-03-02 05:40:19Z

1

It looks like you may need to wrap the <?php echo ...; ?> statements in the javascript in quotes:

'<?php echo ...; ?>'

or

"<?php echo ...; ?>"

As it stands now, assuming each $ssimageX contains a string looking something like "X.jpg", the javascript ends up looking like

{image : X.jpg, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''}

Which would result in a ReferenceError unless X is defined, and could be a SyntaxError if the url has a / in it.

My guess is you want it to look more like

{image : 'X.jpg', title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''}

answered Mar 2, 2015 at 5:40

NanoWizard

2,1741 gold badge24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Inserting Advance Custom Fields in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related