Question

我正在尝试在选项卡式内容框中使用magnificPopup，它使用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>

现在我面临的错误是当我点击选项卡的图像时一个magnificPopup工作正常但当我转到第二个选项卡或第三个选项卡时它没有突然出现它直接转到图像路径而不是显示弹出。那是我正在尝试的。

Answer 1

一个问题是您正在重复使用 #portfolio ID，而ID应该是唯一的。我修改了你的代码，添加了一个 .portfolio -class并实例化了magnific-popup foreach组合组件，这样每个内部标签组合都会拥有它自己的画廊。有关更改，请参阅http://jsfiddle.net/9ddbnx7f/。

基本修改后的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>

更新的jquery代码：

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

如何在选项卡式内容中使用magnificPopup

1 个答案: