Slideshow Examples
The demos below are based on our simple tag system. Simply add the tag calls for the content in your own custom html to get the following design!
<a href="{link}"> <div class="npslideshow1"> <img src="{teaserimageurl}"> <div class="npslideshow1_txt"> <h2>{title}</h2> <p>{text_1}</p> </div> </div> </a>
Featured Slideshow Example : Fade Effect
The JoomlaXTC Zoo Item Wall can create mutli-effect slideshows.
Featured Slideshow No Text Example : Slide Effect
Create multi-page slides with CSS styled control with the {pages} tag.
 |
Slide Demos 2
Slideshows with Buttons
Create multi-page slides with buttons by using the {leftbutton} {rightbutton} tags. Zoo Item Wall offers over 50 different button styles.
Slide Demos 3
Featured Slideshow 2 Example : Slide Effect
Content slideshows for full width sites or large areasStatic Text Slideshow Example
Create slideshows with static text overlays.
Slider Demos
Slider One Example: Auto Scroll
Create multi-page slides with buttons by using the {leftbutton} {rightbutton} tags. Zoo Item Wall offers over 50 different button styles.
Slider Two Example: Click for Scroll
Slider Three Example
Add CSS3 effects to the slides for a friendly interactive design.
Slider Four Example
Add styled pages with a little css and the {pages} tag.
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Bibendum wisi neque
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Dis due monec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Dui dis donec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Elit maecenas rhoncus
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Etiam vel sed potenti
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Maecenas elit rhoncus
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Vel etiam sed potenti
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Aenean ut sem libero (2)
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Aenean ut sem libero (3)
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Aptent amet aptent (2)
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...
Grid Examples
Grid One Example
Grid Two Example
Grid Three Example
Grid Four Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete.
Read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.
Read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.
Read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.
Read moreBlog Examples
Blog One Example
Single column blog with CSS styled text overlays and date badge
Blog Two Example
The {language} tag uses the core Joomla read more for multi language sites.
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Bibendum wisi neque
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read moreBlog Three Example
Multiple columns and rows example with CSS styled date badges.
Blog Four Example
Create cutting edge blog posts with your own custom HTML and CSS or use these pre-packaged template designs
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Bibendum wisi neque
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Dis due monec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read moreBlog Five Example
Multiple columns and rows example.
Aenean ut sem libero
2011-11-10Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Aptent amet aptent
2011-11-10Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Bibendum wisi neque
2011-11-10Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Dis due monec diam
2011-11-10Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read moreNews Examples
News One Example
Use the {mainarea} and {morearea} to create two different layouts at once.
Aenean ut sem libero
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Aptent amet aptent
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Bibendum wisi neque
Bibendum wisi neque
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Dis due monec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Dui dis donec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Elit maecenas rhoncus
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Etiam vel sed potenti
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Maecenas elit rhoncus
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Vel etiam sed potenti
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
News Two Example
Multiple columns and rows example.
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Bibendum wisi neque
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Dis due monec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Dui dis donec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Elit maecenas rhoncus
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
News Three Example
Multiple columns and rows example with CSS article wraps.
Aenean ut sem libero
2011-11-10
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Aptent amet aptent
2011-11-10
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Bibendum wisi neque
2011-11-10
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Dis due monec diam
2011-11-10
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Dui dis donec diam
2011-11-10
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read more
Elit maecenas rhoncus
2011-11-10
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...
Read moreNews Ticker Example
Use the mult-page slider in a single column and row to create newtickers and more.
Tooltip Examples
Tooltip One Example
Top tooltip using the {title} tag to display the article title in the tooltip.
Tooltip Two Example
Right tooltip using the {title} tag to display the article title in the tooltip.
Tooltip Three Example
Left tooltip using the {title} tag to display the article title in the tooltip.
Tooltip Four Example
Bottom tooltip using the {title} tag to display the article title in the tooltip.
PopUp One Example
Create Modal pop ups using the core Bootstrap modal to open the article intro in a modal.
Video PopUp Example
The video pop up is created by adding a video to the Zoo article.
List Examples
List 1 Example
A CSS3 styled list
List 2 Example
A CSS3 styled list with gutters.
List 3 Example
A standard article list with title and intro text, perfect for side bars.
List 4 Example
Create ordered lists using the {index} tag to display the numbered order.
Hero Examples
Hero Example
Hero Example 2
Creative Examples
Hexagon Example
Use CSS3 to create unique image styling and layouts.
Category Example
Use the {mainarea} and {morearea} to create featured layouts.
Category Example 2
A tabbed filtering layout. Simply add the category ID's for the categories in the mark up and CSS.
Testimonial Example
A stylish Testimonial slider with CSS3 page buttons.
Etiam vel sed potenti
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete."
Maecenas elit rhoncus
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt."
Vel etiam sed potenti
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt."
Staff Example
CSS3 styled articles perfect for stylish layouts
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."
Etiam vel sed potenti
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."
Maecenas elit rhoncus
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."
Vel etiam sed potenti
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."
Aenean ut tem libero
Staff 2 Example
Use the {mainarea} and {morearea} to create featured layouts.
Timeline Example
A CSS3 styled timeline using content
Tabbed Example
Use the {mainarea} and {morearea} to create multiple layouts per tab.
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...
Read moreAccordion Example
Use the {mainarea} and {morearea} to create multiple layouts per tab.
Aptent amet aptent Bibendum wisi neque Dis due monec diam Dui dis donec diam Elit maecenas rhoncus Bootstrap Examples
Hero Example
Thumbnail Example
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...
Bibendum wisi neque
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...
Dis due monec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Dui dis donec diam
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Elit maecenas rhoncus
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Etiam vel sed potenti
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Examples
Hover Example 1
Hover Example 2
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Example 3
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Example 4
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Example 5
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Example 6
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Example 7
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Example 8
Aenean ut sem libero
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Aptent amet aptent
Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.
Hover Examples 2
Hover Example 9
Hover Example 10
Hover Example 11
Hover Example 12
Hover Example 13
Hover Example 14
Hover Example 15
Hover Example 16
Hover Example 17
Hover Example 18
Hover Example 19
Hover Example 20
Aenean ut sem libero
Aptent amet aptent
Bibendum wisi neque
Dis due monec diam
Hover Example 21
Etiam vel sed potenti
Maecenas elit rhoncus
Vel etiam sed potenti
Aenean ut tem libero
Aptent ahet aptent
Bibendum sisi teque
ALL TAGS
Module template tags:
| Tag Name | Tag Content |
|---|---|
| mainarea | Displays the selected elements using the corresponding element template tags for each one. |
| leftbutton |
|
| rightbutton |
|
| pages |
Element template tags (all tags work on "more" area as well):
| Tag Name | Tag Content |
|---|
