پلاگین ساخت یک اسلاید شو حرفه ای

به نام خدا

در این پست پلاگینی معرفی داده خواهد شد که با استفاده از آن می توانید یک اسلاید شو حرفه ای برای سایت خود ایجاد نمایید.

برای دریافت پلاگین اینجا کلیک کنید.

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

<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/demo2.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/ipresenter.packed.js"></script>
<script>
	$(document).ready(function(){
		$('#ipresenter').iPresenter({
			animSpeed: 1500,
			timer: '360Bar',
			timerDiameter: 60,
			timerStroke: 5,
			timerPadding: 5,
			timerColor: '#000',
			timerBg: '#FFF',
			timerOpacity: 0.4,
			directionNav: false,
			controlNav: true
		});
	});
</script>

۲- کدهای فراخوانی تصاویر:

<div class="container">
		<div id="ipresenter">
			<div class="step" data-x="0" data-y="0" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="1500" data-y="0" data-rotatex="180" data-easing="easeInOutQuint" data-pausetime="15000" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="3000" data-y="0" data-rotatey="180" data-pausetime="2000" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="4500" data-y="0" data-rotatex="180" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="6000" data-y="0" data-rotate="180" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="7500" data-y="0" data-rotatey="180" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="9000" data-y="0" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="10500" data-y="0" data-rotate="80" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="12000" data-y="0" data-rotatex="180" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="13500" data-y="0" data-rotatey="180" data-scale="0.6" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="15000" data-y="0" data-rotatey="-180" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="16500" data-y="0" data-rotatey="180" data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>
		</div>
	</div>

دموی این پلاگین را می توانید اینجا ببینید.