Home Multipurpose Bookshelf Slider With jQuery Plugin

Multipurpose Bookshelf Slider With jQuery Plugin


Multipurpose Bookshelf Slider – WordPress Plugin is useful for displaying products such as books, magazines, dvd, cd and others. It’s a way to showcase products in an attractive manner. Features of “lightbox” to display images, videos (Youtube and Vimeo) and any html content (WordPress editor). Can be added detailed content to each product. Easy to add into WordPress using widgets or shortcodes.

Untuk Demonya silahkan sobat klik disini...

CSS::

<style type="text/css">
body { background:#54493e url(http://srvalle.com/plugins/bookshelf_slider/assets/bg_texture_11.png) repeat;}
</style>

<link rel="stylesheet" type="text/css" href="http://srvalle.com/plugins/bookshelf_slider/css/bookshelf_slider.css" />
<link rel="stylesheet" type="text/css" href="http://srvalle.com/plugins/bookshelf_slider/css/skin01.css" />
<link rel="stylesheet" type="text/css" href="http://srvalle.com/plugins/bookshelf_slider/css/demo.css" />

SCRIPT::

<script type="text/javascript" src="http://srvalle.com/plugins/bookshelf_slider/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://srvalle.com/plugins/bookshelf_slider/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://srvalle.com/plugins/bookshelf_slider/js/jquery.bookshelfslider.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
   
    //define custom parameters
    $.bookshelfSlider('#bookshelf_slider', {
        'item_width': 8450, //385
        'item_height': 320, //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,
        'slide_duration': 1200,
        'slide_easing': 'easeOutElastic',
        'arrow_duration': 800,
        'arrow_easing': 'easeInOutExpo',
        'video_width_height': [500,290],
        'iframe_width_height': [500,330]
        }
    );
   
    $('#btn7').trigger('click');
   
   
});//ready
</script>

HTML::

