lvl99

// Uses the namespace to build custom state classes
@-toggleable-ns-class-show: ~".ui-@{ns}-show";
@-toggleable-ns-class-hide: ~".ui-@{ns}-hide";

lvl99

// Class mixin which contain style definitions for `show` state
.-toggleable-class-show(@rules: {}) {
  display: @-toggleable-display;
  @rules();
}

// Class mixin which contains style definitions for `hide` state
.-toggleable-class-hide(@rules: {}) {
  display: none;
  @rules();

lvl99

// Special mixin to apply any default state styles and rules
.-toggleable-init-default(@rules: {}) {
  .-toggleable-state-show();
  .-toggleable-state-hide();
  @rules();
}

lvl99

// Modal Mixin Class
// @param @ns Namespaces the custom state classes
.ui-lvl99-modal(@ns: ~"lvl99-modal") {
  .ui-lvl99-toggleable(@ns);

  .-modal-init-default(@rules: {}) {
    .-toggleable-init-default(@rules);
  }
}

lvl99

// Modal Mixin Class
// @param @ns Namespaces the custom state classes
.ui-lvl99-modal(@ns: ~"lvl99-modal") {
  .ui-lvl99-toggleable(@ns);

  // Special mixin to apply any rules to the default class
  // If you feel you wouldn’t need to reuse this class definition in other components, you could
  // just define it in the main body of the mixin class definition
  .-modal-class-default(@rules: {}) {
    position: fixed;

lvl99

.modal {
  .ui-lvl99-modal(@ns: ‘modal’);
  .-modal-init-default({
    background: red;
    padding: 40px;
  });
}

// ... would output the following CSS
.modal {

lvl99

<?php

// Detect any specific server environment config setup to apply
// Default: development
$server_environment = 'development';
if ( ! empty( $_SERVER['HTTP_SERVER_ENVIRONMENT'] ) ) {
  $server_environment = $_SERVER['HTTP_SERVER_ENVIRONMENT'];
}

// Load the server environment config

lvl99

data-fancybox="gallery"
data-src="<?php echo esc_url( $item->large_file() ); ?>"
data-srcset="<?php echo esc_url( $item->large_file() ); ?> 1200w, <?php echo esc_url( $item->medium_file() ); ?> 640w"
data-width="<?php echo esc_attr( $item->meta_width() ); ?>"
data-height="<?php echo esc_attr( $item->meta_height() ); ?>"
data-caption="<?php echo esc_attr( wptexturize( $item->image->post_title ) ); ?>"

lvl99

/**
 * Change the loaded partial for the carousel-image-args to support Fancybox v3
 */
public function mytheme_jetpack_tiled_gallery_partial ( $file, $name, $context )
{
  // Point to the local partial for the carousel-image-args
  if ( $name === 'carousel-image-args' )
  {
    return get_stylesheet_directory() . "/partials/tiled-gallery-carousel-image-args.php";
  }

lvl99

$('[data-fancybox]').fancybox()