I've have a jQuery plugin I'm using in my Drupal 7 site to make a fullpage background slider. I load it from a javascript file. How can I get the image names from Drupal's database instead of having to manually edit the list of images in the javascript file?

Here's the .js I load in my theme:

(function($) {
  Drupal.behaviors.BackgroundSlider = {
    attach: function(context, settings){
          , "/sites/default/files/styles/background_transition/public/8bad4c95b3776bed84222abe4c5288ba.jpeg?itok=cKq-2Dgj"
          , "/sites/default/files/styles/background_transition/public/78cefce14e9d9a613b0bc1950da662c6.jpeg?itok=4pAyvgsM"
          , "/sites/default/files/styles/background_transition/public/00336b1506db0487ea33af734abd3b16.jpeg?itok=QcS5dV2K"
      ], {duration: 3000, fade: 750});
  • 1
    Are they coming from different nodes with image field of 1, or they are coming from a single image field with unlimited values?
    – No Sssweat
    Jan 28 '17 at 8:15
  • You do that in PHP, in a custom module for example. And then pass them over to JS.
    – leymannx
    Jan 28 '17 at 19:04

Here's another option - how about create a view to generate JSON for the image paths and then pull that into your JS?

The module "Views Datasource" can output your view as JSON. You would need to create a view that pulls the images from the content type you are using and make sure that the image is rendered as a URL (rather than the actual image tag).

From there you could update your JS to pull the JSON from the view output. Create a loop that sets a variable with the JSON data (as a comma separated list) and use that variable within your backstretch function.

I can't provide any code examples at this time, but hopefully that can get you started down a path. Here is a stackoverflow article that provides examples on how to convert JSON to CSV and store that in a variable:


  • Hey that's a good idea. Thanks I'll do some research on it Jan 29 '17 at 2:48

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