Issue outputting php array of links to jQuery backstretch

I'm using jQuery Backstretch to load a gallery on a page. I'm now trying to make the gallery pull in images from content uploaded via custom meta boxes.

Here's the working script with hard-coded image links. All I'm doing is passing an array of links to images to backstretch, and it does the rest:

jQuery(document).ready(function($){
  $('#main').backstretch([
      "wp-content/themes/themename/assets/graphics/image1.jpg",
      "wp-content/themes/themename/assets/graphics/image2.jpg",
      "wp-content/themes/themename/assets/graphics/image3.jpg",
      "wp-content/themes/themename/assets/graphics/image4.jpg",
    ], {
    fade: 1000,
    duration: 7000
  });
});

And here's my attempt at replacing the hard-coded images with those pulled in from the custom meta. The php function outputs an array of links pulled from the custom meta:

jQuery(document).ready(function($){
  $('#main').backstretch([
      "<?php $images = rwmb_meta( 'jb_meta_page_bkg_img', 'type=image_advanced' );
        foreach ( $images as $image ) {
          echo $image['full_url'];
      } ?>"
    ], {
    fade: 1000,
    duration: 7000
  });
});

This doesn't work – backstretch loads, but the whole array is outputted as the source attribute for the first image!

Can anyone see where this is going wrong?

Answers


I suggest building the needed array in php and use json_encode().

jQuery(document).ready(function($){
  $('#main').backstretch(
      <?php 
        $images = rwmb_meta('jb_meta_page_bkg_img', 'type=image_advanced');
        $result = array();
        foreach ($images as $image) {
          $result[] = $image['full_url'];
        }
        echo json_encode($result);
      ?>, {
    fade: 1000,
    duration: 7000
  });
});

try

jQuery(document).ready(function($){
  $('#main').backstretch([
      "<?php $images = rwmb_meta( 'jb_meta_page_bkg_img', 'type=image_advanced' );
        echo implode('", "', $images); ?>"
    ], {
    fade: 1000,
    duration: 7000
  });
});

Need Your Help

how to get horizontal depth of a node?

xml ruby xpath nokogiri

note i made up the term horizontal depth to measure the sub-dimension of a node within a tree.

Spy / Watch variable in Android (Eclipse)

java android eclipse variables

I am new to Android development with Eclipse. I am asking a very basic question :