Help

CLASSIC JQUERY CAROUSEL - MULTIMEDIA - IMAGE-VIDEO-AUDIO

Thank you for purchasing our product!

Files Structure
HTML/JS code for implementation
JS Options
Carousel Content Definition
.htaccess

Files Structure

css file
skins folder
js folder
images folder
html files

css file

The product uses css/multimedia_classic_carousel.css file which contains the skin and texts classes

skins folder

The images used by the skins are located in this folder and distributed in subfolders with the skin name.

js folder

All the .js files are located in this folder. The product uses jquery. The product is generated by multimedia_classic_carousel.js

images folder

We put all the images in this folder. If needed, you can use a different one.

html files

For your convenience we've created for each skin a .html file. In each file you'll find all the necessary code for implementation for each skin.

HTML/JS code for implementation

Step 1: Copy on your server/project the following folders: audio, css, images, jqueryPrettyPhoto, js, skins, videos. Of course you can move the files in other folders, but you'll take care to correct the paths to the files
Step 2: Open the .html file associated with the skin you want to use. For example, if you want to use "white" skin with fixed dimensions, open whiteFixedWidth.html
Step 3: Put the below code in the <head> section of your file. This code has to be copied from the <head> section of the file you opened (EX: whiteFixedWidth.html) to assure you include the skin correctly.

<link href="css/multimedia_classic_carousel.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic' rel='stylesheet' type='text/css'>

jQuery('#multimedia_classic_carousel_white').multimedia_classic_carousel({
skin: 'white',
width: 990,
height: 377,
imageWidth:265, //276
imageHeight:200,
itemPadding:7,
autoPlay:85,
enableTouchScreen:false,
bottomNavMarginBottom:0,
showNavArrows:true,
bottomNavPosition:'middle',
responsive:false,
itemBackgroundColorOFF:'#FFFFFF',
itemBackgroundColorON:'#000000',
titleColorOFF:"#444444",
descColorOFF:"#7e7e7e",
titleColorON:"#FFFFFF",
descColorON:"#ababab",
titleFontSize:18,
descFontSize:14,
titleMarginTop:20,
descMarginTop:8
});

jQuery(document).ready(function(){
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
default_width: jQuery(window).width()/2,
default_height: jQuery(window).width()/2*9/16,
social_tools:false,
callback: function(){
jQuery.multimedia_classic_carousel.continueAutoplay();
}
});
});

});

</script>

Step 4: In the <body> section copy the code below. This code has to be copied from the <body> section of the file you opened (EX: whiteFixedWidth.html) to assure you include the skin correctly.

<li data-link="http://codecanyon.net/item/html5-video-player-wordpress-plugin/1613464" data-target="_blank">
<img src="images/whiteFixedWidth/01_white.jpg" alt="" />
<div class="titlez">HTML5 Video Player WP</div>
<div class="descz">3 types: Video Player With RightSide Playlist, Video Player With Bottom Playlist, Video Player Without Playlist.</div>
</li>
<li>
<img src="images/whiteFixedWidth/02_white.jpg" alt="" />
<div class="titlez">jQuery Parallax Sliders</div>
<div class="descz"><span style="font-style:italic;">The most complete Parallax Sliders Collection</span> : Classic, Perpetuum Mobile, Mouse Interaction and Ultra.<br /><br /><a href="http://codecanyon.net/item/parallax-slider-responsive-jquery-plugin/3217681" target="_blank">Read More</a></div>
</li>
<li data-link="http://codecanyon.net/item/chameleon-html5-audio-player-withwithout-playlist/3560170" data-target="_blank">
<img src="images/whiteFixedWidth/03_white.jpg" alt="" />
<div class="titlez">HTML5 Audio Player</div>
<div class="descz">You can use this product as a fully featured html5 audio player or just to add background music to your website.</div>
</li>
<li data-link="http://codecanyon.net/item/html5-video-player-with-multiple-skins/896060" data-target="_blank">
<img src="images/whiteFixedWidth/04_white.jpg" alt="" />
<div class="titlez">HTML5 Video Player with <br />Multiple Skins</div>
<div class="descz">Universal BLACK, Universal WHITE, Simply Giant, Futuristic Electric Blue, Futuristic Chrome, Elegant MINIMAL</div>
</li>
<li data-link="http://codecanyon.net/item/jquery-slider-zoom-inout-effect-fully-responsive/2457203" data-target="_blank">
<img src="images/whiteFixedWidth/05_white.jpg" alt="" />
<div class="titlez">jQuery Slider Zoom In/Out Effect Fully Responsive</div>
<div class="descz">This is a Full Collection of sliders wich comes in 4 versions: Fixed Dimensions, Full Width, Full Screen and Sidebar. </div>
</li>
<li data-link="http://codecanyon.net/item/html5-video-player-with-playlist-multiple-skins/1382684" data-target="_blank">
<img src="images/whiteFixedWidth/06_white.jpg" alt="" />
<div class="titlez">HTML5 Video Player with Playlist & Multiple Skins</div>
<div class="descz">This HTML5 video player comes in two versions: Right Side playlist and Bottom Playlist.</div>
</li>

