jQuery TwentyTwenty Plugin

  • Resolved stfa76

    (@stfa76)


    8 years, 5 months ago

    Hi,

    I’m trying to integrate the TwentyTwenty Tool inside my WordPress site:
    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

    (@stephencottontail)

    8 years, 5 months ago

    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
} );
    Thread Starter stfa76

    (@stfa76)

    8 years, 5 months ago

    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

    (@bcworkz)

    8 years, 5 months ago

    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

    (@stfa76)

    8 years, 5 months ago

    Thanks a lot for the tips @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.

    <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.