Bookshelf Slider Help Documentation

Setup

Include the following javascript and css code into HEAD section of the page.
If you have any questions, see how to insert javascript and css in the samples files. ( ex_mix.html, ex_widget_style.html ... )

<link rel="stylesheet" type="text/css" href="css/bookshelf_slider.css" />
<link rel="stylesheet" type="text/css" href="css/skin01.css" />

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bookshelfslider.min.js"></script>

To initiate the plugin enter the code below (with and without parameters) into HEAD or BODY section of the page

<script type="text/javascript">

jQuery(document).ready(function() {

    // basic form, without parameters
    $.bookshelfSlider('#bookshelf_slider');
    
});//ready

</script>

<script type="text/javascript">

jQuery(document).ready(function() {
    
    //define custom parameters
    $.bookshelfSlider('#bookshelf_slider', {
        'item_width': 635,
        'item_height': 320,
        'products_box_margin_left': 30,
        'product_title_textcolor': '#ffffff',
        'product_title_bgcolor': '#c33b4e',
        'product_margin': 30,
        'product_show_title': true,
        'show_title_in_popup': true,
        'show_selected_title': true,
        'show_icons': true,
        'buttons_margin': 15,
        'buttons_align': 'center',
        'slide_duration': 1000,
        'slide_easing': 'easeInOutExpo',
        'arrow_duration': 800,
        'arrow_easing': 'easeInOutExpo',
        'video_width_height': [500,290],
        'iframe_width_height': [500,330]
        }
    );
    
});//ready

</script>

Below is a simple HTML of example. Please see the full HTML in the example files ( ex_mix.html, ex_widget_style.html ... ). In the example files you'll see the HTML, javascript and css together. And also how to add video (youtube and vimeo), enlarged photo and iframe html content.

IMPORTANT INFORMATIONS:

- You must set the width and height of each image (thumbnail). The code will calculate the position of the product according to its size.
- The "title" attribute is optional. You can leave the value empty if you do not want to use the title.
- Each group of products must have a unique ID in sequence. For example: Group1 > id="products_box_1" --- Group2 > id="products_box_2" --- Group3 > id="products_box_3". See below on PANEL SLIDER
- You must set the id of each button (PANEL BAR). For example: id="btn1" id="btn2" id="btn3" etc.

Setting the attributes data: data-type="value" | data-popup="value" | data-url="value"

- data-type="value"
This attribute is used to insert an image overlay effect. Options: book, magazine, dvd, cd. If you do not want to use any of these effects just leave it blank. e.g. data-type=""

- data-popup="value"
Show or not the popup div. Options: true / false

- data-url="value"
Shows the content inside the popup. Can be a Larger Image, video (Youtube or Vimeo) and HTML content. Leave empty if you do not want to use these options. The icons (zoom, play, content, link) are inserted according to the chosen value.
If the value chosen for the following: data-url="http://www.youtube.com/watch?v=C05pGnZQQtE". Then will appear the "Play" icon on the thumbnail. If the "data-popup" is set to True, the video opens in the popup. If the "data-popup" is set to False, the "Link" icon appears and opens the video on Youtube site.

// PANEL TITTLE

<div class="panel_title">
    <div id="selected_title_box"><div id="selected_title">Selected Title</div></div>
    
    <div id="menu_top">
        <ul>
            <li id="show_hide_titles" class="menutop_btn"><a href="#">Titles</a></li>
            <li id="show_hide_icons" class="menutop_btn"><a href="#">Icons</a></li>
        </ul>
    </div>

</div>

// PANEL SLIDER

//slide 1

<div class="slide_animate">
    <div class="products_box" id="products_box_1">

        <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large1.jpg" title="info">
             <img src="images/magazine1.png" alt="" width="76" height="108" />
        </a>

        <a href="#" class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large2.jpg" title="info">
             <img src="images/magazine2.png" alt="" width="71" height="100" />
        </a>

    </div>
</div>

//slide 2

<div class="slide_animate">
    <div class="products_box" id="products_box_2">

        <a href="#" class="product" data-type="book" data-popup="true" data-url="images/book_large.jpg" title="info">
             <img src="images/book.png" alt="" width="81" height="107" />
        </a>

        <a href="#" class="product" data-type="cd" data-popup="true" data-url="images/cd_large.jpg" title="info">
             <img src="images/cd.png" alt="" width="80" height="80" />
        </a>

        <a href="#" class="product" data-type="dvd" data-popup="true" data-url="images/dvd_large.jpg" title="info">
             <img src="images/dvd.png" alt="" width="77" height="107" />
        </a>

    </div>
</div>

// PANEL BAR

<div class="panel_bar">
    <div id="arrow_box"><div id="arrow_menu"></div></div>
    <div class="button_items">
        <div id="btn1" class="button_bar"><a href="javascript:void(0)">Books</a></div>
        <div id="btn2" class="button_bar"><a href="javascript:void(0)">Magazines</a></div>
    </div>
</div>

Parameters

item_width	This is the width of the slider panel and any width can be set. Adjust according to your layout.
item_height	This is the height of the slider panel and any height can be set. Adjust according to your layout.
products_box_margin_left	Set the left margin of the slider panel.
product_title_textcolor	The text color of the product title.
product_title_bgcolor	The background color of the product title.
product_margin	Define the margin between each product.
product_show_title	Show or not the product title. Options: true / false
show_title_in_popup	Show the title in the popup. Options: true / false
show_selected_title	Show the text of the selected button. Options: true / false
show_icons	Show or not the icons. Options: true / false
buttons_margin	The space between the menu buttons.
buttons_align	Alignment of the menu buttons. Options: left, center and right
slide_duration	The transition time of each slide, in milliseconds.
slide_easing	Set the slide transition effect. Options: 'jswing', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'
arrow_duration	The transition time of the arrow, in milliseconds.
arrow_easing	Set the arrow transition effect. ( The options are the same as slide_easing )
video_width_height	Sets the width and height of video (youtube and vimeo). Array: [width_value, height_value]
iframe_width_height	Sets the default width and height of the iframe. The size of the iframe can also be configured in the url. example: ... href="content/iframe_content.html?size=450x330" ... Array: [width_value, height_value]

Bookshelf Slider jQuery Plugin - v1.1

Bookshelf Slider Help documentation

Table of Contents

Setup

Parameters

Screenshots

Credits