</ul>

</div>

JS Options

Attribute	Default Value	Description
General settings
skin	'black'	Possible values: - black - white
responsive	false	Possible values: true - the banner will responsive false - the banner will not be responsive
responsiveRelativeToBrowser	true	Possible values: true - the banner will be responisve relatively to browser dimensions false - the banner will be responisve relatively to parent div
width	960	carousel width
height	384	carousel height
width100Proc	false	Possible values: true - the banner width will be 100% false - the banner width will be what you've set for 'width' parameter
autoPlay	4	You can define the time (in seconds) until the next photo will play. If you set it 0 the banner will not autoplay
numberOfVisibleItems	0	The number of thumbs per screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 3
enableTouchScreen	true	Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled
target	'_blank'	Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window
absUrl		the url to the skins folder.

Controllers Settings
showNavArrows	true	Possible values: true - next, previous buttons will appear false - next, previous buttons will not appear
showOnInitNavArrows	true	Possible values: true - next, previous buttons will appear on first banner init false - next, previous buttons will not appear on first banner init
autoHideNavArrows	true	Possible values: true - next, previous buttons will hide when mouse out false - next, previous buttons will not hide when mouse out
showBottomNav	true	Possible values: true - bottom navigation buttons will appear false -bottom navigation buttons will not appear
showOnInitBottomNav	true	Possible values: true - bottom navigation buttons will appear on first banner init false - bottom navigations buttons will not appear on first banner init
autoHideBottomNav	true	Possible values: true -bottom navigations buttons will hide when mouse out false - bottom navigations buttons will not hide when mouse out
bottomNavMarginBottom	0	Bottom navigation bottom margin
bottomNavPosition	'right'	Bottom navigation position. Possible values: 'left', middle', 'right'

Item Settings
imageWidth	452	item top image width
imageHeight	302	item top image height
itemPadding	7	item padding
itemBackgroundColorOFF	'#CCCCCC'	item background color, OFF state. Possible values: a hexa value - Ex: '#CCCCCC' a path to an image - Ex: 'skins/textBg_transparency.png'
itemBackgroundColorON	'#CCCCCC'	item background color, ON state. Possible values: a hexa value - Ex: '#CCCCCC' a path to an image - Ex: 'skins/textBg_transparency.png'
titleColorOFF	'#000000'	item title color, OFF state, in hexa
descColorOFF	"#333333"	item description color, OFF state, in hexa
titleColorON	"#FF0000"	item title color, ON state, in hexa
descColorON	"#000000"	item description color, ON state, in hexa
titleFontSize	20	item title font size
descFontSize	14	item description font size
titleMarginTop	5	item title top margin
descMarginTop	8	item description top margin

Example of usage:

jQuery('#multimedia_classic_carousel_white').multimedia_classic_carousel({
skin: 'white',
width: 990,
height: 377,
imageWidth:265,
imageHeight:200,
itemPadding:7,
autoPlay:5
});

Carousel Content Definition

Inside the main div (ex: <div id="multimedia_classic_carousel_white">) you'll add a list:
<ul class="multimedia_classic_carousel_list">
Inside this list you'll add each screen content you want to be present in your banner. The code is:
<li>html content here</li>

Example of usage:

<div id="multimedia_classic_carousel_white">
<div class="myloader"></div>
<ul class="multimedia_classic_carousel_list">
<li>html content1 here</li>
<li>html content2 here</li>
<li>html content3 here</li>
</ul>

</div>

The <li> element can have optional paramenters.

Optional parameters:

Parameter	Ex. of usage	Description
data-link	<li data-link="http://codecanyon.net/user/LambertGroup">html content here></li>	You can specify a link associated to the primary photo
data-target	<li data-target="_self">html content here</li>	Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window *** If all your links will behave the same, you can ignore this parameter and use target from JS options
data-large-image	<li data-large-image="images/blackFixedWidth/large/01_black.jpg">html content here</li>	The path to the large image
data-video-vimeo	<li data-video-vimeo="20009714">html content here</li>	The VIMEO video ID
data-video-youtube	<li data-video-youtube="2muxrT5_a6E">html content here</li>	The YOUTUBE video ID
data-audio	<li data-audio="audio/wm_follow_me">html content here</li>	The path to the audio file. You need to have both extensions (.mp3 and .ogg) in order to work on all browsers and Operating Systems. You'll specify the file name, without extension. For example, you'll have: wm_follow_me.mp3 and wm_follow_me.ogg. In this case, data-audio="audio/wm_follow_me"
data-video-selfhosted	<li data-video-selfhosted="videos/big_buck_bunny_trailer">html content here</li>	The path to the video file. You need to have both extensions (.mp4 and .webm) in order to work on all browsers and Operating Systems. You'll specify the file name, without extension. For example, you'll have: big_buck_bunny_trailer.mp4 and big_buck_bunny_trailer.webm. In this case, data-video-selfhosted="audio/big_buck_bunny_trailer"

.htaccess

For Mozzila and IE9 please use the .htaccess present in the .zip file, if the self-hosted videos are not played.