SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Matching different images

    hi, i am trying to match images. this one works fine only with same images but i want to match unidentical images based on their id or src

    below is the working code for similar images

    http://jsfiddle.net/GquLr/

    can u help me the code with different images based on the image id or src. i am trying to do but i cant get it. plz help me with...


    regards

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    This should be pretty easy to achieve by adding a "data" attribute on the images that you need to match.

    That way you can have a different image source and still match things up. For example if you had:

    HTML Code:
    <img src="car.jpg" /> <!-- A car! -->
    <img src="road.jpg" /> <!-- where do cars drive? A road! -->
    You could relate these two by adding a data-attribute:

    HTML Code:
    <img data-group="cars" src="car.jpg" /> <!-- A car! -->
    <img data-group="cars" src="road.jpg" /> <!-- where do cars drive? A road! -->
    
    <!-- another example -->
    <img data-group="garden" src="flower.jpg" /> <!-- A flower! -->
    <img data-group="garden" src="garden.jpg" /> <!-- where do flowers grow? A garden! -->
    So instead of checking the SRC you could check the data-group.

    I've updated your example to use this method: http://jsfiddle.net/GquLr/10/

    Hope this helps
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

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