无法在引导选项卡中使用带有灯箱插件的 wordpress 图像库答案

【问题标题】：cant use wordpress image galleries with lightbox plugin inside bootstrap tabs无法在引导选项卡中使用带有灯箱插件的 wordpress 图像库
【发布时间】：2014-12-12 20:49:20
【问题描述】：

编辑：完整的js文件http://pastebin.com/CtJvcUe4

画廊出现了，但出现了这个 jQuery 错误：

编辑：我刚刚注意到该错误仅在我尝试打开照片时出现！

错误：语法错误，无法识别的表达式：http://url.of.image/example.jpg

上面的 url 只是一个例子，会发生错误，与使用的图像 url 无关。这是有问题的页面http://dev.onespace.com.br/innova/?page_id=35

由于这个错误，我不能使用灯箱插件。

这是由简码生成的原始 html：

<div class="tabpanel">
  <p></p>
  <p></p>
  <div data-tab-nome="Conceito">
    <p></p>
    <p>some text...</p>
    <p></p>
  </div>
  <p></p>
  <p></p>
  <div data-tab-nome="Material Promocional">
    <p></p>
    <p>
      <style type="text/css">
        #gallery-1 {
          margin: auto;
        }
        #gallery-1 .gallery-item {
          float: left;
          margin-top: 10px;
          text-align: center;
          width: 33%;
        }
        #gallery-1 img {
          border: 2px solid #cfcfcf;
        }
        #gallery-1 .gallery-caption {
          margin-left: 0;
        }
        /* see gallery_shortcode() in wp-includes/media.php */
      </style>
    </p>
    <div id="gallery-1" class="gallery galleryid-35 gallery-columns-3 gallery-size-thumbnail">
      <dl class="gallery-item">
        <dt class="gallery-icon portrait">
    				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Izod_1.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Izod_1-150x150.jpg" class="attachment-thumbnail" alt="Izod_1"></a>
    			</dt>
      </dl>
      <dl class="gallery-item">
        <dt class="gallery-icon portrait">
    				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_2.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_2-150x150.jpg" class="attachment-thumbnail" alt="ColeHaan_2"></a>
    			</dt>
      </dl>
      <dl class="gallery-item">
        <dt class="gallery-icon portrait">
    				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_1.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_1-150x150.jpg" class="attachment-thumbnail" alt="ColeHaan_1"></a>
    			</dt>
      </dl>
      <br style="clear: both">
      <dl class="gallery-item">
        <dt class="gallery-icon landscape">
    				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Lafont_2.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Lafont_2-150x150.jpg" class="attachment-thumbnail" alt="Lafont_2"></a>
    			</dt>
      </dl>
      <br style="clear: both">
    </div>
    <p></p>
    <p></p>
  </div>
  <p></p>
  <p></p>
  <div data-tab-nome="Modelos">
    <p></p>
    <p>conteúdo modelos</p>
    <p></p>
  </div>
  <p></p>
  <p></p>
</div>

然后我使用这个 Javascript 来制作引导导航选项卡标记，如果我删除这个代码，那么灯箱就可以工作

