ZX Slideshow
ZX Slideshow
FREE
Welcome to the best FREE Zen Cart slideshow module! This home page slider module allows you to have a user-friendly slideshow on your main page without writting code, adding image paths or messing around any other code - everything is controlled from the admin panel.
We DO offer professional installation service for the module, although you're most welcome to install it yourself. Installation is simple, although some code understanding is required.
FREE DOWNLOAD PRO install service - $20It is my pleasure to present you with a module I've built for Zen Cart and have released it in the official Plugins section to be available for free download. The module was built with intention to help store owners add images to their home page slideshow without writting code or manually uploading images via FTP.
NOTE: some CSS tweaks might be required after installing the module - please understand that every store is unique it's almost impossible to create this kind of module that will work out of the box without any tweaks for any website using any template.
IMPORTANT: this module has a support thread in the official Forum. If you have ANY problems installing or using the module, please check the Forum: there are over 50 pages and all questions have been answered - it is very likely that your question will be a duplicate...
Based on Nivo Slider and using jQuery
If you haven't heard about Nivo Slider, I will simply copy/paste the introductory text from it's official site: The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. The jQuery plugin is completely free and totally open source, and there is literally no better way to make your website look totally stunning.
16 Beautiful Transition Effects
There are 16 beautiful effects to choose from, and all just a click away. You can choose from various slicing, sliding, fading and folding effects to showcase your images - a total of 16 effects.
4 Beautiful and Modern Themes
here are 4 themes available to select from, with all styles and images prepared for you. All you have to do is choose which one you like best and select it with a click of a button.
Controlled from the admin
Unlike other slideshow modules, you don't have to use FTP to add new images. You don't have to know or edit any code to make changes. All you need to do is go to the built-in Banner Manager and upload you images through the user-friendly interface!
Responsive
Even if your template isn't responsive, you can still benefit from this feature. You don't need to know how to resize or crop your images to exact dimensions, just upload what you have and ZX Slideshow will automatically adapt the slider dimensions to your site and the images uploaded.
| Current Version: | 2.1 |
|---|---|
| jQuery version: | 1.7.1+ |
| Additional jQuery libraries | jQuery Nivo Slider (packed) |
| Database Affected: | YES - backup your database |
| Core Files Affected: | none |
| Template Files Affected: | 3 |
Installing
Before you proceed, make a backup of your database. Installation is done at your own risk.
Unzip the files from "files" directory to your computer. Connect to your server via FTP. Check your admin directory name and rename the one in this package accordingly. Next, check your template directory. You can do that by going into your Zen Cart admin section and go to Tools->Template Selection and check what it says under Template Directory. Of course, you're interested in the one you're currently using. Now, browse the files you just unzipped and go to includes/templates directory. Rename "YOUR_TEMPLATE" to the actual template name. Now, upload your files using your FTP client (I recommend using Filezilla) to the store root. Be careful, the store root directory on the server is where your store is installed, not necessarily domain root.
There are two files that might get overwritten:
- includes/templates/YOUR_TEMPLATE/css/index_home.css
- includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php
- includes/templates/YOUR_TEMPLATE/templates/tpl_index_categories.php
In case you have made any changes to those files, make sure you merge it carefully. Otherwise, you can simply overwrite.
After you have finished uploading the files, go to your Zen Cart admin section and go to Tools->Install SQL Patches. Use the provided sql file, copy/paste the content and click the Submit button. Make sure you use the appropriate file that matches your Zen Cart version. If you're not sure which version you're using, go to Tools->Server/Version Info.
Configuration
To configure the module, go to Admin->Configuration->ZX Slideshow
The module is disabled by default, you should enable it if you want to use it.
All options are self-explanatory. For more information about each option, you can simply click on it.
Banner Display Groups - you can edit the groups if you must, but I suggest leaving it as is.
Uploading Images
This module utilizes the native Zen Cart banner management system. Go to Admin->Tools->Banner Manager and click New Banner.
Enter Banner title (that will be used as caption on the frontend, you can disable it in the configuration options).
If you wish for the image to be a link, enter Banner URL.
Banner Group - this is the most important setting. You need to manually type the group you want to asign the banner to. This is directly related to Banner Display Groups found in the configuration options. The default is slide1, slide2, slide3...slide10. If you want to have 5 sliding images, you must assign each banner a different group.
Image - browse your computer and upload an image. I recommend you resize your images to the same dimensions
before uploading. This is not necessary since the module is responsive, but it looks better if it doesn't change dimensions with each image loading...
Click Insert button and your banner is added. Repeat the same steps for each banner you wish to add. Make sure you add banners to different Banner Groups for the slideshow to work.
HINT: you can add several banners to the same banner group - Zen Cart will randomly select just one image from the same group and display it in the slideshow. Next time the user visits the home page, he/she will get a different slideshow since the images are selected randomly.
Additional information
If you want to change the look of your slider, you can edit the includes/templates/YOUR_TEMPLATE/css/index_home.css file - that's just about everything you'll need to edit.
Some people want to disable showing captions - you'll have to edit includes/templates/YOUR_TEMPLATE/index_home.css at line 438 and change opacity settings to 0. Make sure you change all 3 opacity lines (opacity, -moz-opacity and filter:alpha).
If you want to display the slider in the header instead of center area: Step 1. open your includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php and REMOVE all code for ZX Slideshow. Step 2: explained in this post.
Common Issues
I tested the plugin many times and it was also checked by other people, so it should work when you are using a well coded template and plugins. Here is a list of common issues and how to solve them:
- many templates come with some other slideshow modules installed. Make sure you remove ALL files related to those slideshows, especially the javascript files.
- Your template or another plugin includes another jquery version on a bad way. You can easily check that by using the console of your browser. For Firefox you need to install the Firebug Add-On. When you get an error in the console, like:
jQuery.nivoSlider is not a function
In 99% of cases, you have a jquery issue that is caused by another module or your template. Please understand that I normally do not fix these issues for free. When you are unsure which module or template is causing this issue, install this module on a clean Zen Cart installation without any other modules and use the classic template, then activate each of your modules one after another and check when the issue comes up. - transparent images are NOT supported