<div id="bookshelf_slider">

    <div class="panel_title">
        <div class="selected_title_box"><div class="selected_title">Selected Title</div></div>
       
        <div class="menu_top">
            <ul>
                <li class="show_hide_titles"><a href="#">Titles</a></li>
                <li class="show_hide_icons"><a href="#">Icons</a></li>
            </ul>
        </div>
    </div><!-- .panel_title -->
   
    <div class="panel_slider">
        <div id="panel_items" class="panel_items">

            <div class="slide_animate">
                <div class="products_box" id="products_box_1">
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/01_large.jpg" title="The Title is Optional 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/01.jpg" alt="" width="81" height="107" /></div>                
                    <div class="product" data-type="book" data-popup="true" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/02.jpg" alt="" width="71" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/03.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/25348908" title="Book Title"><img src="http://srvalle.com/plugins/bookshelf_slider/images/04.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/06_large.jpg" title="Architecture & Design"><img src="http://srvalle.com/plugins/bookshelf_slider/images/06.jpg" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://ut2a-4down.blogspot.com/" title="Iframe HTML Content"><img src="http://srvalle.com/plugins/bookshelf_slider/images/05.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/book_large.png" title="Book Seo"><img src="http://srvalle.com/plugins/bookshelf_slider/images/07.jpg" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/03.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://ut2a-4down.blogspot.com/" title="Iframe HTML Content"><img src="http://srvalle.com/plugins/bookshelf_slider/images/05.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/book_large.png" title="Social Media"><img src="http://srvalle.com/plugins/bookshelf_slider/images/08.jpg" alt="" width="80" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="images/06_large.jpg" title="Architecture & Design"><img src="http://srvalle.com/plugins/bookshelf_slider/images/06.jpg" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/02.jpg" alt="" width="71" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/03.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/01_large.jpg" title="The Title is Optional"><img src="http://srvalle.com/plugins/bookshelf_slider/images/01.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/01_large.jpg" title="The Title is Optional 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/01.jpg" alt="" width="81" height="107" /></div>                
                    <div class="product" data-type="book" data-popup="true" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/02.jpg" alt="" width="71" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/03.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/25348908" title="Book Title"><img src="http://srvalle.com/plugins/bookshelf_slider/images/04.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/06_large.jpg" title="Architecture & Design"><img src="http://srvalle.com/plugins/bookshelf_slider/images/06.jpg" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://ut2a-4down.blogspot.com/" title="Iframe Content"><img src="http://srvalle.com/plugins/bookshelf_slider/images/05.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/01_large.jpg" title="The Title is Optional"><img src="http://srvalle.com/plugins/bookshelf_slider/images/01.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/03.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://ut2a-4down.blogspot.com/" title="Iframe Content"><img src="http://srvalle.com/plugins/bookshelf_slider/images/05.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="false" data-url="http://www.youtube.com/watch?v=C05pGnZQQtE" title="Youtube Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/02.jpg" alt="" width="71" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/06_large.jpg" title="Architecture & Design"><img src="http://srvalle.com/plugins/bookshelf_slider/images/06.jpg" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/book_large.png" title="Book Seo"><img src="http://srvalle.com/plugins/bookshelf_slider/images/07.jpg" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/6382511" title="Vimeo Video"><img src="http://srvalle.com/plugins/bookshelf_slider/images/03.jpg" alt="" width="81" height="107" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_2">
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_health.png" alt="" width="76" height="108" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_gourmet.png" alt="" width="71" height="100" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_001.png" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_house.png" alt="" width="91" height="107" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_web.png" alt="" width="71" height="93" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_fitness.png" alt="" width="76" height="107" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_health.png" alt="" width="76" height="108" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_gourmet.png" alt="" width="71" height="100" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_001.png" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_house.png" alt="" width="91" height="107" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_web.png" alt="" width="71" height="93" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_3">
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_01.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_02.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD3"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_03.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_01.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_02.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD3"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_03.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_01.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_02.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD3"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_03.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_01.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_02.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD3"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_03.jpg" alt="" width="80" height="80" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_4">
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD1 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_01.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD2 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_02.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD3 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_03.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD1 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_01.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD2 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_02.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD3 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_03.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD1 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_01.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD2 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_02.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD3 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_03.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD1 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_01.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD2 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_02.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD3 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_03.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD1 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_01.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD2 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_02.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD3 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_03.jpg" alt="" width="77" height="107" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_5">
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$459"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_01.png" alt="" width="47" height="89" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$347"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_03.png" alt="" width="43" height="84" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$789"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_02.png" alt="" width="45" height="88" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$459"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_01.png" alt="" width="47" height="89" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$347"><img src="images/phone_03.png" alt="" width="43" height="84" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$789"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_02.png" alt="" width="45" height="88" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$459"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_01.png" alt="" width="47" height="89" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$347"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_03.png" alt="" width="43" height="84" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$789"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_02.png" alt="" width="45" height="88" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$459"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_01.png" alt="" width="47" height="89" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$347"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_03.png" alt="" width="43" height="84" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$789"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_02.png" alt="" width="45" height="88" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_6">
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02_large.png" title="Tablet 2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02_large.png" title="Tablet 2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02_large.png" title="Tablet 2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02.png" alt="" width="88" height="115" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_7">
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$459"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_01.png" alt="" width="47" height="89" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="$789"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_03.png" alt="" width="43" height="84" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://ut2a-4down.blogspot.com/" title="$343"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_02.png" alt="" width="45" height="88" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/25348908" title="Book"><img src="http://srvalle.com/plugins/bookshelf_slider/images/04.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/06_large.jpg" title="Book"><img src="http://srvalle.com/plugins/bookshelf_slider/images/06.jpg" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/magazine_large.jpg" title="Magazine"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine_health.png" alt="" width="76" height="108" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD1 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_01.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD2 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_02.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="dvd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/dvd_large.jpg" title="DVD3 Info"><img src="http://srvalle.com/plugins/bookshelf_slider/images/dvd_03.jpg" alt="" width="77" height="107" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_01.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_02.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01_large.png" title="Tablet 1"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_01.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02_large.png" title="Tablet 2"><img src="http://srvalle.com/plugins/bookshelf_slider/images/tablet_02.png" alt="" width="88" height="115" /></div>
                    <div class="product" data-type="cd" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/cd_large.jpg" title="Info CD3"><img src="http://srvalle.com/plugins/bookshelf_slider/images/cd_03.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/phone_large.jpg" title="Phone"><img src="http://srvalle.com/plugins/bookshelf_slider/images/phone_01.png" alt="" width="47" height="89" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/01_large.jpg" title="The Title is Optional"><img src="http://srvalle.com/plugins/bookshelf_slider/images/01.jpg" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://srvalle.com/plugins/bookshelf_slider/images/06_large.jpg" title="Book Title"><img src="http://srvalle.com/plugins/bookshelf_slider/images/06.jpg" alt="" width="100" height="107" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_8">
                    <div class="product" data-type="" data-popup="true" data-url="http://ut2a-4down.blogspot.com/" title="105 Photo Effects - BUNDLE"><img src="http://srvalle.com/plugins/bookshelf_slider/images/105-photo-effects-bundle-thumb.jpg" alt="" width="80" height="80" /></div>
                     <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/3d_book_mockup_01_thumb.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/50-photo-effects-thumb.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$6"><img src="http://srvalle.com/plugins/bookshelf_slider/images/30-photo-effects-thumb.jpg" alt="" width="80" height="80" /></div>   
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/book-007.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/book004.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$4"><img src="http://srvalle.com/plugins/bookshelf_slider/images/3dbox.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/mag001.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/stamp.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$6"><img src="http://srvalle.com/plugins/bookshelf_slider/images/textchrome.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$6"><img src="http://srvalle.com/plugins/bookshelf_slider/images/3dbook003.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/wine.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine003.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/magazine002.jpg" alt="" width="80" height="80" /></div>
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title="$5"><img src="http://srvalle.com/plugins/bookshelf_slider/images/3d-book-006.jpg" alt="" width="80" height="80" /></div>
                </div>
            </div>


            <div class="slide_animate">
                <div class="products_box" id="products_box_9">
                    <div class="product" data-type="" data-popup="false" data-url="http://ut2a-4down.blogspot.com/" title=""><img src="http://srvalle.com/plugins/bookshelf_slider/images/buy_bs_plugin.jpg" alt="" width="174" height="95" /></div>
                </div>
            </div>
           
        </div><!-- panel_items -->
    </div><!-- panel_slider -->
   
    <div class="panel_bar">
        <div class='buttons_container'>
            <div id="arrow_box"><div id="arrow_menu"></div></div>
            <div class="button_items">
                <div id="btn1" class="button_bar"><a href="#">Books</a></div>
                <div id="btn2" class="button_bar"><a href="#">Magazines</a></div>
                <div id="btn3" class="button_bar"><a href="#">CDs</a></div>
                <div id="btn4" class="button_bar"><a href="#">DVDs</a></div>
                <div id="btn5" class="button_bar"><a href="#">Phones</a></div>
                <div id="btn6" class="button_bar"><a href="#">Tablets</a></div>
                <div id="btn7" class="button_bar"><a href="#">Mix Products</a></div>
                <div id="btn8" class="button_bar"><a href="#">Graphic River</a></div>
                <div id="btn9" class="button_bar"><a href="#">Buy Plugin</a></div>
            </div>
        </div>
    </div>
   
    <!-- <div id="debug"></div> -->
   
