exchange data-src for src with javascript

Asked

Viewed 452 times

2

On the site I’m doing I have a bunch of thumbnail on which when clicked goes to another page where there are several blocks of code. Each block corresponds to a Thumb. The problem is that I need that when it goes to another page it does not load any <iframe> except the one from the Humb I clicked on. I found a code right here in Stak in English but it doesn’t exactly fit the purpose and as I’m starting in back-end I came to you.

Home page

Let’s assume that this link tag is a Thumb that when clicking goes to internal.php

<a href="interna.php#thumb1" class="thumb" ></a>

Home page

When inside the code changes Data-src by src to load the video in question

<div id="thumb1">
    <iframe width="820" height="420" data-src="https://www.youtube.com/embed/eBordIVMoDQ" frameborder="0" allowfullscreen></iframe>
</div>

Code that I’m using

Code found in Stackoverflow

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

  }).removeAttr('data-src');
}

This is the solved code (Obs: I did on the same page with pop-up):

   $(document).ready(function(){
        var iframes = $('iframe');  
        $('.button').click(function() {
            iframes.attr('src', function() {
                var src = $(this).attr('data-src');
                $(this).removeAttr('data-src');
                return src;
            });
        });
    });
javascript iframe

  • Your iframe is already using src started. It’s not wrong?

  • @Guilhermenascimento yes it was just a typo, but still I can’t get success here in my code.

  • managed to solve?

  • Do not edit the question to add an answer, so use the "Answer" button, please read Help: http://answall.com/help

  • The home page is one and the internal.php is another? What is currently happening?

1 answer

2

This code you put up has several problems:

$('.thumb').on("click", "img", function () {
    var t = this;
    var source = $(t).children("iframe");        
    $source.attr({
        src: $t.attr('data-src')
      }).removeAttr('data-src');
}
  • foul ) at the end after }
  • foul $ in the variable name here var source = ...
  • $t does not exist, has never been declared

Suggested code to change the src of iframe would be:

$('.thumb').click(function(e) {
    e.preventDefault();
    var src = this.getAttribute("href").split('#');
    var id = src.pop();
    var url = src[0];
    var iframe = document.querySelector('#' + id + ' iframe');
    iframe.src = iframe.dataset.src;
});

In steps:

  • prevents the link from being followed
  • extracts what is in href anchor
  • separates into id and url. (Note: I don’t understand why you need this interna.php?)
  • selects the iFrame using the id that we picked up at the anchor`
  • assigns to the iframe the src that is on its own data-src

Example: http://jsfiddle.net/y08tn7r0/

Browser other questions tagged javascript iframe

You are not signed in. Login or sign up in order to post.