radcliffe-2.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /**
  2. *
  3. * This is the main JavaScript file for Radcliffe.
  4. */
  5. ( function( $ ) {
  6. var $window = $( window );
  7. // Manage full-screen featured images.
  8. function fullScreenImages() {
  9. var $entryBackground = $( '.entry-thumbnail' ),
  10. $heroArea = $( '.hero-area' ),
  11. $windowWidth = $window.width(),
  12. $height = Math.round( $windowWidth / 1.33 );
  13. if ( $entryBackground ) {
  14. // if we're on a blog/archive page, there may be more than one
  15. if ( $entryBackground.length > 1 ){
  16. $entryBackground.each( function() {
  17. // reset the height
  18. $this_height = $height;
  19. // find the .entry-header height
  20. $entryHeader = $( this ).siblings( '.entry-header' );
  21. if ( $height < $entryHeader.outerHeight() ) {
  22. // pick the taller of the two
  23. $this_height = $entryHeader.outerHeight();
  24. }
  25. $( this ).height( $this_height + 'px' );
  26. } );
  27. } else {
  28. $entryBackground.height( Math.round( $windowWidth / 1.33 ) + 'px' );
  29. }
  30. }
  31. if ( $heroArea && $windowWidth > '768' ) { // Set a fixed height for larger screens
  32. $heroArea.css( { 'height' : Math.round( $windowWidth / 1.33 ) + 'px', 'min-height' : 'auto' } );
  33. }
  34. else if ( $heroArea ) { // Set a min-height for smaller screens
  35. $heroArea.css( { 'min-height' : Math.round( $windowWidth / 1.33 ) + 'px', 'height' : 'auto' } );
  36. }
  37. }
  38. // Add SVG image zoom icon
  39. function imageZoomIcon() {
  40. $( '.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger' )
  41. .empty()
  42. .append( screenReaderText.icon_zoom );
  43. }
  44. // Initialize init on page load.
  45. $( document ).on( 'ready', function() {
  46. fullScreenImages();
  47. imageZoomIcon();
  48. });
  49. // ...and on each subsequent Infinite Scroll load, as well.
  50. $( document ).on( 'post-load', function() {
  51. fullScreenImages();
  52. });
  53. // One more time after everything (eg: Custom Fonts) has loaded for better height accuracy
  54. $( window ).load( function() {
  55. fullScreenImages();
  56. });
  57. // On window resize.
  58. $( window ).on( 'resize', function() {
  59. fullScreenImages();
  60. });
  61. } )( jQuery );