How do I select a href variable that is in a while loop?

Question

I have a while loop that select multiple images from a database. I have a link with a href and there is a function when it's clicked, it will open up a video modal box. Right now it's only selecting the first href link no matter which one is selected. How do I make sure it's the proper href rather than only the first one?

PHP: this part works fine.

while ($row = $q->fetch()): 

?>

  <li class="item <?php echo $row['type'];?>"><a href="<?php echo $row['link'];?>" class="test-popup-link">
  <?php if($row['img']) { ?>
  <img src="upload/videoCovers/<?php echo $row['img'];?>" alt="<?php echo $row['title'];?>">
  <?php } 
        else { ?>
  <img src="upload/videoCovers/playBtn.png" alt="<?php echo $row['title'];?>">
  <?php } ?>
  </a>
  </li>

JavaScript:

$(document).ready(function(){   
    var videoLink = $(".test-popup-link").attr("href");

    $('.test-popup-link').magnificPopup({
        items: {
          src: videoLink
        },
        type: 'iframe' // this is default type
    });
});

Answer 1

I don't know anything about that plugin but, you'll probably want to loop through all the elements with the .test-popup-link class and invoke .magnificPopup() . Consider the following:

$(document).ready(function(){   
    $('.test-popup-link').each(function() {
      $(this).magnificPopup({
          items: {
            src: $(this).attr('href')
          },
          type: 'iframe' // this is default type
      });
    });
});

Edit : After a quick look at the Magnific Popup Documentation , it looks like you can use the following example as well.

[...] Use this method if you are creating a popup from a list of elements in one container. Note that this method does not enable gallery mode, it just reduces the number of click event handlers; each item will be opened as a single popup

html

<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>

javascript

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

So in your case, you may want to consider targeting the ul parent to your list.

Answer 2

Let me point out few problems in your code

$(document).ready(function(){   
    var videoLink = $(".test-popup-link").attr("href"); // ( 1 )

    $('.test-popup-link').magnificPopup({               //( 2 )
        items: {
          src: videoLink                                //( 3 )
        },
        type: 'iframe' // this is default type
    });
});

1. $(".test-popup-link").attr("href"); Here the code $(".test-popup-link") will return you all the elements with the class test-popup-link , so you will get a collection of nodes, which is fine. Now when you do .attr("href") only the first node in the collection is selected and its href is returned .
2. You are trying to apply the plugin to all the elements with the class test-popup-link which is fine unless the inner configurations of the plugin is the same. In your case it varies in the videoLink value, So you cannot use it in a generic way. You have to use a loop to apply plugin .
3. As mentioned above, your videoLink hold only the first elements href and only this first href value will be applied to all .

So the solution would be to use a loop to apply the plugin . Here is the code

$(document).ready(function(){   
    $.each('.test-popup-link',function() { //looping
      $(this).magnificPopup({              // apply to each element in the loop
          items: {
            src: $(this).attr('href')      // apply its respective href
          },
          type: 'iframe' // this is default type
      });
    });
});

Answer 3

$('.load-video').on('click', function(e) {
  e.preventDefault();

  var link = $(this).attr('href');

  $('.test-popup-link').magnificPopup({
        items: {
          src: link
        },
        type: 'iframe' // this is default type
    });
});

add class in a tag

<a class="load-video test-popup-link" href="<?php echo $row['link'];?>">