cant use wordpress image galleries with lightbox plugin inside bootstrap tabs

Question

EDIT: full js file http://pastebin.com/CtJvcUe4

The gallery shows up, but with this jQuery error:

EDIT: I just noticed that the error only appears when I try to open a photo!

Error: Syntax error, unrecognized expression: http://url.of.image/example.jpg

The url above is just a example, the error will happen, independent of the image url used. this is the page with the problem http://dev.onespace.com.br/innova/?page_id=35

because of this error, I can't use a lightbox plugin.

this is the original html generated by shortcodes:

<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>

Then I use this Javascript to make the bootstrap nav tab markup, if I remove this code, then the lightbox works

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

and the final 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>

you mean the http://url.of.image/example.jpg? it is just a example, it happens with any image url I use. I uploaded the work, you can see it here http://dev.onespace.com.br/innova/?page_id=35, i'm putting this info at the question — igrossiter, Dec 13 '14 at 15:57
ah ok, I saw it fast, I though it was a bit.ly link, my problem! If you remove the tabs and the lightbox opens, what you have is a clear problem of JS incompatibility. The a look at this: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers — nunorbatista, Dec 13 '14 at 16:02

score 0 · Answer 1 · answered Dec 13 '14 at 16:04

Try replacing your Tabs jQuery for this:

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

Note that I replaced all the $ for jQuery, documentation here http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

Thanks, sadly it didn't work, I think I'm already doing this by using [this](http://stackoverflow.com/questions/2937227/what-does-function-jquery-mean) to pass the real jQuery as $, I will attach the full file to the question — igrossiter, Dec 13 '14 at 17:15
Try to change the order it loads, for example. Load one on the Header and another on the footer. The source of your problem is certainly with related with compatibility. In the past I had a problem with Google Maps and Bootstrap Tabs, it might help you: https://github.com/twbs/bootstrap/issues/2330 The idea is to load the problematic Tab first, try to do that. — nunorbatista, Dec 13 '14 at 20:47
Thanks for the help nunorbatista, I tried what you suggested but it wouldn't work, so I tried changed the html for something more simple, then I saw that no link would work... — igrossiter, Dec 14 '14 at 19:55

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

I found the problem thanks to this

the problem is this piece of code:

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

changed to

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

the preventDeafault was applying to all links inside the tabs, even the gallery ones!

edited May 23 '17 at 11:57

Community

1
1

answered Dec 14 '14 at 19:54

igrossiter

695
1
12
25

cant use wordpress image galleries with lightbox plugin inside bootstrap tabs

2 Answers2