cant use wordpress image galleries with lightbox plugin inside bootstrap tabs

1 Views

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

The gallery shows up, but with this jQuery error:

Read More

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>
Post Views: 1

Related posts

Leave a Reply

2 comments

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

  2. 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!