Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 13th, 2012  |  syntax: None  |  size: 1.35 KB  |  hits: 17  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to load picture images via click on a picture?
  2. switchImg(this, "LINK_FOR_PICTURE")
  3.        
  4. function switchImg(img, url){
  5.   $(img).attr("src", url);
  6. }
  7.        
  8. <div id="1">
  9. </div>
  10.  
  11. <div id="2">
  12. </div>
  13.  
  14. ..
  15.  
  16. <div id="5">
  17.  
  18. <img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_1")" alt="No_picture">
  19. </div>
  20. <img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_2")" alt="No_picture">
  21. </div>
  22. <img src="DEFAULT_IMG" onclick="switchImg(this, "LINK_FOR_PICTURE_3")" alt="No_picture">
  23. </div>
  24. .....
  25.  
  26. </div>
  27.        
  28. function switchImg(img){
  29.  
  30.     $(img).closest('div').find('img').each(function(){
  31.  
  32.         $(this).attr("src", $(this).attr('imglink'));
  33.  
  34.     });
  35.  
  36. }
  37.        
  38. <img src="DEFAULT_IMG" onclick="switchImg(this);" imglink="LINK_FOR_PICTURE_3" alt="No_picture">
  39.        
  40. <div id="5">
  41.     <img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
  42.     <img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
  43.     <img src="DEFAULT_IMG" data-fullImg="link_for_picture1" alt="No_picture">
  44. </div>
  45.        
  46. $(function(){    
  47.     var allImages = $('#5 img');
  48.  
  49.     allImages.click(function(){
  50.         allImages.each(function(){
  51.             switchImg($(this));
  52.         });
  53.     });
  54. });
  55.        
  56. $(function(){
  57.     $('img.showOriginal').click(function(){
  58.         $(this).parent().children().each(function(){
  59.             switchImg($(this));
  60.         });
  61.     });
  62. });