JavaScript images

JavaScript
1

I found a realy simple slideshow where the images are declared in the JS function like this:

<script type="text/javascript">
	$(document).ready(function() {
		$(".wrapper").backgroundCycle({
			imageUrls: [
				'res/img/bg1.jpg',
                'res/img/bg2.jpg',
                'res/img/bg3.jpg'
            ],
            fadeSpeed: 2000,
            duration: 5000,
            backgroundSize: SCALING_MODE_COVER
        });
    });
</script>

Since in my situation the images are coming from the database and I want random images to appear every time the page is opened I would prefer to declare the images not in the JS function but have them in the HTML. What should I change to make that happen. Thank you all in advance

2

That would be a better idea anyway. :-) Now I don’t know what library you are using for this, but generally you might specify them as a comma separated list in a data-* attributes…

<div class="wrapper" data-image-urls="http://lorempixel.com/400/200/technics/1/,http://lorempixel.com/400/200/technics/2/">
  ...
</div>

$('.wrapper').each(function () {
  var imageUrls = this.dataset.imageUrls.split(',')

  $(this).backgroundCycle({
    imageUrls: imageUrls,
    fadeSpeed: 2000,
    duration: 5000,
    backgroundSize: SCALING_MODE_COVER
  })
})

But since these images are most probably getting appended to the wrapper element as img elements anyway, you might just as well put them in the markup from the start… if that extension allows that of course.

3

I am using PHP to loop over them i.o

foreach (#slider-images as #slider-image){
<img src"img/carousel_img/<?= #slider-image['image'];>">
endforeach

When IO could use this loop within the JS fumction it is ok for me as well.

4

No I meant which jQuery extension you’re using… is it this one? The documentation is a bit meager there, but looking at the code it doesn’t look like you can use existing img elements…

5

Hi. Yes that is the extension I’m using

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.