Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 12-06-2012 at 07:05 PM.
    "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

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    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/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •