Parallax-img-scroll icon indicating copy to clipboard operation
Parallax-img-scroll copied to clipboard

Wordpress issue

Open nathalizator opened this issue 8 years ago • 1 comments

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)

nathalizator avatar Feb 10 '17 11:02 nathalizator

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);

webfolkcreative avatar Sep 18 '17 14:09 webfolkcreative