Advanced Search

jQuery Image Source Swap with attr() function

/ Published in: jQuery
Save to your folder(s)
I have made a small jQuery snippet to demo the image swapping with attr() funciton. The demo uses 2 images with classes img1 and img2 respectively. On a click of a button, the images are swapped.

Basically the script stores “src” value into a variable and then it is used to swap 2 image sources.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>jQuery Image Source Swap with attr function</title>
  6. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. </head>
  8. <style>
  9. 	body
  10. 	{
  11. 		margin	: 0;
  12. 		padding	: 0;
  13. 		background	: #EEE;
  14. 		color		: #333;
  15. 		font-family: 'Open Sans', sans-serif;
  16. 		font-size	: 12px;
  17.  
  18. 	}
  19. 	#wrapper
  20. 	{
  21. 		width	: 1012px;
  22. 		margin	: 0 auto;
  23.  
  24. 	}
  25.  
  26. 	.the-player
  27. 	{
  28. 		width	: 560px;
  29. 		height	: 315px;
  30. 		border	: 1px solid #333;
  31. 	}
  32.  
  33. 	.embed-code
  34. 	{
  35. 		width	: 301px;
  36. 		height	: 85px;
  37. 	}
  38.  
  39.  
  40. 	.btn-img-swap
  41. 	{
  42. 		border: 1px solid #AAA;
  43. 		padding: 3px 5px;
  44. 		text-decoration: none;
  45. 		background: #333;
  46. 		color: #FFF;
  47. 	}
  48.  
  49. 	.img1,.img2
  50. 	{
  51. 		width:200px;
  52. 		margin-right:20px;
  53. 	}
  54.  
  55. </style>
  56. <body>
  57. 	<div id="wrapper">
  58.  
  59. 		<h1>jQuery Image Source Swap with attr function</h1>
  60.  
  61. 		 <img src="http://blog.pixelthemes.com/demo/jquery-image-swap/american-flag.jpg" class="img1" />
  62.  
  63. 		 <img src="http://blog.pixelthemes.com/demo/jquery-image-swap/colors-of-england.jpg" class="img2" />
  64.  
  65. 		 <div style="clear:both;"></div>
  66.  
  67. 		 <p><a href="#" class="btn-img-swap">Swap Images</a></p>
  68.  
  69. 		<p>Demo by : <a href="http://blog.pixelthemes.com/">WordPress Themes</a> </br>
  70. 		Article Link : <a href="http://blog.pixelthemes.com/ideas/dynamically-load-youtube-video-iframe-embed-code-inside-a-div">Article on jQuery Image Source Swap with attr function</a>
  71. 	</div>
  72.  
  73. 	<script type="text/javascript">
  74. 	$(document).ready(function() {
  75. 		$('.btn-img-swap').click(function() {
  76. 			 event.preventDefault(); 
  77. 			 var img_temp = $(".img1").attr("src");
  78. 			 $('.img1').attr("src",$('.img2').attr("src"));
  79. 			 $('.img2').attr("src",img_temp);
  80. 			});
  81. 		});
  82. 	</script>
  83. </body>
  84. </html>

URL: http://blog.pixelthemes.com/ideas/jquery-image-source-swap-with-attr-function

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.