Title: jQuery TwentyTwenty Plugin
Last modified: December 26, 2017

---

# jQuery TwentyTwenty Plugin

 *  Resolved [stfa76](https://wordpress.org/support/users/stfa76/)
 * (@stfa76)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/jquery-twentytwenty-plugin-2/)
 * Hi,
 * I’m trying to integrate the TwentyTwenty Tool inside my WordPress site:
    [https://github.com/zurb/twentytwenty](https://github.com/zurb/twentytwenty)
 * I’m trying to do so without using one of the existing plugins since they don’t
   allow to use all the options when calling the script.
 * To do so, I downloaded the ‘twentytwenty-master.zip’ file, added the appropriate
   js and css files inside my child theme directories and added the lines below 
   inside the ‘functions.php’ file:
 *     ```
       function twenty_twenty_plugin()
       {
           wp_register_script( 'twenty_twenty_comparison_slider', get_stylesheet_directory_uri() . '/js/jquery.event.move.js', array('jquery'), '20171224', true );
           wp_register_script( 'twenty_twenty_comparison_slider', get_stylesheet_directory_uri() . '/js/jquery.twentytwenty.js', array('jquery'), '20171224', true );
           wp_enqueue_script( 'twenty_twenty_comparison_slider' );
   
           wp_register_style( 'twenty-twenty-css', get_stylesheet_directory_uri() . '/css/twentytwenty.css', array(), '20171224', 'all' );
           wp_enqueue_style( 'twenty-twenty-css' );
       }
       add_action( 'wp_enqueue_scripts', 'twenty_twenty_plugin' );
       ```
   
 * Everything seem to be loading perfectly fine since no issue is appearing in my
   navigator’s development tools and I see the different js and css files appearing
   inside the html source of the page.
 * But when I try calling the script inside the page using the code below:
 *     ```
       <div class="twentytwenty-container">
       <img src="image1.jpg" />
       <img src="image2.jpg" />
   
       <script type="text/javascript">
       $(function(){
         $(".twentytwenty-container").twentytwenty({
           default_offset_pct: 0.7, // How much of the before image is visible when the page loads
           orientation: 'vertical', // Orientation of the before and after images ('horizontal' or 'vertical')
           before_label: 'January 2017', // Set a custom before label
           after_label: 'March 2017', // Set a custom after label
           no_overlay: true, //Do not show the overlay with before and after
           move_slider_on_hover: true, // Move slider on mouse hover?
           move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement. 
           click_to_move: false // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
         });
       });
       </script>
       </div>
       ```
   
 * I get this error :
    `TypeError: $ is not a function`
 * The error is referring to this line:
    `$(function(){`
 * I guess I’m not making the proper call.
    Can somebody help me with this issue
   please? Thank you very much.
 * Best regards,
    Stephane.

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/jquery-twentytwenty-plugin-2/#post-9813569)
 * When you use WordPress’ built-in jQuery, it’s automatically loaded in `noConflict`
   mode, where the `$` shortcut isn’t available. Usually, you can get around this
   by wrapping the JavaScript:
 *     ```
       jQuery( document ).ready( function( $ ) {
         // the $ shortcut is available within this function
       } );
       ```
   
    -  This reply was modified 8 years, 5 months ago by [stephencottontail](https://wordpress.org/support/users/stephencottontail/).
 *  Thread Starter [stfa76](https://wordpress.org/support/users/stfa76/)
 * (@stfa76)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/jquery-twentytwenty-plugin-2/#post-9814307)
 * Thank you for this explanation.
    Since I’m not familiar with JS programming, 
   I’m not sure I fully understand how I should implement the call to the function.
 * When I tried to modify the code as you mentioned :
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function($){
         $(".twentytwenty-container").twentytwenty({
       ```
   
 * Here is the message I get : `TypeError: $(...).twentytwenty is not a function`
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/jquery-twentytwenty-plugin-2/#post-9815839)
 * It sounds like the twentytwenty.js file is not referenced on the page for some
   reason. On what page are you trying to initialize twentytwenty? If it’s a backend
   page, the proper action into which to hook your enqueue script call is “admin_enqueue_scripts”.
   If it’s a front end page, the action you used is correct.
 * Additional things to check:
    Check the page’s HTML source and ensure the path
   to the twentytwenty.js file in the script link is correct. Also be sure the file
   permissions on the server are correct for the WP system user.
 *  Thread Starter [stfa76](https://wordpress.org/support/users/stfa76/)
 * (@stfa76)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/jquery-twentytwenty-plugin-2/#post-9819981)
 * Thanks a lot for the tips [@bcworkz](https://wordpress.org/support/users/bcworkz/).
 * When checking the page’s HTML source, I found out that one of the js file was
   indeed not loaded. So I just changed the function inside the ‘functions.php’ 
   file to this:
 *     ```
       // TwentyTwenty Plugin
       // https://zurb.com/playground/twentytwenty
       function twenty_twenty_plugin()
       {
           wp_register_script( 'twenty_twenty_jquery_event_move', get_stylesheet_directory_uri() . '/js/jquery.event.move.js', array('jquery'), '0.1.0', true );
            wp_enqueue_script( 'twenty_twenty_jquery_event_move' );
   
       	wp_register_script( 'twenty_twenty_jquery_twentytwenty', get_stylesheet_directory_uri() . '/js/jquery.twentytwenty.js', array('jquery'), '0.1.0', true );
           wp_enqueue_script( 'twenty_twenty_jquery_twentytwenty' );
   
           wp_register_style( 'twenty-twenty', get_stylesheet_directory_uri() . '/css/twentytwenty.css', array(), '0.1.0', 'all' );
           wp_enqueue_style( 'twenty-twenty' );
       }
       add_action( 'wp_enqueue_scripts', 'twenty_twenty_plugin' );
       ```
   
 * And then applied the code mentioned by [@stephencottontail](https://wordpress.org/support/users/stephencottontail/).
 *     ```
       <div id="compare1" class="twentytwenty-container">
       <img src="img_before.jpg" />
       <img src="img_after.jpg" />
       <script type="text/javascript">
       jQuery( document ).ready( function( $ ) {
         $("#compare1").twentytwenty({
           before_label: 'Label before', // Set a custom before label
           after_label: 'Label after' // Set a custom after label
         });
       });
       </script></div>
       ```
   
 * And now, it’s working fine.
    Thanks a lot to both of you 😉

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘jQuery TwentyTwenty Plugin’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 4 replies
 * 3 participants
 * Last reply from: [stfa76](https://wordpress.org/support/users/stfa76/)
 * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/jquery-twentytwenty-plugin-2/#post-9819981)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics