Search code examples
jqueryurllightboxcolorbox

jquery auto add a tag on link with dedicated URL part

I want to use a lightbox clone (colorbox) feature on images in my CMS. The CMS uses TinyMCE 4 as Wysiwyg editor.

To use the lightbox feature, I have to add a "rel='xyz'" tag to the full image link around my thumbnail shown.

Unfortunately, in TinyMCE editor the end user can not add a "rel" tag ... except in source code editor. An alternative would be to use a small jquery code to assign such a "rel" tag on document ready, like ...

<script>
$(document).ready(function(){
    $(".myClass").colorbox({rel:'image_group'});
...

This would do the job theoretically, unfortunately the user can not enter the class on a link either in the gui (and to go to add it in the source code view is a NoGo for them!).

What the end user can enter in link gui is the link URL, a titel & a target and the text/thumbnail to be shown.

On the site, I have images of 2 different sources, a template folder and a media folder. Luckily, I want to use the lightbox effect on all the images of the media folder. But of course not of those from the template.

Therefore, after user edit, I have following saved:

<p>
<a title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a>
<br />
<a title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a>
</p>

And what I need when page is shown to visitor is:

<p>
<a rel="colorbox" title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a>
<br />
<a rel="colorbox" title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a>
</p>

(to be very precise: the place where this rel attribute is added doesn't matter ;-) )

Now the question: Is it possible to add the "rel" tag on document ready (like in code above) but on all <a> tags coming from a dedicated URL part only (e.g. the media folder) ? And if yes ;-) can someone also please provide a tip how ...

Thx a lot

Solution

  • I am adding another answer due the reason that the OP cannot access CMS's code without which my previous answer gets nulled. but I am leaving the answer for other people as it works under normal circumstances. with that said here is the new answer.

    This piece of code will find all the tags with <a> element and add rel="colorbox" if the href contains "/media/" text.

    $(document).ready(function(){
  $.each($('a'), function(index, element){
    if(element.toString().indexOf("/media/") > 0){
      $(this).attr('rel', 'colorbox');
    }
  });
});

    http://codepen.io/Rohithzr/pen/JXryRp

    check the pen above for working example. It is using below code as html where two elements have /media/ while one has /notmedia/

    <p>
<a title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a>
<br />
<a title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a>
<a title="image2" href="http://my.url.ch/notmedia/image2_big.jpg"><img src="http://my.url.ch/notmedia/image2_small.jpg" alt="image2" width="300" height="300" /></a>
</p>