Parallax Image Plugin

Insert a full width parallax image into your page with this simple shortcode. Parameters allow for setting several key functions like height.

Download from WordPress.org

== Demo ==

See a demo version here https://www.duckdiverllc.com/parallax-image-plugin-demo/

== Description ==

This is a simple parallax image plugin that uses the parallax.js script by pixelcog – http://pixelcog.github.io/parallax.js/

To insert your full width parallax image, simply use the code. This plugin has been tested with WordPress 2014, 2015, 2016, and 2017 themes as well as a few themes that use Bootstrap. I can’t guarantee that it will work with all themes, but it’s worth a shot.

For example:

[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"] 

Text to be overlaid on the paralllax window

[/dd-parallax]

Available parameters for use:

* img - use the filename from the media library for this, not the full path. Just use imagename.jpg or image.png.
* height - This is the height of the parallax window. The unit is in pixels. Just enter a number
* speed [optional] (default = 2) An integer between 0 and 10. The speed at which the parallax effect runs. 0 means the image will appear fixed in place, and 10 the image will flow at the same speed as the page content.
* z-index [optional] (defulat = 0) - The z-index value of the fixed-position elements. By default these will be behind everything else on the page.
* mobile [optional] – If you want a mobile fixed image for mobile display, choose a different image, otherwise it will select the full sized image from the parallax and make it a responsive image.

== Frequently Asked Questions ==

= I'm not seeing the image on the screen, what did I do wrong? =

For this - there are 2 probable reasons that you're not seeing the parallax.
* First - Check to make sure that your img is only the file name, and not the full path. If you view the media library in "list" mode yourdomain.com/wp-admin/upload.php?mode=list - there you'll see the filename with the .jpg or .png extension.
* Second - If not the first answer. Check your z-index. Changing the z-index will adjust the layering of your screen with CSS, and may need to be changed depending on how your theme displays the backgrounds and colors. For more about z-index - https://www.w3schools.com/cssref/pr_pos_z-index.asp

= Can I have multiple parallax images on each page. =

Yes

= Will this work on mobile devices =

For mobile devices, you can either have a totally separate mobile image by using the ‘mobile’ parameter in the shortcode, or you can just have the main parallax image resize itself and be responsive.

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/parallax-image` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress.

== Screenshots ==

The Editor View with the shortcode inserted

The parallax image with a full-width template in Bootstrap.

This is the parallax "Window" on a standard page on the 2016 WordPress Theme.

 

== Changelog ==

= 1.2 =
Added mobile_detect and mobile options to make the image responsive for mobile display and render better on mobile. Added ‘mobile’ parameter to the shortcode as an option.

= 1.0 =
* Initial Release Version

If you like this and find it useful... Buy me a coffee...

17 Responses

  1. hi there. is there an easy way to put the parallax in a header ie: http://emberloveart.co.uk/index.php/sample-page/ thanks!
    • Howard Ehrenberg
      Hi. The only way to easily accomplish this would be to edit your header template and use something like:   $text = 'This is the text to be on the overlay text or whatever is on the parallax image'; echo do_shortcode('[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"]' . $text . '[/dd-parallax]');
  2. Hi, Great plugin. Testing it before using on my wife's ecommerce site. Can you tell me how to contain the image to the width of the screen? ON my laptop I'm not seeing the full image width - parts of the mage obviously extend past the border of the screen. Cheers
    • Howard Ehrenberg
      Hi Brad, Thanks for the kind words... To look into your issue, I'd need a URL for the site you're trying it on to take a look. Usually if it doesn't work, it's because of either a conflict with another script, or some css that is affecting the whole site.
  3. Thanks for the plugin, I tested all the other plugins that are similar and this works the best. Is there any way to have the image height vary according to the display / monitor / screen? For example, the url above looks perfect on my screen but if I go to a different computer with a different screen resolution, or, if I change the wdith of the browser window, the background image is not as high as the text so the text flows past the background. I have a WordPress website so I'm not sure how I could use javascript or something to vary the background to fit the screen size.
    • Howard Ehrenberg
      The parallax.js script that I used as the javascript for the plugin is not responsive.
  4. I am loving the parralax feature on the ThemeForest Composer Child theme. But, where do I go to change the height of the parralax and can I remove the page title from it please? Would love if you can help me on this one. Thanks
    • Howard Ehrenberg
      HI Sarah. These are options that are included. <code>[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg" offset="true"][/dd-parallax]</code> The "HEIGHT" parameter specifies the height... and if you don't put any words between the open and close tag, then it won't have any words.
  5. Hello Howard, thanks for your plugin. Just one question - is there a way to limit the parallax container to a max-width and centred? I've tried wrapping it in a div with those constraints, but it still goes full window width. Thanks,
    • Howard Ehrenberg
      Hi Kitka, The Parallax Mirror is where it's actually drawn. You could try <code>.parallax-mirror { max-width: 1200px; left: 0 !important; right: 0 !important; margin-left: auto; margin-right: auto; }</code> In your Custom CSS. The width I put was arbitrary, but would obviously depend on your application.
      • Yaay! Thanks. That worked. Cheers!
  6. I have a few parallax sections set up in my website using the plugin, there is no content between the tags, since the parallax serves asa divider. It works perfectly on large screens, but on smaller screens the image is too far down and over the content. I have looked at the code in the plugin editor and copied almost all of it to my style sheet to try and put a margin on the bottom, but regardless of media queries or ccs tags used, the margin doesn't apply on small screens. the only way I have found so far to fix this is by putting 4 empty lines between the parallax shortcode and the content, but that looks terrible on large screens. How do I add a margin or padding at the bottom of the mobile images?
    • Howard Ehrenberg
      Hi Dane,<br> <br> There could be many reasons why you're not able to make this work. First, you want to look for the class `parallax-mirror` which is added to the header. For the Mobile version, there is an option to display a separate image for mobile only. To view this on a desktop, you must be in inspect element, and refresh your page with the user agent set to a mobile device.<br> <br> With that said, it would entirely depend on your theme and it's framework.<br> For the spacing between the parallax image to hold space, you could just put a space that is set by css, where you have inside the parallax a div or a p tag with a class, and then in your css set the height of that unit depending on screen size.
  7. Ray
    Hi Howard, So far I'm loving this plugin! Right now the text I have is centered at the top of the image, but I want my text to be in the vertical middle. Any advice on how I can accomplish this?
    • Howard Ehrenberg
      To accomplish this, you'd have to use CSS. I'd recommend making the parent container `flexbox`, and then you can `align-item: center`
  8. I'm having issues with the plugin, where the image scrolls with the page as I scroll down the page and it doesn't stay in the position its supposed to. The issue goes away if i adjust the browser size a little, but I imagine viewers wont be doing that. Is there any way this can be solved with the current code?
    • Howard Ehrenberg
      Hi. I'm not sure I understand what the issue is. I need more information.

Leave a comment