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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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://ngawicybers.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 ^^
Posting Komentar