if($('.tabpanel').length > 0){
  var tabs = $('<ul>').addClass('nav nav-tabs').attr('role', 'tablist');
  var contents = $('<div>').addClass('tab-content');

  $('div[data-tab-nome]').each(function(){
    var nome = $(this).data('tab-nome');
    var nome_clean = nome.replace(/\s+/g, '-').toLowerCase();
    var the_a = $("<a>")
                    .attr('href', '#'+nome_clean)
                    .attr('aria-controls', nome_clean)
                    .attr('role','tab')
                    .data('toggle', 'tab')
                    .text(nome);

    tabs.append($("<li>").attr('role','presentation').append(the_a));

    var the_content = $(this).html();
    contents.append(
      $('<div>')
        .attr('role','tabpanel')
        .addClass('tab-pane fade')
        .attr('id', nome_clean)
        .html(the_content)
    );
  });

  $('.tabpanel').html(tabs).append(contents);

  $('.tabpanel .nav').find('li:first').find('a').tab('show');

  $('.tabpanel a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
}

以及最终的 html：

<div class="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#conceito" aria-controls="conceito" role="tab">Conceito</a>
    </li>
    <li role="presentation"><a href="#material-promocional" aria-controls="material-promocional" role="tab">Material Promocional</a>
    </li>
    <li role="presentation"><a href="#modelos" aria-controls="modelos" role="tab">Modelos</a>
    </li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade active in" id="conceito">
      <p></p>
      <p>some text....</p>
      <p></p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="material-promocional">
      <p></p>
      <p>
        <style type="text/css">
          #gallery-1 {
            margin: auto;
          }
          #gallery-1 .gallery-item {
            float: left;
            margin-top: 10px;
            text-align: center;
            width: 33%;
          }
          #gallery-1 img {
            border: 2px solid #cfcfcf;
          }
          #gallery-1 .gallery-caption {
            margin-left: 0;
          }
          /* see gallery_shortcode() in wp-includes/media.php */
        </style>
      </p>
      <div id="gallery-1" class="gallery galleryid-35 gallery-columns-3 gallery-size-thumbnail">
        <dl class="gallery-item">
          <dt class="gallery-icon portrait">
				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Izod_1.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Izod_1-150x150.jpg" class="attachment-thumbnail" alt="Izod_1"></a>
			</dt>
        </dl>
        <dl class="gallery-item">
          <dt class="gallery-icon portrait">
				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_2.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_2-150x150.jpg" class="attachment-thumbnail" alt="ColeHaan_2"></a>
			</dt>
        </dl>
        <dl class="gallery-item">
          <dt class="gallery-icon portrait">
				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_1.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/ColeHaan_1-150x150.jpg" class="attachment-thumbnail" alt="ColeHaan_1"></a>
			</dt>
        </dl>
        <br style="clear: both">
        <dl class="gallery-item">
          <dt class="gallery-icon landscape">
				<a href="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Lafont_2.jpg" rel="lightbox[gallery-1]"><img width="150" height="150" src="http://teste.co.uk/~ian/innova/wp-content/uploads/2014/12/Lafont_2-150x150.jpg" class="attachment-thumbnail" alt="Lafont_2"></a>
			</dt>
        </dl>
        <br style="clear: both">
      </div>
      <p></p>
      <p></p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="modelos">
      <p></p>
      <p>conteúdo modelos</p>
      <p></p>
    </div>
  </div>
</div>

【问题讨论】：

我无法打开附件。
你的意思是url.of.image/example.jpg？这只是一个例子，它发生在我使用的任何图像 url 上。我上传了作品，你可以在这里看到它dev.onespace.com.br/innova/?page_id=35，我把这个信息放在问题中
啊好的，我很快就看到了，我虽然有点链接，但我的问题！如果您删除选项卡并打开灯箱，那么您所拥有的是一个明显的 JS 不兼容问题。看看这个：codex.wordpress.org/Function_Reference/…

标签： jquery wordpress twitter-bootstrap

【解决方案1】：

尝试为此替换您的 Tabs jQuery：

if(jQuery('.tabpanel').length > 0){
  var tabs = jQuery('<ul>').addClass('nav nav-tabs').attr('role', 'tablist');
  var contents = jQuery('<div>').addClass('tab-content');

  jQuery('div[data-tab-nome]').each(function(){
    var nome = jQuery(this).data('tab-nome');
    var nome_clean = nome.replace(/\s+/g, '-').toLowerCase();
    var the_a = jQuery("<a>")
                    .attr('href', '#'+nome_clean)
                    .attr('aria-controls', nome_clean)
                    .attr('role','tab')
                    .data('toggle', 'tab')
                    .text(nome);

    tabs.append(jQuery("<li>").attr('role','presentation').append(the_a));

    var the_content = jQuery(this).html();
    contents.append(
      jQuery('<div>')
        .attr('role','tabpanel')
        .addClass('tab-pane fade')
        .attr('id', nome_clean)
        .html(the_content)
    );
  });

  jQuery('.tabpanel').html(tabs).append(contents);

  jQuery('.tabpanel .nav').find('li:first').find('a').tab('show');

  jQuery('.tabpanel a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
  })
}

请注意，我将所有 $ 替换为 jQuery，此处为文档 http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

【讨论】：

谢谢，遗憾的是它没有用，我想我已经通过使用this 将真正的 jQuery 作为 $ 传递，我会将完整文件附加到问题中
尝试改变它的加载顺序，例如。在页眉上加载一个，在页脚上加载另一个。您的问题的根源肯定与兼容性有关。过去我在使用 Google Maps 和 Bootstrap Tabs 时遇到了问题，它可能会对您有所帮助：github.com/twbs/bootstrap/issues/2330 这个想法是先加载有问题的 Tab，然后尝试这样做。
感谢 nunorbatista 的帮助，我尝试了你的建议但它不起作用，所以我尝试将 html 更改为更简单的东西，然后我发现没有链接可以工作......跨度>
很高兴您找到了解决方案！干杯

【解决方案2】：

感谢this，我找到了问题

问题是这段代码：

  jQuery('.tabpanel a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
  })

改为

  jQuery('.tabpanel .nav-tabs a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
  })

preventDeafault 应用于选项卡内的所有链接，甚至是图库链接！

【讨论】：