Javascript 如何在选项卡式内容中使用放大弹出窗口

我试图在选项卡式内容框中使用放大弹出窗口，它使用jQuery来更改div中的内容 以下是JavaScript代码：

$(document).ready(function(){
$(function(){
  $('#portfolio').magnificPopup({
    delegate: 'a',
    type: 'image',
    image: {
      cursor: null,
      titleSrc: 'title'
    },
    gallery: {
      enabled: true,
      preload: [0,1],
      navigateByImgClick: true
        }
  });
});
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })
})

以下是我拥有的Html：

<div class="container">

    <ul class="tabs">
      <li class="tab-link current" data-tab="tab-1">Pools</li>
        <li class="tab-link" data-tab="tab-2">Play Area</li>
        <li class="tab-link" data-tab="tab-3">Food Area</li>
    </ul>

    <div id="tab-1" class="tab-content current">
      <ul id="portfolio" class="clearfix">
        <li> <a href="img/70259_Paradise Costa Taurito & Waterpark_13_20110929_041832.gif" title="Brick and Bay Windows"><img src="img/70259_Paradise Costa Taurito & Waterpark_13_20110929_041832.gif" alt="brick and by windows"></a> </li>
        <li> <a href="img/302861500_688.jpg" title="Simple iPad Icons"><img src="img/302861500_688.jpg" alt="old-style ipad icons"></a> </li>
        <li> <a href="img/543604628_432.jpg" title="Mobile Profile"><img src="img/543604628_432.jpg" alt="mobile iphone app profile ui"></a> </li>
        <li> <a href="img/aqua_park_water_slide.jpg" title="New Shoes"><img src="img/aqua_park_water_slide.jpg" alt="new balance shoes"></a></li>
        <li><a href="img/creek58.jpg" title="Rive Radio Icon"><img src="img/creek58.jpg" alt="rive radio icon"></a></li>
        <li> <a href="img/Suan_Siam_Water_Park_1.jpg" title="Blood Pressure app"><img src="img/Suan_Siam_Water_Park_1.jpg" alt="blood pressure app ui"></a> </li>
      </ul>
    </div>
    <div id="tab-2" class="tab-content">
          <ul id="portfolio" class="clearfix">
        <li> <a href="img/play area 1.jpg" title="Kids Play Area"><img src="img/play area 1.jpg" alt="Kids Play Area"></a> </li>
        <li> <a href="img/Childrens-Play-Area.jpg" title="Childrens Play Area"><img src="img/Childrens-Play-Area.jpg" alt="Childrens Play Area"></a> </li>
        <li> <a href="img/543604628_432.jpg" title="Mobile Profile"><img src="img/543604628_432.jpg" alt="mobile iphone app profile ui"></a> </li>
        <li> <a href="img/aqua_park_water_slide.jpg" title="New Shoes"><img src="img/aqua_park_water_slide.jpg" alt="new balance shoes"></a></li>
        <li><a href="img/creek58.jpg" title="Rive Radio Icon"><img src="img/creek58.jpg" alt="rive radio icon"></a></li>
        <li> <a href="img/Suan_Siam_Water_Park_1.jpg" title="Blood Pressure app"><img src="img/Suan_Siam_Water_Park_1.jpg" alt="blood pressure app ui"></a> </li>
      </ul>

    </div>
    <div id="tab-3" class="tab-content">
         <ul id="portfolio" class="clearfix">
        <li> <a href="img/70259_Paradise Costa Taurito & Waterpark_13_20110929_041832.gif" title="Brick and Bay Windows"><img src="img/70259_Paradise Costa Taurito & Waterpark_13_20110929_041832.gif" alt="brick and by windows"></a> </li>
        <li> <a href="img/302861500_688.jpg" title="Simple iPad Icons"><img src="img/302861500_688.jpg" alt="old-style ipad icons"></a> </li>
        <li> <a href="img/543604628_432.jpg" title="Mobile Profile"><img src="img/543604628_432.jpg" alt="mobile iphone app profile ui"></a> </li>
        <li> <a href="img/aqua_park_water_slide.jpg" title="New Shoes"><img src="img/aqua_park_water_slide.jpg" alt="new balance shoes"></a></li>
        <li><a href="img/creek58.jpg" title="Rive Radio Icon"><img src="img/creek58.jpg" alt="rive radio icon"></a></li>
        <li> <a href="img/Suan_Siam_Water_Park_1.jpg" title="Blood Pressure app"><img src="img/Suan_Siam_Water_Park_1.jpg" alt="blood pressure app ui"></a> </li>
      </ul>
    </div>

</div>

池
播放区
食品区

现在我面临的错误是，当我点击一个放大的弹出窗口的图像时，它工作正常，但当我进入第二个或第三个选项卡时，它不会弹出，而是直接进入图像路径，而不是显示弹出窗口。

---

这就是我正在尝试的。

一个问题是，您正在重用#公文包，id应该是唯一的。我修改了您的代码，添加了一个.portfolio-类并实例化了每个portfolio组件的放大弹出窗口，以便每个内部选项卡portfolio都有自己的库。有关更改，请参阅

基本修改的html：

<div id="tab-1" class="tab-content current">
  <ul class="portfolio clearfix"> ... </ul>
</div>

<div id="tab-2" class="tab-content">
  <ul class="portfolio clearfix"> ... </ul>
</div>

$('.portfolio').each(function(){
    $(this).magnificPopup({...});
});