Advanced Search

mdb jQuery code - image swapper

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. jQuery(document).ready(function($) {
  2.     // Show default image
  3.     $('#large-image.oma-opa-fiets').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  4.  
  5.     /*************************************************************************
  6.     * This is for the template-bikes.php image hover swapper
  7.     *************************************************************************/
  8.  
  9.     /* OMA & OPA FIETS */
  10. 	$('#thumbnails * > img.thumb1.oma-opa-fiets').hover(function() { //mouseover
  11.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/1.gif")'});
  12. 	},function() { //mouseout
  13.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  14. 	});
  15.  
  16. 	$('#thumbnails * > img.thumb2.oma-opa-fiets').hover(function() { //mouseover
  17.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/2.gif")'});
  18. 	},function() { //mouseout
  19.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  20. 	});
  21.  
  22.     $('#thumbnails * > img.thumb3.oma-opa-fiets').hover(function() { //mouseover
  23.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/3.gif")'});
  24. 	},function() { //mouseout
  25.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  26. 	});
  27.  
  28. 	$('#thumbnails * > img.thumb4.oma-opa-fiets').hover(function() { //mouseover
  29.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/4.gif")'});
  30. 	},function() { //mouseout
  31.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  32. 	});
  33.  
  34. 	$('#thumbnails * > img.thumb5.oma-opa-fiets').hover(function() { //mouseover
  35.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/5.gif")'});
  36. 	},function() { //mouseout
  37.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  38. 	});
  39.  
  40. 	$('#thumbnails * > img.thumb6.oma-opa-fiets').hover(function() { //mouseover
  41.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/6.gif")'});
  42. 	},function() { //mouseout
  43.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  44. 	});
  45.  
  46. 	$('#thumbnails * > img.thumb7.oma-opa-fiets').hover(function() { //mouseover
  47.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/7.gif")'});
  48. 	},function() { //mouseout
  49.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  50. 	});
  51.  
  52. 	$('#thumbnails * > img.thumb8.oma-opa-fiets').hover(function() { //mouseover
  53.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/8.gif")'});
  54. 	},function() { //mouseout
  55.         $('#large-image').css({'background-image':'url("/wp-content/themes/mydutchbike/images/bikes/oma-opa-fiets/0.gif")'});
  56. 	});
  57. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.