Change img src= to img data-src=

Question: Is there a js that will change img src= to img data-src=?

I'm going use the "Lazy Load Bootstrap Carousel Images" script referenced here: http://bulkan-evcimen.com/lazy_load_bootstrap_carousel_images.html (I've tried using preload carousel and preload image scripts but nothing seems to do the trick.)

Here's a sample link to one of my pages. Click on any of the thumbs and you'll probably see my modal/carousel load issue: http://ikonltd.com/artists/warhol/

The script requires that you use data-src= for your images in the carousel instead of src=

My thumbnails are being generated dynamically and it appears that they need to use data-src instead of src because I'm using those same images to populate my bootstrap carousel.

HTML for lazy load:

<!-- Button to trigger modal -->
<a href="#lazycarouselmodal" role="button" class="btn" data-toggle="modal">Launch lazy carousel</a>
 
<!-- Modal -->
<div id="lazycarouselmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Lazy Carousel</h3>
  </div>
  <div class="modal-body">
      <div id="ajaxloader">
         <h4> loading images please wait </h4>
         <img src="http://i.imgur.com/m1fR7ef.gif"></img>
      </div> 
    <div id="lazycarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#lazycarousel" data-slide-to="0" class="active"></li>
    <li data-target="#lazycarousel" data-slide-to="1"></li>
    <li data-target="#lazycarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img data-src="http://24.media.tumblr.com/b273172b94f360682fe9d9b5b78ad672/tumblr_mr80a1mhlR1st5lhmo1_1280.jpg"/>
    </div>
    <div class="item">
        <img data-src="http://24.media.tumblr.com/408fbfeae2d8590512b9fc9cc6207090/tumblr_mr807bH7hh1st5lhmo1_1280.jpg"/>
    </div>
    <div class="item">
        <img data-src="http://31.media.tumblr.com/11d494e09d78f3979af67e256862e85b/tumblr_mr80f71qQe1st5lhmo1_1280.jpg"/>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#lazycarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#lazycarousel" data-slide="next">›</a>
</div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

Open in new window


Javascript for lazy load:

$('div.modal').on('show', function(e){
    var carousel = $(this).find('.carousel').hide();
    var deferreds = [];
    var imgs = $('.carousel', this).find('img');
    // loop over each img
    imgs.each(function(){
        var self = $(this);
        var datasrc = self.attr('data-src');
        if (datasrc) {
            var d = $.Deferred();
            self.one('load', d.resolve)
                .attr("src", datasrc)
                .attr('data-src', '');
            deferreds.push(d.promise());
        }
    });

    $.when.apply($, deferreds).done(function(){
        $('#ajaxloader').hide();
        carousel.fadeIn(1000);
    });
});

Open in new window

phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
from the script console log I can see different errors.
Reviewing the source looks like you have messed up a lot.
You have referenced two different jQuery mobile version (one is a really really old one). Second the reference to respond.js which is in fact a HTML file and NOT pure JavaScript ...
Probably you should first solve / explain the two issues (removing ref to jQuery Mobile 1.0a2) and your intention of the respond.js.
I would also include the ref to jQuery together (and before) jQuery mobile - not through referencing in some other included files.

HTH
Rainer
0
phillystyle123Author Commented:
Thanks for looking at the code. I will clean it up. I see the 2 separate jquery mobile scripts and that respond.js is actually an html file. I believe I'm using respond.js for ie issues? been so long since i started this project i honestly don't remember.

any idea how to pull off what I'm asking for in my question?
0
leakim971PluritechnicianCommented:
Once you clean up you code :
jQuery(window).load(function() {
     jQuery('.carousel', this).find('img').each(function(i, v) {
          var src = jQuery(this).attr("src");
          alert(src); // remove this line if the script work fine
          jQuery(this).data("src", src);
     });
});

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

phillystyle123Author Commented:
thanks leakim971 - is this js to switch src to data-src?
0
leakim971PluritechnicianCommented:
jQuery(window).load(function() { // wait for complete page loading with image
     jQuery('.carousel', this).find('img').each(function(i, v) { // for each image inside the carousel (the element with .carousel class)
          var src = jQuery(this).attr("src"); // put the src value for each image in variable
          alert(src); // remove this line if the script work fine 
          jQuery(this).data("src", src); // put this src value inside data-src
     });
});

Open in new window

0
phillystyle123Author Commented:
I'm not getting this. I need this image in my carousel where the images are dynamically generated to change from this:

<img src="http://ikonltd.com/images/lg/basquiat_untitled-figure.jpg" class="thumbnail img-responsive pull-left lazy" border="0">

to this:

<img data-src="http://ikonltd.com/images/lg/basquiat_untitled-figure.jpg" class="thumbnail img-responsive pull-left lazy" border="0">

I've got your script in the header but i'm still seeing "img src=" and I need img data-src=

<script type="text/javascript">
jQuery(window).load(function() { // wait for complete page loading with image
     jQuery('.carousel', this).find('img').each(function(i, v) { // for each image inside the carousel (the element with .carousel class)
          var src = jQuery(this).attr("src"); // put the src value for each image in variable
          alert(src); // remove this line if the script work fine
          jQuery(this).data("src", src); // put this src value inside data-src
     });
});

  </script>
0
leakim971PluritechnicianCommented:
Try this :
<script type="text/javascript">
jQuery(window).load(function() { // wait for complete page loading with image
     jQuery('.carousel').find('img').each(function(i, v) { // for each image inside the carousel (the element with .carousel class)
          var src = jQuery(this).attr("src"); // put the src value for each image in variable
          alert(src); // remove this line if the script work fine 
          jQuery(this).attr("data-src", src); // put this src value inside data-src
          jQuery(this).removeAttr("src"); // remove the src attribute
     });
});

  </script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
leakim971 - this works perfectly! Thanks so much. Something I just noticed - the lazyload script requires the 1st image to use src instead of data-src. So, the image that is contained in the .active class would just use src.

<div class="active"><img data-src="img.jpg">

needs to be

<div class="active"><img src="img.jpg">
0
leakim971PluritechnicianCommented:
replace :
jQuery('.carousel').find('img')
by :
jQuery('.carousel').find('img').not(":first")
0
phillystyle123Author Commented:
Thanks for the help with the script and with the clean up -much appreciated!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.