طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

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

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

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

دموی 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>

 

26 نظر

  • سلام
    من یه سوالی از شما پرسیده بودم ولی هنوز جوابی دریافت نکردم سوال من درباره اسلایدر رسپانسیو هست – چطوری میشه اونو توی وبلاگ گذاشت قبلا هم از اسلایدهایی استفاده کردم ولی اینو امتحان کردم فقط عکسارو بالا آورد – در ضمن از سایت بسیار خوبتون متشکرم –

  • سلام
    ببخشید من اینجا میپرسم گفتم شاید مشاهده نشه- من فایل js و css رو همونجایی مشخص شده لینک آپلود رو گذاشتم بازهم جواب نداد عکسها رو هم که توی پوشه ایمیج بود همه رو آپلود کردم فقط اون کد مرحله آخری که باید در head بزاری رو گذاشتم زیر کدهای جاوا و سی اس اس و جفتشون هم در قسمت هد قالب قبل از هست ولی موقع اجرا کد مرحله اخری که اولش $ هست میره بالای وبلاگ و همونجا نوشته میشه و جوابم نمیده – دوست عزیز واقعا نمیدونم چکار کنم از اول کار تا آخر کار که باید انجام بدی یه راهنمایی کن. ممنون

  • سلام
    این فایلی را که در سایت خود گذاشتین اصلا در فایر فاکس نمایش داده نمی شود ولی در Torch نمایش میابد .مشکل را رفع کنید.
    با تشکر

  • آدرس وبلاگ :techmodern.mihanblog.com
    البته این وبلاگ و قالبش فقط برای تست ساختم. اما این قالب روی وبلاگ اصلی که ساختم هست.
    گفتم دقیقا کدهای js و سی اس اس و کد مرحله آخر رو باهم قبل از قالب گذاشتم و کد html هم در بادی جای دلخواه قرار دادم. ولی یه نوار سیاه رنگ میاد بالای وبلاگ دوبار روش کلیک کنی سمت چپش کد آخری ظاهر میشه!

  • سلام
    سایتی که خوبه ، باید گفت خوبه و دوست من باید بگم سایتت خیلی خوبه
    از شما متشکرم برای این سایت زیبات

    • سلام جواد جان پوزش یکم دیر به دیدگاه ها جواب دادم .
      من چک کردم الان اصلاْ فایل های css و js فراخوانی نشده فقط html هست ؟
      بعد اینجور مواقع فراخوانی هم درست انجام بشه باید کنسول مروگر رو ببینی چه اروری میده شاید ارور تداخل jQuery باشه

  • خواهش میکنم چون بنده خیلی نیاز دارم.
    ببخشید من فایلهای js و css رو برای یه تست برداشته بودم که الان گذاشتم حالا میتونید ببینید- در ضمن به نوار سیاه رنگ بالای وبلاگ هم نگاه کنید.

  • جواد جان نوار سیاه رنگ به خاطر کدی هست که داخل تگ script نزاشتی $(document).ready(function(){ $(‘.bxslider’).bxSlider(); });

    بعد فایل ها ها هم هنوز فراخوانی نشده

  • سلام
    اون کدی که دادید رو بردم داخل تگ اسکریپت درستشد دیگه نوار سیاه نمیاد.
    فایلهای js و css رو هم من آپلود کردم و هر کدوم گذاشتم جای خودش. اما بازم عکسها رو فقط بالا میاره- منظور شما از فراخوانی فایلها چیه؟ اگه میشه توضیع کاملی بدید.

    • سلام جواد جان معذرت میخوام این چند وقته درگیر نمایشگاه بودیم اصلاً نرسیدم جواب کامنتتو بدم .
      منظورم از فراخوانی فایل ها اینه که مثلاً برای css از

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

  • جواد جان تو مرحله اول گفته ابتدا فایل های مربوطه را به پروژه خود الحاق کنید که باید قبل بسته شدن تگ بزاری یا فراخوانی کنی تو مرحله دوم گفته کدهای Html رو بعد تگ body بزار مرحله سوم هم کدهاشو دقیقاً بعد از کدهای مرحله اول قبل بسته شدن تگ head بزار

  • سلام داداش ببخشید یه سوال
    کد این چجوریه؟
    من یه pdf دارم میخام مثه پیشنماش این سایت شه منوی پایینی پیش نمایشhttp://learningjquery.ir/
    خواهش خواهش این کدو بزارید برام یا چیزی شبیهش برای مقاله میخام لازممه ترخدا

دانلود و پیش نمایش

دانلود و پیش نمایش فایل اسلایدشو کتابی

دانلود پلاگین پیش نمایش آنلاین

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)