Parallax-img-scroll
Parallax-img-scroll copied to clipboard
Wordpress issue
I am trying to use your plug-in on wordpress.
1)I have enqued the script such as :
wp_enqueue_script( 'parallaximg', get_template_directory_uri() . '/js/parallaxImg.js', array('jquery'), true);
to avoid conflict with jquery i have embed parallaxImg.js into
jQuery(document).ready(function($){});
2)I added this to my index.php
<div class="parallax-img-container">
<img id="parallax-img-2" class="parallax-move" src="http://localhost:8888/lerestaurant/wp-content/uploads/2017/02/4.png" />
<img id="parallax-img-3" class="parallax-move" src="http://localhost:8888/lerestaurant/wp-content/uploads/2017/02/12.png" />
</div>
3)I add those line in header.php
<script type="text/javascript">
jQuery(document).ready(function($){
var parallaxSettings = {
initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
pageLoader: true
};
parallaxImgScroll(parallaxSettings);
});
</script>
I still have this error
Uncaught ReferenceError: parallaxImgScroll is not defined
at HTMLDocument.<anonymous> ((index):55)
at j (jquery.js?ver=1.11.3:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.11.3:2)
at Function.ready (jquery.js?ver=1.11.3:2)
at HTMLDocument.J (jquery.js?ver=1.11.3:2)
Is there a reason you are placing the initialization script within the header.php instead of using WP best practicing and enqueuing it? This is the proper way:
Create a "parallaximg-init.js" file and place the following code in it:
jQuery(document).ready(function($){
var parallaxSettings = {
initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
pageLoader: true
};
parallaxImgScroll(parallaxSettings);
});
Then enqueue your scripts:
wp_enqueue_script( 'parallaximg', get_template_directory_uri() . '/js/parallaxImg.js', array('jquery'), true);
wp_enqueue_script( 'parallaximg-init', get_template_directory_uri() . '/js/parallaxImg.js', array('jquery', 'parallaximg'), true);