CODEWITHSUNDEEP
jqueryurllightboxcolorbox
user2037828
user2037828

Reputation: 70

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

Upvotes: 0

Views: 258

Answers (3)

Rohit Hazra
Rohit Hazra

Reputation: 667

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>

Upvotes: 1

Rohit Hazra
Rohit Hazra

Reputation: 667

You can do this right before submitting the data to server

$('#form').submit(function(eventObj) {
    var content = $('#contentBox').val();
    alert(content);
    content = content.replace('<img', '<img rel="lightframe"');
    alert(content);
    $('#contentBox').val(content)
    return true;
});

Please verify the same and let me know at http://codepen.io/Rohithzr/pen/bprKER I believe the best method will be to add it when user posts it.. use this script when user submits so that it get dded to the database directly

Upvotes: 0

chopi321
chopi321

Reputation: 1411

could something like this work?

$(document).ready(function(){
  $.each($('img'), function(index, element){
    var img = $(element);
    //match the img tags, which src attribute starts with //i. only.
    if(img.attr('src').match(/\/\/i\..+/)){
      img.attr('rel', 'something');
    }
  });
})

you would just change the regular expression to match the url of your images.

https://jsfiddle.net/j0vmcqa2/

[UPDATE]

You also need to have in mind, that I am checking the img tags, in your case I think you need to add it to a tags. The idea is simillar, you can can change 'img' with 'a' and instead of searching in the src attribute you would do it in the href attribute.

Upvotes: 0

Related Questions