beforeafter.php

<?php
/* PARA USAR COM WORDPRESS */

class BeforeAfter {

	public function __construct(){}

	public function do_shortcode()
	{
		add_action( 'wp_enqueue_scripts', array($this, 'add_scripts') );	
		add_shortcode( 'before_after', array($this, 'before_after'));
	}


	public function before_after($att)
	{
		$before = array_key_exists("before", $att) ? $att['before'] : '';
		$after = array_key_exists("after", $att) ? $att['after'] : '';
		
		if ($before != "" || $after != "")
		{
			return sprintf('<div class="twentytwenty-container beforeafter"><img src="%s" alt="Antes"><img src="%s" alt="Depois" /></div>', $before, $after);
		}
	}

	public function add_scripts()
	{
		wp_enqueue_style( 'beforeafter', esc_url_raw( 'https://s3.amazonaws.com/britonet-backup/beforeafter.css' ), array(), null );
		wp_enqueue_script( 'beforeafter', esc_url_raw( 'https://s3.amazonaws.com/britonet-backup/beforeafter.js' ), array('jquery'), null, true );

		add_action('wp_footer', array($this, 'custom_js'));
	}

	public function custom_js()
	{
		echo '<script>jQuery(window).load(function() {
  jQuery(".beforeafter").twentytwenty();
});</script>';
	}

}

$bf = new BeforeAfter();
$bf->do_shortcode();