MAGIC CAROUSEL

Thank you for purchasing our product!

 


Files Structure

css file

The product uses css/magic_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 magic_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 PerspectiveFixedWidth.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: PerspectiveFixedWidth.html) to assure you include the skin correctly.

<!-- must have -->
<link href="css/magic_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,700' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
margin:0px;
padding:0px;
width: 100%;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script>
<script src="js/magic_carousel.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<!-- must have -->

 

<script>
jQuery(function() {

jQuery('#magic_carousel_white').magic_carousel({
width: 990,
height: 414,
imageWidth:452,
imageHeight:302,
border:5,
borderColorOFF:'#000000',
borderColorON:'#FFFFFF',
autoPlay: 7,
autoHideBottomNav:false,
showElementTitle:true,
showPreviewThumbs:false,
titleColor:'#333333',
verticalAdjustment:50,
numberOfVisibleItems:5,
nextPrevMarginTop:23,
playMovieMarginTop:0,
bottomNavMarginBottom:-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.magic_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: PerspectiveFixedWidth.html) to assure you include the skin correctly.

<div id="magic_carousel_white">
<div class="myloader"></div>
<!-- CONTENT -->
<ul class="magic_carousel_list">

<li data-title="Fully Responsive" data-bottom-thumb="images/perspectiveFixedWidth/thumbs/01.jpg" data-large-image="images/perspectiveFixedWidth/large/01_large.jpg"><img src="images/perspectiveFixedWidth/01_FixedWidth.jpg" alt="" /></li>

<li data-title="Mobile Compatible Ios & Android" data-bottom-thumb="images/perspectiveFixedWidth/thumbs/02.jpg" data-link="http://codecanyon.net/user/LambertGroup/portfolio?ref=LambertGroup" data-target="_blank"><img src="images/perspectiveFixedWidth/02_FixedWidth.jpg" alt="" /></li>

<li data-title="It Supports Images" data-bottom-thumb="images/perspectiveFixedWidth/thumbs/03.jpg" data-large-image="images/perspectiveFixedWidth/large/03_large.jpg"><img src="images/perspectiveFixedWidth/03_FixedWidth.jpg" alt="" /></li>

<li data-title="It Supports Youtube" data-bottom-thumb="images/perspectiveFixedWidth/thumbs/04.jpg" data-video-youtube="2muxrT5_a6E" data-target="_blank"><img src="images/perspectiveFixedWidth/04_FixedWidth.jpg" alt="" /></li>

<li data-title="It Supports Vimeo" data-bottom-thumb="images/perspectiveFixedWidth/thumbs/05.jpg" data-video-vimeo="20009714" data-target="_blank"><img src="images/perspectiveFixedWidth/05_FixedWidth.jpg" alt="" /></li>

<li data-title="It Supports Html5 Self Hosted Videos" data-bottom-thumb="images/perspectiveFixedWidth/thumbs/06.jpg" data-video-selfhosted="videos/big_buck_bunny_trailer"><img src="images/perspectiveFixedWidth/06_FixedWidth.jpg" alt="" /></li>

<li data-title="It Supports Html5 Audio Files" data-bottom-thumb="images/perspectiveFixedWidth/thumbs/07.jpg" data-audio="audio/wm_follow_me"><img src="images/perspectiveFixedWidth/07_FixedWidth.jpg" alt="" /></li>

</ul>


</div>

 

 


JS Options

Attribute Default Value Description
General settings
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 3 The number of visible items. It has to be an odd number: 3,5,7,9,11 etc
elementsHorizontalSpacing 120 The horizontal distance between visible items
elementsVerticalSpacing 20 The value with which the elements are becoming smaller
verticalAdjustment 0 This value will rise the whole carousel up
animationTime 0.8 The speed with which the elements are moving (in seconds)
easing 'easeOutQuad' The animation easing. Possible values:
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
resizeImages true If you are using images (or front image) inside the carousel you can set it to auto resize as it moves
showElementTitle true Possible values:
true - the photo title/description will apear
false - the photo title/description will apear
titleColor "#000000" title color, hexa value.
imageWidth 452 image width
imageHeight 302 image height
border 0 the image border thickness
borderColorOFF 'transparent' the image border color for OFF state. It can be a hexa value or 'transparent'
borderColorON '#FF0000' the image border color for ON state. It can be a hexa value or 'transparent'
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
showAllControllers true Possible values:
true - all controllers will appear (next, previous, bottom navigation)
false - all controllers will not appear (next, previous, bottom navigation)
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
showPreviewThumbs true Possible values:
true - a preview image will appear on hovering each bottom button
false - the preview image will not appear on hovering each bottom button
nextPrevMarginTop 0 margin-top for next/previous buttons
playMovieMarginTop 0 margin-top for play button
bottomNavMarginBottom 0 margin-bottom for bottom navigation
     
Circle Timer Settings
showCircleTimer true Possible values:
true - shows the circle timer
false - hides the circle timer
circleRadius 10 circle radius
circleLineWidth 4 circle line width
circleColor "#FF0000" circle color, in hexa
circleAlpha 100 circle alpha, in percents. Posible values 0-100
behindCircleColor "#000000" behind circle color, in hexa
behindCircleAlpha 50 behind circle alpha, in percents. Posible values 0-100
circleLeftPositionCorrection 3 this value will be added to the left position of the circle timer
circleTopPositionCorrection 3 this value will be added to the top position of the circle timer
     

Example of usage:

jQuery('#magic_carousel_white').magic_carousel({
width: 990,
height: 414,
imageWidth:452,
imageHeight:302,
border:5,
borderColorOFF:'#000000',
borderColorON:'#FFFFFF',
autoPlay: 7,
autoHideBottomNav:false,
showElementTitle:true,
showPreviewThumbs:false,
titleColor:'#333333',
verticalAdjustment:50,
numberOfVisibleItems:5,
nextPrevMarginTop:23,
playMovieMarginTop:0,
bottomNavMarginBottom:-8
});

 

 

 


Carousel Content Definition

Inside the main div (ex: <div id="magic_carousel_white">) you'll add a list:
<ul class="magic_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="magic_carousel_white">
<div class="myloader"></div>
<ul class="magic_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-title <li data-title="Content Title">html content here</li> The current content title
data-bottom-thumb <li data-title="Content Title" data-bottom-thumb="images/imposing/thumbs/thumb1.jpg">html content here</li>

A preview image will appear on hovering the corresponding bottom button

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.