Sunovisio Corporation
Advanced Slider
Documentation
This guide will help you to setup Advanced Slider Extension in your shop.
Version 1.1.0 10/1/2012
Introduction
This extension provides a fully configurable Slider Module base on 3 script JS, which are Nivo Slider, Ad Gallery and Carousel.
Every option of each script are configurable, even the width and the height of your slide are configurable.
This extension allows you to create as many slider as you want.
Installation
Unpack/upload the zip content in your root directory (usually /magento).
You might need to log out then log in in order to avoid a 404 error related to the session.
Preview
Nivo SliderAd Gallery
Carousel
How to create a slider
Log-in into your Magento Administration and go to Sunovisio -> Advanced Slider, you need to create a new item by clicking on the button Add item.
Then you can type the Title and the Identifier (remember it, it’ll by useful next), and choose the script you want to use.
New fields will appear, they are prefilled based on default value for the chosen script, and you can change them at your convenience.
If you let the fields height and width empty, so the images won’t be resized, if you fill only one out of these two fields, so the images will be resized by keeping the ratio.
It’s faster to use “Save and continue edit” if you want to add image immediately.
Add images to your slider
Go to the edition page of your block, then click on the button « Add image », type a title for you image, select the Slider where you want to add the image (by default, it’s the slider of the edit page you just came from).
If you choosed Gallery Script, you’ll have more fields than the two other scripts.
For gallery you the dimension of the image individually and not by block, you can also choose to get the thumbnail from the main image or choose an other image.
You can choose the dimension of the thumbnail.
Add your slider in one of your page
Edit the CMS/Page where you want the slider to appear. Then go to the tab Content, and simply add this line: {{block type=”advancedslider/advancedslider”
template=”advancedslider/advancedslider.phtml” identifier=”slider1”}}
For the identifier, you simply write the identifier of the slider you want to use.
Add new theme for Nivo Slider
You just have to put the folder of your theme in
skin/frontend/default/default/advancedSlider/nivo/themes and add your css by editing the file app/design/frontend/default/default/advancedslider.xml and add this:
<layout version=”0.1.0”>
<default>
<reference name=”head”>
[...] <action method=”addCss”> <stylesheet>advancedSlider/nivo/themes/yourTheme/yourTheme.css</stylesheet> </action> [...] </reference> <default> <layout>
Note: Your theme class in the css must respect this: .theme-yourTheme{ [..] }
Script configuration
Nivo Slider
effect: Select the effect of nivo slider slices: For slice animations
boxCols: For box animations boxRows: For box animations animSpeed: Slide transition speed
pauseTime: How long each slide will show startSlide: Set starting Slide (0 index) directionNav: Next & Prev navigation directionNavHide: Only show on hover controlNav: 1,2,3... navigation
controlNavThumbs: Use thumbnails for Control Nav pauseOnHover: Stop animation while hovering manualAdvance: Force manual transitions prevText: Prev directionNav text
nextText: Next directionNav text randomStart: Start on a random slide Ad Gallery
thumb_opacity: Opacity that the thumbs fades to/from, (1 removes fade effect) start_at_index: 0,
animate_first_image: Should first image just be displayed, or animated in?
animation_speed: Which ever effect is used to switch images, how long should it take? display_next_and_prev: Can you navigate by clicking on the left/right on the image? display_back_and_forward: Are you allowed to scroll the thumb list?,
scroll_jump: If 0, it jumps the width of the container, slideshow:
o enable: Enable or disable slideshow,
o autostart: If you want that the slideshow start automatically, o speed: Speed of the slideshow
o start_label: Label for start o stop_label: Label for stop
o stop_on_scroll: Should the slideshow stop if the user scrolls the thumb list? o countdown_prefix && countdown_sufix: Wrap around the countdown o effect: ‘slide-hori’, ‘slide-vert’, ‘resize’, ‘fade’, ‘none’ or false
o enable_keyboard_move: Move to next/previous image with keyboard arrows? o cycle: If set to false, you can’t go from the last image to the first, and vice versa Carousel
duration: The duration of a full jump
auto: When true the Carousel will move on its own without needing triggers. Useful for slideshows
frequency: When auto is true, this dictates how long a slides stays put before the next jump
visibleSlides: Choose the number of visible Slides
circular: If set to false, you can’t go from the last image to the first, and vice versa Wheel: Whether or not to slide when using the mouse wheel over the slides effect: You can choose between scroll and fade.
transition: The two supported transitions are sinoidal and spring (see Example 2 for spring)
JS/CSS include configuration
You can choose the script you want to add to your Magento.
Go in the admin, then System -> Configuration and select the tab Advanced Slider (in Sunovisio group), here you can choose the JS/CSS you want to include.
Support
If you have any problem with installing the extension, you can contact us via your account on http://ecommerce.sunovisio.com using the ticket system or the chat. You can use as well our contact email address [email protected] or skype farge.loic.
