How to convert IMG src to JQuery?

[n_merciano]

Hi guys,

I am using cloudinary for image optimization i have found a great JQuery plugin which detects automatically the size of the browser and resizes the image for me it works perfectly when i do it like this.

 <div class="slide">
<img data-src="http://res.cloudinary.com/dp8hwcbtp/image/upload/w_auto,dpr_auto,c_limit/v1437395843/browser-1.png" class="cld-responsive" alt="Browser #1">
</div>

but now i want to add the class “cld-responsive” and add the “data-src” using JQuery.

	<script>
		jQuery(document).ready(function($) {
			var images;

			if (window.devicePixelRatio > 1) {
				images = [
					'images/banner/home/1@2x.jpg',
					'images/banner/home/2@2x.jpg',
					'images/banner/home/3@2x.jpg'
				];
			} else {
				images = [
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312882/slide-1.jpg',
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312873/slide-2.jpg',
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312876/slide-3.jpg',
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312873/slide-4.jpg',
				]; 
			}

			$("#banner").backstretch(images, {
				duration: 3500,
				fade: 750
			});
		});
	</script>

Can somebody tell me how i can solve this? or fix it?

Regards,
Nino

[djsmithme]

I can’t see your Code so not sure if this will work but…

$('#banner').find('img').addClass('cld-responsive');

As for adding the data-src you could do something like:

$('#banner').find('img').each(function(){
      $(this).attr('data-src','your data-src information');
})

[n_merciano]

Hi man,

I have tried adding it… nothing happens:

can you please take a look at my code??

http://bit.ly/1Lnlhxc this is my URL.

This is what i have tried:

	<script>
		jQuery(document).ready(function($) {
			var images;

			if (window.devicePixelRatio > 1) {
				images = [
					'images/banner/home/1@2x.jpg',
					'images/banner/home/2@2x.jpg',
					'images/banner/home/3@2x.jpg'
				];
			} else {
				images = [
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312882/slide-1.jpg',
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312873/slide-2.jpg',
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312876/slide-3.jpg',
					'http://res.cloudinary.com/dp8hwcbtp/image/upload/c_scale,q_80,w_1600/v1437312873/slide-4.jpg',
				]; 
			}
			
                          $('#banner').find('img').addClass('cld-responsive');

			$("#banner").backstretch(images, {
				duration: 3500,
				fade: 750
			});
		});
	</script>

It’s not adding the class… can you please take a look?

Thanks!

[djsmithme]

Well you only added:

$('#banner').find('img').addClass('cld-responsive');

You can check in firebug/devtools the class has been added to each of the images.

Edit: just looked at source and you’ll have to change the target to ‘.slick-slide’ or something to target the images but I’m not actually sure what your asking as the images both have data-src+class tags already.