Issue outputting php array of links to jQuery backstretch

Question

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?

ThW · Accepted Answer · 2014-02-04 18:13:56Z

1

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
  });
});

answered Feb 4, 2014 at 18:13

ThW

19.5k3 gold badges25 silver badges47 bronze badges

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

1 Comment

jasonbradberry Over a year ago

Just done some further testing, and am getting no images loading on iPhone. Have now posted this as a seperate issue here: stackoverflow.com/questions/22489419/…

user5332 · Accepted Answer · 2014-01-30 13:44:36Z

0

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
  });
});

answered Jan 30, 2014 at 13:44

user5332

7743 gold badges9 silver badges19 bronze badges

1 Comment

jasonbradberry Over a year ago

Thanks – tried but no luck. This just outputs the word "Array" as the source output, not the url itself. I need to use $image['full_url']; to get the correct url for each image, but not sure how to add that in to what you've suggested.

Collectives™ on Stack Overflow

Issue outputting php array of links to jQuery backstretch

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related