Posted By

aequitas3 on 11/15/09


Tagged


Versions (?)

mdb jQuery code - image swapper


 / Published in: jQuery
 

  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  

You need to login to post a comment.