CSS3 Powered

This template uses modern CSS3 techniques, such as rounded borders and gradient colors, with IE compatibility maintained. ALL colors (including gradients) are customizable in parameters.

hot joomla carouselNeed to display your images as a carousel? Easily done with our new Joomla extension.

Hot Joomla Carousel is a simple Joomla module that will help you to show your photos in a carousel style. You can see how it works on this demo site. Usage is very simple. You need to enter path to your images and your carousel is ready.

USAGE INSTRUCTIONS

Open module parameters in Extensions > Module Manager > Hot Joomla Carousel. You'll see that some default parameters are already there. However, you should change some of them to accommodate module for usage on your site.

  • LOAD JQUERY: Select whether to load jQuery library or not. If your template already loads it, you may disable this to avoid possible javascript errors.
  • FOLDER: Where your images are stored, relative to Joomla root directory.
  • OVERALL WIDTH OF MODULE: Overall width of module in pixels (in example 200)
  • OVERALL WIDTH OF MODULE: Overall height of module in pixels (in example 150)
  • NUMBER OF IMAGES ON SCREEN: Number of images that will be shown on screen at the same time (in example 5)
  • WIDTH OF IMAGES: Width of images in carousel in pixels (in example 128)
  • HEIGHT OF IMAGES: Height of images in carousel in pixels (in example 128)
  • MARGIN BETWEEN TWO IMAGES: Distance between two neighbor images in pixels (in example 10)
  • PADDING BETWEEN BORDER AND IMAGE: Padding between image borders and images in pixels (in example 2)
  • BORDER WIDTH: Width of borders of images in pixels (in example 2)
  • BORDER COLOR: Color of borders of images in hexadecimal format (in example 000000)
  • SHOW PAGINATION: Select whether to display linked numbers of carousel pages or not
  • AUTOSLIDE: Select whether to change images automatically or not
  • AUTOSLIDE INTERVAL: Time in milliseconds between change of slides (only if autoslide enabled)
  • SELECT TRANSITION EFFECT: Select slide or fade transition effect
  • ANIMATION SPEED: Select speed of transition animation
  • DIRECTION OF IMAGES: Select horizontal to display images in a row, or select vertical to display images in a column
  • TRANSITION LOOP: Select whether to show transition of images in loop or not

 

Reflection Effect

Reflection script is incorporated in template. If you want an image to have it, use class "reflect" for your images. You can also control reflection's height and opacity.

Learn more about it here.

HotStart

Follow our instructions to make a copy of this demo site to your server.

HotStart! is available with each template. It allows you to create a copy of this demo.

Cross-Browser Compatible

This template uses modern CSS3 functions supported by modern browsers. It uses script that maintain IE7 and IE8 compatibility.

Tested in IE7+, Firefox, Opera, Chrome, Safari and Camino.