WP Slide-up box

Description

Add jQuery-driven fancy slideboxes to your WordPress pages and posts. With this plugin a layer will slide on an inserted picture on mouse hover or touch event.

Features:

  • 10 different animations
  • Full support for touchscreens
  • Can be used as a shortcode or a loop function
  • Shortcode builder in admin
  • High level of customizability

You can find detailed documentation about the plugin on the author’s website:
WP Slide-up box documentation

If you like this plugin, please rate it 5*.
If you have an idea how we could make it better, please let us know on the Support tab.

Screenshots

  • Here is what the plugin does in general. Hover your mouse over the image and the cover layer slides up.
  • And here is the shortcode generator from the admin

Installation

  1. Go to Plugins >> Add New in wp-admin
  2. Search for “wp slide-up box”
  3. Click on the Install Now button
  4. Then on Activate
  5. After that a new page will appear in WP-admin (under Appearance » WP Slide-up box) where you can find the shortcode generator.

FAQ

How can I determine the picture IDs in WordPress?

We made a short tutorial on this topic:
https://a-idea.studio/blog/2016/05/27/find-id-number-picture-wordpress/

What animation types can I use?

The available animation types (modes) are listed in the dropdown in the shortcode generator (wp-admin >> Appearance >> WP Slide-up box). To see how they work, visit the Modes Showcase page.

How can I add links to the description?

Since v0.4 you can add 2 types of links to the boxes:

  • Target link: the target attribute of the shortcode. It will link the full box to the target URL.
  • Description links: you can place local links inside the description attribute using the following shorttag (of course you can change the Link text and the URL to whatever you’d like to): {{Link text|http://example.com}}

Hierarchy of the links: if you specify both a Target link and a Description link then the Description link will be used and the Target link won’t be added to the box.

Can I use HTML code in the description part?

Generally yes, however, the allowed HTML tags are limited to these: ‘br’, ’em’, ‘strong’, ‘i’, ‘b’, ‘p’, ‘span’, ‘ul’, ‘ol’, ‘li’. No HTML tag attributes are allowed to prevent conflicts with the shortcode attributes.

Also, if you’re adding HTML tags, make sure you do it in the Text edit mode and not in Visual mode. Otherwise your HTML tags will be escaped.

Reviews

Read all 3 reviews

Contributors & Developers

“WP Slide-up box” is open source software. The following people have contributed to this plugin.

Contributors

Translate “WP Slide-up box” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

0.4.1 (2017-01-11)

  • M: website links are changed to https:// in the readme and in plugin file headers
  • F: target links on touchscreens weren’t working in v0.4. Now it’s fixed.
  • F: better compatibility with the 2016 theme

0.4 (2016-11-30)

  • A: links can be placed inside the description
  • A: touchscreen support – a tap on the box starts the animation, while the link appears in the corner
  • A: now not only image IDs, but image URLs can also be used, making it possible to use external images, too
  • A: added plugin header and icon for the WP plugin directory
  • M: the plugin code is now more secure using escaping methods
  • M: the extra class is added to the container boxgrid DIV insead of the cover – it adds more customizability
  • M: links in the help block and in readme now point to the new website
  • F: on some themes the cover layer had issues if the IMG had margins – now it’s fixed

0.3.1 (2016-08-25)

  • Fixed cover width issues in JS (sometimes it was not set properly on some servers)
  • Improved responsiveness (in the previous version there had been issues with window resizing)

0.3 (2016-05-27)

  • Plugin’s code was rewritten completely with more attention to quality
  • The plugin no longer creates a table in WPDB, everything can now be controlled via the shortcode or the template function’s parameters (however, we kept the table reader functions for backwards compatibility)
  • Size parameter added for using other image sizes than “full”
  • The project is now on GitHub
  • Admin is now responsive
  • Front end now has better support for responsive images
  • Shortcode generator added in admin
  • everything is prefixed now correctly: the plugin is less prone to conflicts with other plugins

Full Changelog

The idea

The original idea for this plugin was published by Sam Dunn in this article.