Journal

Zentools Masonry

Print Email

Overview

The best way to think of the jQuery Masonry effect is that it's the opposite of css floats. Whereas floating elements with css will organise each block horizontally (see the grid layout), masonry organises each block vertically. The blocks on the page consequently organise themselves based on the next available space below the preceding block, like a jigsaw puzzle or as the name suggests a piece of masonry.

Two main layout options.

There are two main ways that zentools implements the masonry layout.

  • Widths specified by the meta keywords - as shown below. (setup instructions below).
  • Equal number of columns. Example here.

Features

  • Create dynamic and flexible layouts using multiple width items as well as equal width items.
  • Display any number of core elements from your Joomla or K2 content or images retrieved from a folder.
  • Media queries revert all items to a 100% width for smaller screens.

Responding to small screens

If you resize this page you will be able to see that rather than rendering smaller and smaller columns on mobile resolutions we have used some media queries to specify that when the browser reaches the width of 520px, all of the columns collpase into a single column. This is a uniform behaviour for all of the Zentool module layouts.

The item category overlay

The platform template has some specific css added for the zentools module to display the category element as an overlay on top of the image. In order to display the category name in this way you need to ensure that the category element is the second item in the zentools list while the first is the image. If this is not the case then the category layout will display in a normal "flat" method.

Masonry using equal widths

Zentools Masonry

Zentools List

Print Email

Overview

The Zentools list layout is the perfect layout for when you need to display your content in a simple unordered list.

 

Features

  • Each item is rendered underneath the next one in a vertical list.
  • Create layouts that include up to four columns.

Two columns

A simple blog style two column layout using Joomla as the content source.

 

Three Columns

A three column list layout rendering content from Joomla.

 

A K2 Example

The following example uses k2 as the content source. The module provides a setting to replace the image from the item with a video if the video exists. It is also possible to display both he image and the video for each item.

    No content assigned to be displayed.

 

Four Columns

A four column layout using K2 as it's source.

 

    No content assigned to be displayed.

 

Zentools Carousel

Print Email

Overview

The Zentools carousel is a responsive carousel (resize your browser) that scales to suit the width of your page. The examples below are highlighting the subtle image effects available in the module.

 

Carousel Features

  • Responsive: responds to the width of your page (resize your browser to see)
  • Display unlimited images from a folder, Joomla or K2 content.
  • Determine the base width of the carousel item
  • Determine the minimum number of items to display in a carousel at one time.
  • When the page is resized the current item is returned to the visible part of the carousel.
  • Based on the elastislide carousel script.

Rounded shadow example

The shadow example below is another implementation of css3 to generate a subtle shadow effect on the image. The relevant css is .zenshadow img.

The carousel is displaying a selection of images loaded from a folder.

Zentools Accordion

Print Email

Accordion mode

Zentools Slideshow

Print Email

Overview

The Zentools slideshow is a responsive slideshow that is simple to use.

 

Features

  • A responsive slideshow that responds to the width of your template.
  • Display any number of core elements sourced from Joomla, K2 or images from a folder.
  • Multipl epagination options inclusing thumbnails, titles, numbers and discs.
  • A selection of simple pre-built themes.
  • Next / Previous buttons.
  • Control slideshow speed and duration.
  • Multiple slideshows on a single page.

 

Slideshow using the overlay theme

The overlay theme positions the image of the slideshow underneath the other elements assigned to the module. To use this layout effectively you must make sure that the image is the first image in the ordering of tags int he admin.

The example below features the thumbnails as pagination option.

  • Frattura
  • Gruppo Italiano Frattura
  • La Frattura
  • Rivista IGF
  • metal

 

 

Slideshow using the flat theme.

The flat theme allows you to create a number of different layouts using the

The example below features the number pagination option.

 

of

 


IGF news

Close Panel

Member Login