尝试将Smooth Div Scroll Jquery连接到我的网站，但未连接？

Question

Hi I am trying to connect Smooth Div Scroll to my site: http://Izzy.me

Smooth Div Scroll is this: http://smoothdivscroll.com/

In the front page of Izzy.Me I have 3 pictures of birds that I am using as an example to see if Smooth Div Scroll is connected.

This is the CSS of those pictures:

    <div id="makeMeScrollable">
    <img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg" alt="Field" id="field" />
    <img src="http://www.birds.com/wp-content/uploads/home/bird.jpg" alt="Gnome" id="gnome" />
    <img src="http://3.bp.blogspot.com/-KFaKPd9ytxM/TxdKjRZulaI/AAAAAAAAD6A/w0kduvREq2w/s1600/bird-1-wallpaper-1024x768-853745.jpeg" alt="Pencils" id="pencils" />
    </div>

In my child functions php I have this :

    <?php

    function theme_javascript()
    {
    wp_enqueue_script( 'kinetic', get_template_directory_uri() .      '/js/jquery.kinetic.min.js', array('jquery'), '20140109', true );   
    wp_enqueue_script( 'mousewheel', get_template_directory_uri() . '/js/jquery.mousewheel.min.js', array('jquery'), '20140109', true );  
    wp_enqueue_script( 'smoothdivscroll', get_template_directory_uri() . '/js/jquery.smoothdivscroll-1.3-min.js', array('jquery'), '20140109', true ); 
    wp_enqueue_script( 'jquery-ui-1.8.23.custom', get_template_directory_uri() . '/js/jquery-ui-1.8.23.custom.min.js', array('jquery'), '20140109', true ); 
    wp_enqueue_script( 'jquery-ui-1.10.3.custom', get_template_directory_uri() . '/js/jquery-ui-1.10.3.custom.min.js', array('jquery'), '20140109', true ); 
    }

    add_action( 'wp_enqueue_scripts', 'theme_javascript' );


    ?> 

The file of the plugin that I downloaded from smoothscroll , includes both .min files and the full js files. I just dragged and dropped the .min files into my parent themes JS folder and ignored the more complete .js files in the folder.

I am not sure if my functions code is written right , because the name of the .min files confused me a little as to how to include them correctly. So maybe thats why its not connecting ? the five names of the .min files are :

1. jquery.kinetic.min
2. jquery.mousewheel.min
3. jquery.smoothdivscroll-1.3-min
4. jquery-ui-1.8.23.custom.min
5. jquery-ui-1.10.3.custom.min

so looking back now at the functions php i included does it look right ? ( thanks for your help )

Answer 1

debug your javascript:

1. open site in Chrome
2. press F12
3. refresh the page, do you see any errors?

Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'widget' - this error occurs if jQuery.UI is not connected

try to find incompatible libraries:

1. create external working sample, then insert it into site ( http://jsfiddle.net/wnCPL/ ).
2. try to change order of js libraries.
3. try to exclude JS libraries sequentially one after the other
4. replace incompatible library to another similar or different version

sample html:

<div id="makeMeScrollable">
    <img src="https://lh5.googleusercontent.com/-B5j3nmGIRLY/Uh3PDcFW1GI/AAAAAAAADmg/6qMAB1d7E4Y/w439-h612-no/DSC_1841-Edit_HDR-v2-w900-RP.jpg" alt="Field" id="field" />
    <img src="https://lh3.googleusercontent.com/-5JUmqJ5zOho/Uf5xP9l5LcI/AAAAAAABB-U/dVkkiLJ3_PA/w857-h612-no/In+Living+Color+%25C2%25A9+Laurie+Rubin_LAR3452.jpg" alt="Gnome" id="gnome" />
    <img src="https://lh5.googleusercontent.com/-NNtAD1d_Ekg/UgGad3929uI/AAAAAAAAXxc/oRerem5pkPg/w918-h612-no/Afternoon-2.jpg" alt="Pencils" id="pencils" />
</div>

sample javascript

$(document).ready(function () {
    $("#makeMeScrollable").smoothDivScroll({
        touchScrolling: true,
        manualContinuousScrolling: true,
        hotSpotScrolling: false,
        mousewheelScrolling: false
    });
});