Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-06-2012, 05:40 PM   PM User | #1
DiscoverySquare
New to the CF scene

 
Join Date: Dec 2012
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
DiscoverySquare is an unknown quantity at this point
Setting rel on links with images

Hi,

My (vary basic) knowledge of Javascript tells me this should be fairly easy to do, but there's one bit I'm not sure of.

I have a series of divs on a page with class "product-image" - I want all the links within each div to have the same rel, but the rel for each div should be unique.

I know this would work, generally, if I wanted to add the same rel attribute to every link:

Code:
<script type="text/javascript">
$(document).ready(function() {
       $('div.product-image a').each(function() {
          $(this).attr('rel','lightbox'); 
       });
});
</script>
... but how do I make it add a different, unique rel within each different div.product-image?

It doesn't particularly matter what the rel is as long as it is unique, it could just be a random string. The reason I need this to happen automatically, rather than manually, is because the site will be managed by the user through a CMS, so I need to automatically attach the right functions.
DiscoverySquare is offline   Reply With Quote
Old 12-06-2012, 07:00 PM   PM User | #2
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
Code:
<script type="text/javascript">
$(document).ready(function() {
       $('div.product-image a').each(function(index) {
          $(this).attr('rel','lightbox ' + index); 
       });
});
</script>
or possibly..
Code:
<script type="text/javascript">
$(document).ready(function() {
       var rels = [ "Hi there", "Wazzup", "Tada!" ], relslen = rels.length;
       $('div.product-image a').each(function(index) {
           if (index < relslen) {
              $(this).attr('rel', rels[index]);
           } 
       });
});
</script>
.. although this is not the designated use for rel.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

Last edited by AndrewGSW; 12-06-2012 at 07:05 PM..
AndrewGSW is offline   Reply With Quote
Old 12-06-2012, 09:12 PM   PM User | #3
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,453
Thanks: 0
Thanked 498 Times in 490 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
If you want something unique on each you should be using id rather than rel - since rel is supposed to define the relationship that the item linked to has to the current page and as they are all lightboxes they should all have the same rel value. The id attribute is the one intended for assigning unique values to things in the page.
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/
felgall is offline   Reply With Quote
Old 12-07-2012, 06:28 PM   PM User | #4
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
If you are adding information to each link then you could consider the jQuery data() method.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
AndrewGSW is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:11 PM.


Advertisement
Log in to turn off these ads.