</div><!-- bookshelf_slider -->


<!-- DEMO PANEL -->

<div id="bookshelf_options">

    <div id="demo_title">Bookshelf Slider - Demo Examples</div>
    <div id="bookshelf_samples">
        <ul>
            <li class="current_demo"><a href="bookshelf_slider.html">Full Site Style</a></li>
            <li><a href="#">Sidebar Widget Style</a></li>
            <li><a href="#">Easing Transition</a></li>
            <li><a href="#">Trigger Mix Products</a></li>
            <li><a href="#">Responsive - Width 100%</a></li>
        </ul>
    </div>

</div>

Silahkan Sobat Utak-atik sendiri kode CSS, SCRIPT & HTML diatas, oia sebenarnya plugin 'Multipurpose Bookshelf Slider' ini tanpa sengaja saya temui di salah satu situs, karena menurut gue menarik terpaksa saya ambil source kodenya dan akhirnya berhasil untuk digunakan! :D
dan kalian tau gk? 'Multipurpose Bookshelf Slider' ini sebenarnya Plugin jQuery untuk Wordpress dan yg lebih gokil lagi plugin jquery ini ternyata (Berbayar) harganya klw tdk salah $6 ato kurang lebih 60.000,-..!Hehee,..

ya udah.. selamat berkreasi sendiri.. Goodluck ^^

Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...
Please rate this article:
{[['', '']]}
{["Useless", "Boring", "Need more details", "Perfect"]}

Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!

thumbnail
About The Author

Hai,.. I am just an ordinary man who just might share the knowledge that I know ahead of you, No one is more perfect. Always keep learning and sharing of knowledge, Just be Yourself and be The Unique that makes them know who you are.!!


  • Diposkan oleh ← Ⓐкα UTτα`

    • You might also like these article :

    1 Comments
    Comments

    + komentar + 1 komentar

    Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

    Pedoman wajib untuk memasukkan komentar:
    1. Tidak boleh memakai lebih dari satu kolom komentar.
    2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
    3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
    4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
    5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
    6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

    Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

    Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^