CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
Adam
Adam

Reputation: 2552

Add button link in title attribute - HTML

I'm using a Wordpress lightbox plugin, and the "title" attribute specifies the description within the lightbox. This is how an example of the plugin I am using looks like:

<a href="link.to.video" class="wplightbox" title="The description video">Video</a>

Is it possible to include a button as a link inside the title attribute within the above code? Is that possible in HTML?

Upvotes: 1

Views: 1533

Answers (1)

Mihai Papuc
Mihai Papuc

Reputation: 314

It's not possible to put anything else than text in the title attribute:

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth. The value is text.

Source: https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-title-attribute

You need to look into the options of your WP plugin to find a way to do what you need or, if the plugin offers no such option, change it with another that does.

LATER EDIT: After a quick search, seems that no lightbox plugin for WP offers the possibility of displaying some HTML code as description.

If that's the case, then some custom code is needed. I would use this procedure:

  • use the link as title, eg: http://example.com/page

  • on lightbox display (this should be an event in the js plugin), convert any title that starts with http:// to a button using js / jQuery

Here is the code for jQuery:

/**
* This code should be run after the lightbox is displayed
*/

//get the titles from the lightbox / lightboxes - use the appropriate selector
var titleTag = $('.title');

//go over all the titles selected and replace the URLs with <a> tags
titleTag.each(function(){
  url = findRegex($(this).text());
  if ( url !== false ) {
    $(this).html('<a href="' + url + '" class="button">Button</a>');
  }
});

//function to find an URL in a string 
//returns false if no URL in the string 
function findRegex( str ) {
  var regex = /^(https?:\/\/)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*\/?$/g;
  let m;
  var found = false;
  while ((m = regex.exec(str)) !== null) {
      // This is necessary to avoid infinite loops with zero-width matches
      if (m.index === regex.lastIndex) {
          regex.lastIndex++;
      }

      found = m[0];
  }
  
  return found;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="title">http://example.com/page</div>

<div class="title">Normal title</div>

Upvotes: 1

Related Questions