Advanced Slider Documentation

Transcription

1 Sunovisio Corporation Advanced Slider Documentation This guide will help you to setup Advanced Slider Extension in your shop. Version /1/2012

2 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 Slider

3 Ad 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.

4 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. Save the page, you re done.

5 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= > <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,

6 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. Note: NivoSlider and Ad Gallery need jquery lib to work.

7 Support If you have any problem with installing the extension, you can contact us via your account on using the ticket system or the chat. You can use as well our contact address or skype farge.loic. Thanks for your trust in Sunovisio Corporation.