#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    10
    Rep Power
    0

    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

    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
    kadi
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,118
    Rep Power
    119
    Originally Posted by kadi
    can u help me the code with different images based on the image id or src.
    Ok, try using a data attribute in your images and define that attribute with the image you want to allow to be paired together, when the two images are clicked on. Something like this:
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
    var found = 0;
    var last = null;
    
    (function(d){d.fn.shuffle=function(c){c=[];return this.each(function(){c.push(d(this).clone(true))}).each(function(a,b){d(b).replaceWith(c[a=Math.floor(Math.random()*c.length)]);c.splice(a,1)})};d.shuffle=function(a){return d(a).shuffle()}})(jQuery);
    
    $(document).ready(function(){
    
     var totalPics = $('#playCards img').length / 2;
        
        $('#playCards td').shuffle();
    
        $('img').each(function(index){
          $(this).attr('id','img-' + index);
        });    
        
        $('img').click(function(){
          if( last ) {
            if( ($(this).attr('src') == last.attr('data-src')) ) {
              $(this).css('visibility', 'hidden');
              last.css('visibility', 'hidden');
              found++;
            }
            if (found == totalPics) {
            alert('Here is your sticker!');
            window.location.href = "#play1";
            //reset found to 0
            location.reload();
            }
            last = null;
          } else {
            last = $(this);
          }
        });
        
    }); //end ready
    
    
    </script>
    
    <div id="playCards">
                        <table>
                            <tbody><tr>
                                <td><img id="img-1" src="http://i47.tinypic.com/35cmsg5.jpg" data-src="http://oi47.tinypic.com/8winhl.jpg"></td>
                                <td><img id="img-2" src="http://oi47.tinypic.com/8winhl.jpg" data-src="http://i47.tinypic.com/35cmsg5.jpg"></td>
                            </tr>
                            <tr>
                                <td><img id="img-3" src="http://i47.tinypic.com/35cmsg5.jpg" data-src="http://oi47.tinypic.com/8winhl.jpg"></td>
                                <td><img id="img-4" src="http://oi47.tinypic.com/8winhl.jpg" data-src="http://i47.tinypic.com/35cmsg5.jpg"></td>
                            </tr>
                        </tbody></table>
                    </div>

IMN logo majestic logo threadwatch logo seochat tools logo