By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,098 Members | 1,895 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,098 IT Pros & Developers. It's quick & easy.

Adding Attribute to HTML Tag <a href=

P: 30
Ok here is my question i hope its something easy. I have CMS that generates images from whatever url I put with its corresponding syntax. Well I want to add a Lightbox to does images but instead of going into the CMS to find how where it outputs the actual code that appears i was thinking of using JS to add an attribute of rel="lightbox" to links within a certain div that have a class of media.

Here is a link to an image that might be found on my page

[HTML]<a href="images/blah.jpg" target="_self" class="media"><img src="images/blah.jpg" /></a>[/HTML]

One way I was thinking of doing it was the function "replace". something like this

Expand|Select|Wrap|Line Numbers
  1. javascript:document.body.innerHTML.replace("Index","67890");
and then this code to find the class which im not sure if it will work.

Expand|Select|Wrap|Line Numbers
  1. //Create an array 
  2. var allPageTags = new Array(); 
  4. function doSomethingWithClasses(theClass) {
  5. //Populate the array with all the page tags
  6. var allPageTags=document.getElementsByTagName("*");
  7. //Cycle through the tags using a for loop
  8. for (i=0; i<allPageTags.length; i++) {
  9. //Pick out the tags with our class name
  10. if (allPageTags[i].className==theClass) {
  11. //Manipulate this in whatever way you want
  12. allPageTags[i].style.display='none';
  13. }
  14. }
Can someone please help me put this together. My final link should output as.
[HTML]<a href="images/blah.jpg" target="_self" class="media" rel="lightbox"><img src="images/blah.jpg" /></a>[/HTML]
Jan 10 '08 #1
Share this Question
Share on Google+
4 Replies

P: 30
Looking over the Javascript code for getElementByClass it seems like i might not even need the replace function if the getElementByClass code work by replacing the "style.display="none"" to something else right? how do i set a rel?

Please note that im a total Noob at Javascript im more of a php guy.
Jan 10 '08 #2

Expert Mod 15k+
P: 16,027
Expand|Select|Wrap|Line Numbers
  1. allPageTags[i].setAttribute("rel","lightbox");
Jan 10 '08 #3

P: 30
thanx! worked perfectly.
Jan 11 '08 #4

Expert Mod 15k+
P: 16,027
You're welcome. Glad it worked.
Jan 11 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.