Pro Slider
Pro Slider
Our Pro Slider extension makes it easy to create professional and awesome sliders in minuntes. You can create multiple sliders with different dimensions and options and add as much banners to them as you want. Each banner has a main image for the slider itself and a thumbnail image for the thumbnail slider. You can include your sliders in your pages via an extremely intuitive and simple to use position manager, by adding blocks to your layout xml or via variables in your cms pages and blocks (described in the HowTo section).
Features:
The module comes with jQuery included. You can choose whether to load it from the Google CDN (Content Delivery Network), from your own server or disable it if it's already included by yourself or by another extension. The jQuery noConflict mode is enabled by default but you can disable it if you need to.
Usage:
Install the module like described below, clear your cache and re-login to your admin panel. Go to "System -> Configuration -> MEDIA ROCKS EXTENSIONS" where you have a configuration section called "Global Configuration". This is where you can setup jQuery, which is necessary for the slider to work.
Setting up jQuery: If you already have jQuery included in your shop (by yourself or by another extension) you can simply disable it by choosing "No" from the dropdown of "Include jQuery x.xx.x locally" and "Include jQuery x.xx.x from CDN". The noConflict option will not be recognized then.
Setting up the Slider: When you finished the jQuery setup you can start adding your first slider: In your admin panel go to "CMS -> Pro Slider Manager" and click on "Add new slider". The slider form will show up: Give your slider a name (only visible in the backend list) and setup all configuration fields. The only values required are the width and height of your slider, but you can choose if you want to show controls (left and right arrows by default), define the animation duration and an interval in milliseconds if you want the slider to start automatically.
Another great feature is the possibility to activate a thumbnail slider that sticks below your main slider and displays little thumbnails for each banner, that can be defined seperately from the main banner image (more about banner configuration follows below). You can define the number of thumbnails to be shown at once and how many thumbnails should be moved when navigating through the thumbnails. Furthermore you have the same configuration options as for the main slider like width and height, animation duration and show controls.
If you have multiple sliders in your shop and you want to customize them via CSS seperately, you can add a "Slider Class" that will be added to the wrapper div around the whole slider, so you can simply point to them in your custom stylesheet file.
Now click on "Save And Continue Edit" at the top right of the form.
Adding Slides to the Slider: Now you have a slider, but it has no slides (banners) yet. To add some slides to the slider click on the "Slides" tab in the left navigation. There you will see all slides that you created so far, so by now it should be empty. Click on "Add Slide" on the top right of the grid. A new window will open and you can setup your first slide: In the "Item Configuration" section give it a name and upload a slide image. If you have activated the thumbnail slider, also provide a thumbnail image and an additional text that appears below the thumbnail image together with the name of the slide. You can also specify a custom class for each slide, so you can customize them via CSS.
In the "Link" section you can define your link URL, title and target. This will get better in future versions of this extension, so you will be able to directly select procuts, categories and cms pages to link to.
Now click "Save Slide" to close the slide form and refresh the grid on the "Slides" tab of your slider form, where you will see your newly created slide. Check the checkbox beside it and click "Save" or "Save And Continue Edit" and repeat the steps above to create more slides.
Implementation: Now you have four ways to implement your created slider in your shop:
1. add it via the built-in Content Position Manager on the slider edit form
2. add it via a variable in your block or cms content:
{{block type="mediarocks_proslider/slider" name="myslider" id="2"}}
3. add it in one of your layout xml files like this:
2
4. create a block in your template file:
$this->getLayout()->createBlock('mediarocks_proslider/slider')
->setBlockId('myslider')->setId(2)->toHtml()
Congratulations! You have setup your first Pro Slider. Go to the frontend page that your slider should appear on and test it. If you want to style your slider to fit your design needs, you can simply add and override the default styles in your skin css. The arrow-buttons can be replaced by your own sprite image.
If you have any problems encountering during the setup or about further customization, you can contact us via our customer support channels.
Installation:
Installation via Magento Connect Manger:
Open the connect manager and upload the extension file under "Direct package file upload".
Manual Installation:
Unpack the extension and upload all folders to your Magento root folder.
Uninstall Module:
To uninstall the module, please use the Magento Connect Manager or remove the following files and folders from your system manually:
- app/etc/modules/Mediarocks_ProSlider.xml
- app/code/community/Mediarocks/ProSlider
- app/design/frontend/base/default/layout/mediarocks_proslider.xml
- app/design/frontend/base/default/template/mediarocks/proslider
- app/design/adminhtml/default/default/layout/mediarocks_proslider.xml
- app/design/adminhtml/default/default/template/mediarocks/proslider
