search

cyntss / Parallax-img-scroll

Parallax effect to make images (or any other kind of html content) float and move as the website is scrolled up or down.
183 stars 90 forks source link

Wordpress issue #3

Open nathalizator opened 7 years ago

nathalizator commented 7 years ago

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)
webfolkcreative commented 7 years ago

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