اسلایدشو کتابی

 

با استفاده از این پلاگین می توانید در سایت خود اسلایدشویی راست به چپ یا چپ به راست داشته باشید.

آموزش استفاده

دموی 1

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

	<link rel="shortcut icon" href="../favicon.ico"> 
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
	<link rel="stylesheet" type="text/css" href="css/demo1.css" />
	<script src="js/modernizr.custom.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/jquerypp.custom.js"></script>
        <script src="js/jquery.bookblock.js"></script>

2-  کد html جهت استفاده پلاگین

<div class="container">
			<div class="main clearfix">
				<div class="bb-custom-wrapper">
					<h3>چپ به راست</h3>
					<div id="bb-bookblock" class="bb-bookblock">
						<div class="bb-item">
							<a href="#"><img src="images/demo1/1.jpg" alt="image01"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/2.jpg" alt="image02"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/3.jpg" alt="image03"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/4.jpg" alt="image04"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/5.jpg" alt="image05"/></a>
						</div>
					</div>
					<nav>
						<a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
						<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
						<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
						<a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
        <script src="js/main.js"></script>
		<script>
				Page.init();
		</script>

 

 

دموی 2

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
	<link rel="stylesheet" type="text/css" href="css/demo3.css" />
	<script src="js/modernizr.custom.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/jquerypp.custom.js"></script>
        <script src="js/jquery.bookblock.js"></script>

2-  کد html جهت استفاده پلاگین

<div class="container">
			<div class="main clearfix">
				<div class="bb-custom-wrapper">
					<h3>راست به چپ</h3>
					<div id="bb-bookblock" class="bb-bookblock">
						<div class="bb-item">
							<a href="#"><img src="images/demo1/1.jpg" alt="image01"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/2.jpg" alt="image02"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/3.jpg" alt="image03"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/4.jpg" alt="image04"/></a>
						</div>
						<div class="bb-item">
							<a href="#"><img src="images/demo1/5.jpg" alt="image05"/></a>
						</div>
					</div>
					<nav>
						<a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
						<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Next</a>
						<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Previous</a>
						<a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
        <script src="js/main2.js"></script>
		<script>
				Page.init();
		</script>