portfolio-single.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. ( function( $ ) {
  2. /*
  3. * Resize video-wrapper and portfolio-gallery for full width on small screens.
  4. */
  5. function calc() {
  6. $( '.portfolio-entry .video-wrapper, .portfolio-gallery' ).each( function() {
  7. if( $( window ).width() < 768 ) {
  8. $( this ).css( 'width', '100%' ).css( 'width', '+=40px' );
  9. if ( $( 'body' ).hasClass( 'rtl' ) ) {
  10. $( this ).css( 'margin-right', '-20px' );
  11. } else {
  12. $( this ).css( 'margin-left', '-20px' );
  13. }
  14. } else if( $( window ).width() < 960 ) {
  15. $( this ).css( 'width', '100%' ).css( 'width', '+=80px' );
  16. if ( $( 'body' ).hasClass( 'rtl' ) ) {
  17. $( this ).css( 'margin-right', '-40px' );
  18. } else {
  19. $( this ).css( 'margin-left', '-40px' );
  20. }
  21. } else {
  22. $( this ).css( {
  23. 'width': '',
  24. 'margin-right': '',
  25. 'margin-left': ''
  26. } );
  27. }
  28. } );
  29. }
  30. $( window ).load( function() {
  31. /*
  32. * Wrap galleries in a div.
  33. */
  34. $( '.portfolio-entry .gallery, .portfolio-entry .tiled-gallery' ).each( function() {
  35. $( this ).wrap( '<div class="portfolio-gallery" />' );
  36. // Trigger resize to make sure tiled galleries are full width.
  37. $( this ).trigger( 'resize' );
  38. } );
  39. calc();
  40. } ).resize( _.debounce( calc, 100 ) );;
  41. } )( jQuery );