'Image Plus' Add-on for concrete5

This extension for concrete5 will let you add nice CSS3 style animations to your images. More than 15 different 2D and 3D effects are included !!

When you link the image to another page, you can get a preview of it right below your block ! This makes it a great tool to create a gallery for a portfolio.

So... let's just see what this is all about!

More on 'Image Plus':
With an example template !
Only for testing Preview

Example 1

Image Plus

Effect 11

Here's some text.

Open Link
Read More
Close Page View

Hover the mouse over the image, or tap on it on a touchscreen. You will get the 'garage door' effect.

Click on the 'Read More' button and a preview of the linked page will open below.

The preview will show the content of the 'main' area. To show the full page, just open the link with the 'open link' button.

Example 1 will open a 'lightbox'.

Note that the preview pull's content from another page. It won't be able to interact, so forms or other inputs won't work.



Preview block

Two blocks are included in the Image Plus Package:

  • Image Plus
  • Preview Image Plus

The 'Image Plus' block will display your images. The 'Preview' block can be used to specify the location where a page preview should be displayed. When previewing a page, only the 'main' area will be displayed.

The Preview block is easy to use: just give it a name like 'paintings' and use this same name in your 'Image Plus' blocks. You can use multiple Preview blocks on a page. Just use different names.

If you don't use a preview block, or if the name of the preview block can't be found, don't worry, Image Plus will try to find a suitable location to display the preview content.

Example 2

Let's see how that preview block works.

I created a layout with 2 columns. On the right an 'Image Plus' block. And here, below this text on the left a 'Preview' block named 'preview'.

I gave it a little border, background color and padding just to show where it is. I'm sure you can do better on the design end :D

Note how this works on mobile devices. When a preview is opened, it will scroll into view, and when closed, it will scroll back to the original position.

Image-Plus

Image-Plus

click on 'read more' to preview the example page.

Open Link
Read More
Close Page View