Change data-src to src via jquery

Question

Im using a flexslider that has audio files for each slide, but I don't want to load countless audio files right away on the page. So im trying to get the data-src to become the src after each slide

the slides are currently as follows:

<div class="flexslider carousel">
<ul class="slides">
<li> 
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide01.jpg"  /> 
<audio id="demo" controls>
   <source src="/skin/frontend/gigasavvy/quinn/audio/Slide1.mp3" type="audio/mpeg" />
</audio>
</li>
<li> 
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide03.jpg"  /> 
<audio id="demo" controls>
   <source data-src="/skin/frontend/gigasavvy/quinn/audio/Slide3.mp3" src="" type="audio/mpeg" />
</audio>
</li>
</ul>
</div>

In the after function i want to change data-src to src. Any help would be greatly appreciated as how to go from data-src to src

You can't change it. All you can do is add a new attribute and remove a previous one. — user400654
– user400654, Commented Jun 25, 2014 at 17:08
I think a better solution would be to set < audio preload="none">, which will just turn off all preloading of files. Or if you really want preload of the current slide, change the preload property to "auto" when the slide is visible. — Ringo
– Ringo, Commented Dec 8, 2016 at 19:18

Mike · Accepted Answer · 2021-10-08 04:53:38Z

2

Renaming an attribute is not be possible. You can add new attribute and remove the old one.

Suppose there is a click event as in the following example:

$('#demo').on("click", "img", function () {
   var t = this;
   var source = $(t).children("source");        
   $source.attr({
       src: $t.attr('data-src')
   }).removeAttr('data-src');
}

Please modify the event according to your requirements.

edited Oct 8, 2021 at 4:53

Mike

1,1765 gold badges22 silver badges33 bronze badges

answered Jun 25, 2014 at 17:11

dvk317960

8227 silver badges11 bronze badges

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

1 Comment

RMH Over a year ago

thank you very much, that saved the day. I have 37 slides with audio files and that keeps the page going. Thank you again @dvk317960

Raenix · Accepted Answer · 2014-06-25 17:04:07Z

0

Try this:

$('source').attr("src", $(this).data('src'));
$('source').removeAttr('data-src');

This should move the url from data-src to src, and then remove the data-src attribute.

answered Jun 25, 2014 at 17:04

Raenix

663 bronze badges

1 Comment

ysimonx Over a year ago

it's : $('source').attr("src", $(this).data('data-src'));

Adam Merrifield · Accepted Answer · 2014-06-25 17:04:19Z

0

Inside the after function get the currently visible slide and then get the auto on it and it's source. Next check to see if it already has a src attribute. If not then set it to it's own .data('src'). Add this into the flexslider object.

after: function(){
    var $currentAudio = $('.flex-active-slide audio source');
    if(!$currentAudio.attr('src')){
        $currentAudio.attr('src', $currentAudio.data('src'));
    }
}

answered Jun 25, 2014 at 17:04

Adam Merrifield

10.4k4 gold badges44 silver badges60 bronze badges

Collectives™ on Stack Overflow

Change data-src to src via jquery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related