SliderShock Documentation for non WP Environments


Introduction


Installation

Controls

About slidershock

Introduction to slidershock


What is slidershock

Slidershock is the most complete and responsive jquery/wordpress slider in the web. It is currently available for wordpress as a plugin and as JQuery code for non worpress environments.

What for

Slidershock can be used to slide images and text. Due to html content limitations, only the WordPress version is able to slide videos and content from external sources (twitter, RSS, flickr)

Advantages against other sliders

- SliderShock allows to add text captions to slides, allowing to control an extense set of parameters for the image and text, such as margins, height, width, responsiveness and more.


Back to top

Installation


Requirements

Any of the following browsers can be used :


Google chrome, Mozilla Firefox version 3.6 or higher internet explorer version 7 or higher

Files

The files on the zip are listed as follows:

Main folder: Contains the index file that opened with a web browser shows the slider with its default settings.

Back to top

Subfolder 1 css: Contains the css files where the design and appearance values are set

Subfolder 2 demo: Contains a folder called img with default images to be shown on the slider.

Back to top

Subfolder 3 img: Contains Graphic User Interface elements

Subfolder 4 js: Contains the script files that allow the slider controls to function.

Setup

The "index" file in the main folder can be opened with a notepad or a similar tool in order to manipulate the code (see controls). Images to be shown on the slider have to be placed on the img folder within the subfolder 2: demo.


Back to top

Controls


SliderShock controls are given in a Jquery code that is set as follows. Lines that are used to control the slider are reviewed below.

Back to top

Insert an image:

To insert an image to the slider, that image must be stored in the img folder that is inside the subfolder 2: demo. Below is the code that must be inserted.

Within the previous code, the image, tittle and text can be edited. The image can be set inserting the image name or route if it is on a subfolder within the quotation marks on the following line:

The picture tittle can be manipulated at the following line. Lorem ipsum 2 is a dummy text that can be replaced with anything. <h4> and </h4> are the tags that define the tittle size and can be changed from h1 to h6.

the text is defined for the following lines. It can be manipulated by changing or erasing the Lorem ipsum dummy text.


Thumbnail:

To add a thumbnail, the following code is used:

In the previous code, data-slideindex determines the thumbnail order. img src defines the thumbnail image. Height and width are given in pixels

The image, text, and slider settings controls are under the following code:


Thumbnails position:

Thumbnails position can be modified by changing the value within the quotation marks. four values are available (top, left, bottom, right).


Slider widht:

Width can be modified in two ways by changing the value in the quotation marks to either "responsive", or the pixels width.


Text:

Showtext can be either modified to true or false to show and hide text caption respectively


Autoplay:

Autoplay can be modified to any value given in miliseconds. In the following line 5000 means five seconds. you can set 0 or false for no autoplay


Image width:

Back to top

Image width can be modified with a value within 1 to 100 being this value the width percentage.


Image height:

Image height can be modified with a value within 1 to 100 being this value the height percentage


Margins:

ImgMarginTop sets a margin value given in pixels from the top of the image container


ImgMarginLeft sets a margin value given in pixels from the left side of the image container

Squared:

Can be set as true or false. If is set as true, the text position parameter will not work. The text will be positioned on the left hand side on the image container occupying 25% of the container space depending on the settings of the textsquareposition code.


Back to top

Text square position:

Textsquareposition works if squared is set as true. Can be modified with values form 1 to 5 being 1: top left, 2: top right, 3: bottom right, 4: bottom left, 5: center.


Text position:

Can be modified with five values within the quotation marks: top, left, bottom, right, center


Image alignment:

can be modified with three values within the quotation marks: center, left, right


Text color:

Can be modified within the quotation marks with any value of the general html color chart.


Skins:

There are 38 skins available. the value can be set to transparent or ts-skin-(a value from 1 to 38)


Arrows:

There are 10 arrow skins available. Changeable within quotation marks with ts-arow-(a number from 1 to 10)


Slider height:

The slider height is given in pixels.


Transition effects:

Can be changed within the quotation marks and are given below. Only IE supports the 'fade in' effect


Text:

The parameters below can be set to true or false to activate the bold and Italic formats on the tittle and text respectively

Text width can be set with a value from 1 to 100 being this value the width percentage

Background:

The background for slider and text caption can be modified in three ways within the quotation marks: entering a url, a html color code or by entering transparent or leave.


Back to top

About SliderShock

slidershock was created by the shock team in october 2012.

SliderShock Icons provided by iconshock.com

Back to top