编辑：完整的js文件http://pastebin.com/CtJvcUe4
图库出现了，但是这个jQuery错误：
编辑：我刚注意到只有在我尝试打开照片时才会出现错误！
错误：语法错误，无法识别的表达式：http://url.of.image/example.jpg
上面的网址只是一个示例，错误将会发生，与使用的图片网址无关。 这是包含问题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>
答案 0 :(得分：0)
尝试替换你的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')
})
}
请注意，我替换了所有$ for jQuery，文档http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
答案 1 :(得分：0)
感谢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正在应用于标签内的所有链接，甚至是图库中的链接！