Невозможно использовать галерею изображений Wordpress с плагином лайтбоксов внутри вкладок бутстрапа

EDIT: полный файл js http://pastebin.com/CtJvcUe4

Галерея появляется, но с этой ошибкой jQuery:

EDIT: Я только заметил, что ошибка появляется только при попытке открыть фотографию!

Ошибка: ошибка синтаксиса, непризнанное выражение: http://url.of.image/example.jpg

Приведенный выше пример является лишь примером, ошибка будет происходить независимо от используемого URL-адреса изображения. это страница с проблемой http://dev.onespace.com.br/innova/?page_id=35

из-за этой ошибки я не могу использовать плагин lightbox.

это оригинальный html, созданный с помощью коротких кодов:

<div>
 
 
 <div data-tab-nome="Conceito">
 
 <p>some text...</p>
 
 </div>
 
 
 <div data-tab-nome="Material Promocional">
 
 <p>
 
 </p>
 <div id="gallery-1">
 <dl>
 <dt>
 				
 			</dt>
 </dl>
 <dl>
 <dt>
 				
 			</dt>
 </dl>
 <dl>
 <dt>
 				
 			</dt>
 </dl>
 
 <dl>
 <dt>
 				
 			</dt>
 </dl>
 
 </div>
 
 
 </div>
 
 
 <div data-tab-nome="Modelos">
 
 <p>conteúdo modelos</p>
 
 </div>
 
 
</div>

Затем я использую этот Javascript, чтобы сделать разметку закладки загрузочного экрана, если я удалю этот код, тогда работает лайтбокс

if($('.tabpanel').length > 0){
 var tabs = $('<ul><code>').addClass('nav nav-tabs').attr('role', 'tablist');
 var contents = $('</code><div><code>').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 = $("")
 .attr('href', '#'+nome_clean)
 .attr('aria-controls', nome_clean)
 .attr('role','tab')
 .data('toggle', 'tab')
 .text(nome);

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

 var the_content = $(this).html();
 contents.append(
 $('</code><div><code>')
 .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')
 })
}
</code> <p> и окончательный html:</p> <p> </p> <pre class="prettyprint linenums"><div>
 <ul role="tablist">
 <li role="presentation"><a href="#conceito" aria-controls="conceito" role="tab">Conceito</a>
 </li>
 <li role="presentation"><a href="#material-promocional" aria-controls="material-promocional" role="tab" target="_blank">Material Promocional</a>
 </li>
 <li role="presentation"><a href="#modelos" aria-controls="modelos" role="tab" target="_blank">Modelos</a>
 </li>
 </ul>

 <div>
 <div role="tabpanel" id="conceito">
 
 <p>some text....</p>
 
 </div>
 <div role="tabpanel" id="material-promocional">
 
 <p>
 
 </p>
 <div id="gallery-1">
 <dl>
 <dt>
				
			</dt>
 </dl>
 <dl>
 <dt>
				
			</dt>
 </dl>
 <dl>
 <dt>
				
			</dt>
 </dl>
 
 <dl>
 <dt>
				
			</dt>
 </dl>
 
 </div>
 
 
 </div>
 <div role="tabpanel" id="modelos">
 
 <p>conteúdo modelos</p>
 
 </div>
 </div>
</div>
2 ответа

Попробуйте заменить ваши вкладки jQuery на это:

if(jQuery('.tabpanel').length > 0){
 var tabs = jQuery('<ul><code>').addClass('nav nav-tabs').attr('role', 'tablist');
 var contents = jQuery('</code><div><code>').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("")
 .attr('href', '#'+nome_clean)
 .attr('aria-controls', nome_clean)
 .attr('role','tab')
 .data('toggle', 'tab')
 .text(nome);

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

 var the_content = jQuery(this).html();
 contents.append(
 jQuery('</code><div><code>')
 .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')
 })
}
</code> <p> Обратите внимание, что я заменил все $ for jQuery, здесь документации <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers%23jQuery_noConflict_Wrappers" rel="nofollow noreferrer" target="_blank">http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers</a></p> </div></li></div></ul>


Я нашел проблему благодаря этому

проблема в этом фрагменте кода:

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')
 })

the preventDeafault применялся ко всем ссылкам внутри вкладок, даже галерей!

licensed under cc by-sa 3.0 with attribution.