jQuery and Wordpress Plugins

Question

So I'm working on a plugin, but I'm having difficulties adding a jQuery function to it. I read other post and searched everywhere, but nothing seems to work. I see the jQuery in the header so I know that it's loading, but when I try to call the function nothing happens.

Here's what I have

function OneEightyView($atts = array(), $content = null, $tag){

shortcode_atts(array(

    'img1' => 'default var1',

    'img2' => false,

    'img3' => false,

    'img4' => false,

    'img5' => false

), $atts);



$img1 = $atts['img1'];

$img2 = $atts['img2'];

$img3 = $atts['img3'];

$img4 = $atts['img4'];

$img5 = $atts['img5'];



?>



<script type="text/javascript">

$(function(){

    $('#oeContianer').serce();

});

</script>



<div id ="oeContianer" >

    <img src="<?php echo $img3; ?>" data-images="<?php echo $img1 . ',' . $img2 . ',' . $img3 . ',' . $img4 . ',' . $img5 ?>" alt=""/>

</div>    

<?php   

}



function oneeighty_enqueue_script() {

wp_enqueue_script( 'selector_oneeighty_jquery_script', plugin_dir_url( __FILE__ ) . 'lib/jquery-2.1.3.js', array( 'jquery' ), '4.8.1', true );

wp_enqueue_script( 'selector_oneeighty_script', plugin_dir_url( __FILE__ ) . 'jquery.serce.min.js', array( 'jquery' ), '4.8.1', true );

}

add_action('wp_enqueue_scripts', 'oneeighty_enqueue_script');



/**** Add Shortcode ****/

add_shortcode('one-eighty-wiew', 'OneEightyView');

One can replace those image "$atts" with any image url to see it in live action.

Can someone point me in the right direction.

Thank you!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

So I was able to solve the problem which was cause by an extra jQuery file and not having the correct method of handling the functions. It was basically a jQuery conflict.

So what I did was switch "$" to jQuery and removed this line

wp_enqueue_script( 'selector_oneeighty_script', plugin_dir_url(__FILE__ ) . 'jquery.serce.min.js', array( 'jquery' ), '4.8.1', true );

My new snippets look like this

<script type="text/javascript">
    jQuery(function(){
        jQuery('#oeContianer').serce();
    });
</script>
<?php
function oneeighty_enqueue_script() {
    wp_enqueue_script( 'selector_oneeighty_script', plugin_dir_url(__FILE__ ) . 'jquery.serce.min.js', array( 'jquery' ), '4.8.1', true );
}
add_action('wp_enqueue_scripts', 'oneeighty_enqueue_script');
?>

jQuery and Wordpress Plugins

Sign up