SJ Responsive Listing For Zoo

This guide will help you install SJ Responsive Listing for Zoo step by step.


1REQUIREMENT – Back to top

At the basic level, this module will require the following conditions:

  • Compatible with version Joomla: Joomla!2.5, Joomla! 3.x and Responsive layout.

2INSTALLATION – Back to top

Prepare your module package

  • Firstly, you need to UNZIP file that you have downloaded. Please note that you should choose module package that are suitable with each Joomla version which you have just downloaded.
  • Secondly, install main module (extracted mod_ file):
  • In your Administrator page, go to Extensions -> Extension Manager. In this page, click “Choose file”, select module package.
  • Then click Upload & Install

    • Please wait for module being installed, usually within several seconds.


  • Now go to Extensions -> Module Manager, click Select Type box and choose the module you have installed.
  • Prepare to perform Module Configuration


3.1 Module Demo

3.2 Module Configuration

Note:We used the images of module’s installation on Joomla 3.x to illustrate.

After installing, go to Extensions -> Module Manager and find SJ Responsive Listing for Zoo to configure.SJ Responsive Listing for Zoo module is configured in 8 main groups of parameters as following:

  • Module.
  • Source Options.
  • Odering Options.
  • Tabs Optionss.
  • Items Options.
  • Category Options
  • Image Options.
  • Advanced.

Let’s look at the parameters in detail:


  • Link Target – Allow to set target for links:
    • New Window.
    • Same Window.
    • Popup Window
  • # Column – Allow to set number of column for each device:
    • For devices have screen width from 1200px to greater.
    • For devices have screen width from 768px up to 1199px.
    • For devices have screen width from 480px up to 767px.
    • For devices have screen width less than or equal 479px.
  • Display sort form – Allow you to show Sort list box
  • Display layout switch – Allow you to show Switch layout button
  • Default layout – Allow you to choose Grid (sample above) or List as default layout

Source Options.

  • Zoo Application – Allow to choose Zoo Application.
  • Zoo Category – Allow to choose categories show on fontend.
  • Category PreLoad – Choose the part of source that is used for preloading.
  • Source Filter – Allow to choose type of Source Filter.
  • Count – The number of items to display. The default value “0” will display all items

Odering Options. 

  • Show Item Ordering – Allow to choose items show on frontend.
  • Article Field to Order By – Allow to choose the criterion for order:
    • Title
    • Most Viewed
    • Recently Added
  • Ordering Direction – Select the direction you would like items to be ordered by.

Tabs Options.

    • All Tab Display – Allow you to choose showing Tab OR not.
    • Category Title Maxlength – Allow to set the length of category title.
    • Count Item Display – Allow you to show the number of items along with catefory title OR not.

Items Options.

  • Display Title – Allow to show/hide title of items.
  • Title Maxlength – The maxlength of items’s title. Set “0″ to show full title.
  • Description Display – Allow to show/hide Description of items.
  • Description maxlength for Layout Grid – Allow to set the length of item description.
  • Description maxlength for Layout List – Allow to set the length of item description.
  • Tags Display – Allow to show/hide Tags of items.
  • Dispaly Related Articles – Allow to dispaly Related Articles or Not.
  • Hits Display – Show the number of view hits OR not.
  • Created Date Display – Show the created date OR not.
  • Readmore Link – Allow to show/hide a link of item.

Category Options. 

  • Category Title – Allow to Show/Hide Title of Category.

Image Options.

  • Get Images From Teaser Image
    • Teaser Image – Allow to show Teaser image fulltext of Items OR not.
  • Get Images From Image
    • Image – Allow to show image Items OR not.
  • Get Images From Description
    • Description– Allow to show Description image of items OR not.
  • Get Images From Extend Folder
    • Extend Folder – Allow to show/hide Extend Folder.
    • Extend Folder – Set path to external image folder used by option above.
    • Order to Get – Order to Get image.
    • Resize Mode – Allow to choose the mode of image resizing.
    • Output Format – Output Format after resizing.
    • Keep Transparency – Allow to keep transparency of image OR not.
    • Width – Allow to set width of image.
    • Height – Allow to set height of image.
    • Background – Allow to set the color of image background.
    • User Default Image – Allow to use Default Image or not.
    • Place holder Path (or Url) – The path or URL of Default Image.

Advanced Options.

    • Module Class Suffix – Allow to input class suffix.
    • Alternative Layout – Set custom layout for this module.
    • Include Jquery – Allow you to include Jquery OR NOT.
    • Pre-text – The content to show at the top of module.
    • Post-texl – The content to show at the end of module.
    • Caching – Select whether to cache the content of this module.
    • Cache Time – The time in seconds before the module is recached.
    • Module Tag – Allow to select the HTML Tag for module.
    • Bootstrap Size – Allow to set the number of columns that module will use.
    • Header Tag – Allow to select the HTML Tag for module header/title.
    • Header Class – Support the CSS Class for module header/title.
    • Module Style – Select module style.

4SUPPORT – Back to top

Thank you so much for purchasing this extension. If you have any questions that are beyond the scope of this help file, please send us via: Submit a Ticket

Thanks so much!