This is a simple parallax image plugin that uses the parallax.js script by pixelcog - http:\/\/pixelcog.github.io\/parallax.js\/<\/p>\n\n
To insert your full width parallax image, simply use the [dd-parallax] shortcode. Include text to be overlaid on the parallax between the open and close [\/dd-parallax] 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.<\/p>\n\n
** Please note for WP 5.0 **\nCurrently this plugin works, but the TinyMCE button only works with the classic editor. A Gutenberg widget is in the works.<\/p>\n\n
For example:<\/p>\n\n
[dd-parallax img=\"imagename.jpg\" height=\"600\" speed=\"3\" z-index=\"-100\" mobile=\"mobile-image.jpg\" offset=\"true\"] \n\nText to be overlaid on the paralllax window\n\n[\/dd-parallax]\n<\/code><\/pre>\n\nAvailable parameters for use:<\/p>\n\n
\n- img - use the filename from the media library for this, not the full path. Just use imagename.jpg or image.png. (You can also use a fully qualified URL)<\/li>\n
- height - This is the height of the parallax window. The unit is in pixels. Just enter a number<\/li>\n
- 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.<\/li>\n
- z-index [optional] (default = 0) - The z-index value of the fixed-position elements. By default these will be behind everything else on the page.<\/li>\n
- 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.<\/li>\n
- offset [default = false] (options: \"true\" or \"false\") - This will pull the parallax content all the way to the left of your screen. You can put the contents into a \"container\" class if you're using bootstrap or just center the contents for horizontal centering. On testing with the WordPress 2016 Theme, keep offset at False. With Bootstrap Themes, I recommend using the \"offset='true'\" parameter.<\/li>\n
- position [optional] \u2013 (defaults to 'Left') This is analogous to the background-position-x css property. Specify coordinates as right, left, center, or pixel values (e.g. -10px 0px). The parallax image will be positioned as close to these values as possible while still covering the target element.<\/li>\n
- text-pos [optional] - Default is 'top' (to maintain compatibility with ver 1.6). Available options are \"top\", \"center\", \"bottom\".<\/li>\n<\/ul>\n\n
Admin-Settings page enables or disables the TinyMCE icon (if you don't want it in your WP-Editor)<\/p>\n\n
Demo<\/h3>\n\n
View a demo of this plugin here<\/a><\/p>\n\n\n\n- Upload the plugin files to the
\/wp-content\/plugins\/parallax-image<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n- Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<\/ol>\n\n\n
\nI'm not seeing the image on the screen, what did I do wrong?<\/h3><\/dt>\nFor this - there are 2 probable reasons that you're not seeing the parallax.\n * 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.\n * 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 - w3schools<\/a><\/p><\/dd>\nCan I have multiple parallax images on each page.<\/h3><\/dt>\nYes<\/p><\/dd>\n
Will this work on mobile devices<\/h3><\/dt>\nFor mobile devices, you can either have a totally separate mobile image by using the \u2018mobile\u2019 parameter in the shortcode, or you can just have the main parallax image resize itself and be responsive.<\/p><\/dd>\n
While I\u2019m debugging, the mobile test doesn\u2019t look right<\/h3><\/dt>\nIf you\u2019re resizing your browser window to check for responsiveness, the plugin uses mobile_detect, so you must either spoof your user agent, or test on a real mobile device. You might have to refresh for it to work right.<\/p><\/dd>\n\n<\/dl>\n\n\n
1.9.1<\/h4>\n\n
Update to address CVE ID: CVE-2024-11224<\/p>\n\n
1.9<\/h4>\n\n
Update to address CVE ID: CVE-2024-9898<\/p>\n\n
1.7.1<\/h4>\n\n
Add check of existence for offset js<\/p>\n\n
1.7<\/h4>\n\n
Updated to work with Twenty Nineteen. Added ability to position overlay text top, center, or bottom.<\/p>\n\n
1.6<\/h4>\n\n
Updated Parallax.js source script to version 1.5 fixes some flickering when placed close to other objects.<\/p>\n\n
1.5<\/h4>\n\n
Add TinyMCE button and options under settings menu<\/p>\n\n
1.4<\/h4>\n\n
Fix for mobile image from external URL.<\/p>\n\n
1.3<\/h4>\n\n
Added shortcode attribute \"offset\" to pull contents of Parallax Contents (text overlays) to the left.<\/p>\n\n
1.2.1<\/h4>\n\n
Add ability to specify img source outside of media library or use full URL.<\/p>\n\n
1.2<\/h4>\n\n
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.<\/p>\n\n
1.1.1<\/h4>\n\n
Added a Space to the style block to correct<\/p>\n\n
1.1<\/h4>\n\n
Fixed Error<\/p>\n\n
1.0.2<\/h4>\n\n
Removed extra js to keep lightweight<\/p>\n\n
1.0.1<\/h4>\n\n\n- Update Plugin URI<\/li>\n<\/ul>\n\n
1.0<\/h4>\n\n\n- Initial Release Version<\/li>\n<\/ul>","raw_excerpt":"Insert a full width parallax image into your page with this simple shortcode. Parameters allow for setting several key functions like height","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/57219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=57219"}],"author":[{"embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/thehowarde"}],"wp:attachment":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=57219"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=57219"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=57219"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=57219"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=57219"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=57219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}