boutique carousel

  Demo + Description More demos Instructions
 
  1. Example pages
  2. HTML markup
  3. CSS settings
  4. JavaScript settings / plugin options
  5. Setup
  6. Advanced: external functions
  7. Advanced: callback functions
  8. External resources
  9. Contact

Example pages

To explore the possibilities or to simply start copy/pasting, use (the source of) these dedicated example pages: Back to top

HTML markup

Create a list of images in an Unordered List. Make sure you set the (original) width/height attributes of the images. Optionally wrap the image tag in an <a> tag, add an image alt-attribute as the header and a <span> tag for the description.
See "Setup" below for an example. Back to top

CSS settings

boutique.css contains all the styling with descriptive comments to help you along.
Most settings are done through the plugin options but specific styling like colors and margins are managed by CSS. Back to top

JavaScript settings / plugin options

When you call the plugin on your list element, you can supply options to overwrite the defaults. See an example under "Setup".
The JavaScript source is included and commented for the ease of other manipulations.

Name Description Default
container_width Total carousel width (value in pixels or "auto" (auto is 100%/fluid)) 'auto'
front_img_width Width of the frontal image (value in pixels) 280
front_img_height Height of the frontal image (value in pixels / 'auto').
Use 'auto' if your images have different heights. When set to auto, make sure you supply your images with their "width" and "height" attributes:
<img src="" width="300" height="200" />
'auto'
variable_container_height If your images have different heights, this will make the container height adapt to the visible frames (true/false).
This slightly adds up to the animation performance and will move anything under the Boutique instance move up/down accordingly.
true
frames Amount of visible frames (3 or 5).
Note that frames 1 and 5 are still there, and are used in the animations so the position (css top margin and "back_size" option) slightly matters.
5
starter Number of the frame that starts in front (number) 1
speed Overall animation speed (time in ms) 600
front_topmargin Vertical align of the front frame (distance from the container top in pixels) 40
behind_topmargin Vertical align of the behind frames (2nd and 4th) (distance from the container top in pixels) 20
back_topmargin Vertical align of the furthest back frames (distance from the container top in pixels) 0
hovergrowth How much the front item will enlarge on mouse-over (between or equal to 0-1) 0.08
behind_opacity Opacity of the furter back items (between or equal to 0-1) 0.4
back_opacity Opacity of the furthest back items (between or equal to 0-1) 0.15
behind_size Size of the further back images compared to the frontal frame (between or equal to 0-1) 0.7
back_size Size of the furthest back images compared to the frontal frame (between or equal to 0-1) 0.4
behind_distance Option to manually set the horizontal position of the behind frames (number 2 and 4) ('auto' or pixel value) 'auto'
autoplay Autoplay makes Boutique switch frames automatically at a specified interval (true/false) false
autoplay_interval Autoplay time between slides (time in ms) 3000
stop_autoplay_on_click If autoplay if on, it will switch off when a frame is clicked (true/false) false
freescroll Whether you can still navigate while animating (true/false) true
easing Easing type for moving the frames 1 step ('easing type title') 'easeIOBoutique'
move_more_easein Easing type for the first part of moving multiple steps ('easing type title') 'easeInBoutique'
move_more_easebetween Easing type for moving multiple steps but not first and last ('easing type title') 'linear'
move_more_easeout Easing type for the end of moving multiple steps ('easing type title') 'easeOutBoutique'
move_more_directly Will not bring the in-between frames forward when moving more than once (true/false) false
never_move_twice Prevents moving 2 steps when frame 1 or 5 is clicked false
text_front_only Show the title/description only in the front frame (true/false) true
text_opacity Opacity of the title/description layer (value between or equal to 0-1) 0.7
keyboard Enable/disable keyboard functionality (true/false) true
move_on_hover Navigating with mouse-over instead of clicking (true/false) false
right_to_left Adds right-to-left language support (text & animation direction) (true/false) false
lightbox_support [Experimental] If true, Boutique will try to make your lightbox link work (see fancybox example). Do not activate if you want to use normal links. Also normal + lightbox links can't be mixed together in the same Boutique instance. (true/false) false
Back to top

Setup

<!DOCTYPE html>
<html>
<head>
<!-- jQuery library: -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Boutique CSS (Must be before the boutique JS): -->
<link rel="stylesheet" type="text/css" href="css/boutique.css">
<!-- Boutique JavaScript: -->
<script type="text/javascript" src="js/jquery.boutique.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
// Apply the script when the document is ready (minimum):
$('#boutique').boutique();

// Or with custom options:
$('#boutique').boutique({
container_width: 650,
front_img_width: 300,
front_img_height: 200,
starter: 3,
speed: 900,
hovergrowth: 0.2,
behind_opacity: 0.5,
back_opacity: 0.2,
behind_size: 0.6,
back_size: 0.4,
autoplay: true,
autoplay_interval: 4000,
freescroll: false,
move_on_hover: true
});
});
</script>
</head>
<body>

<!-- HTML list element: -->
<ul id="boutique">
<!-- Frame with minimal setup: -->
<li><img src="images/image1.jpg" width="300" height="200"></li>
<!-- Frame with full setup: -->
<li>
<a href="Optional link">
<img src="images/image2.jpg" width="300" height="200" alt="Optional header">
<span>Optional description.</span>
</a>
</li>
</ul>

</body>
</html>
Back to top

Advanced: external functions

Function name Description
instance-id_previous(times) Calling this function will make the carousel move left. It can take 1 argument, which is the amount of frames to move (defaults to 1). Replace instance-id with the container id. Example:
myboutique_previous()
instance-id_next(times) Calling this function will make the carousel move right. It can take 1 argument, which is the amount of frames to move (defaults to 1). Replace instance-id with the container id. Example:
myboutique_next(2)
instance-id_stopautoplay() Calling this function will stop the carousel from autoplaying.
Replace instance-id with the container id. Example:
myboutique_stopautoplay()
instance-id_startautoplay() Calling this function will invoke autoplay.
Replace instance-id with the container id. Example:
myboutique_startautoplay()
instance-id_goto(frame-number) This directs Boutique to go to a specific frame number (it will automatically pick the shortest route). Enter the frame number as the function argument.
Replace instance-id with the container id. Example:
myboutique_goto(5)
Back to top

Advanced: callback functions

Function name Description
link_callback(anchor, instance-id) Called when a link on the frontal frame is clicked. This will pass the anchor of the clicked link.
This will prevent the default link behaviour unless you return true.
move_callback(anchor, instance-id, framenumber) Called when a frame (with anchor tag) is moved forward. This will pass the anchor of the specific frame.
pre_move_callback(anchor, instance-id, framenumber) Called when a frame (with anchor tag) starts moving forward. This will pass the anchor of the new frame.

If you create the function outside the document-ready scope of your javascript code, it will be called by the plugin when the appropriate event occurs (see example page 2). Back to top

External resources

Back to top

Contact

For personal help, questions, suggestions; place a comment on CodeCanyon, Twitter or email to please@frique.me