اگر شما هم کار طراحی وب سایت انجام داده باشید ، بیشتر مشتری ها از شما درخواست اسلاید شو تصاویر برای وب سایت خودشون می کنند ، اگر وب سایت وردپرس باشه که مشکلی نیست از افزونه استفاده می کنیم تا مشتری راحت بتونه توسط پنل ، تصاویر و لینک های اسلاید شو رو عوض کنه ، اما برای سایت های استاتیک اسلاید شو ها بیشتر ثابت هستند که من خودم از همین اسکریپت ای که امروز اینجا برای دانلود قرار میدم استفاده میکنم.

دانلود اسکریپت اسلاید شو تصاویر جی کوئری

آموزش قرار دادن اسلاید شو جی کوئری

وقتی شما در انتهای این مطلب اسکریپت رو دانلود کردید ، داخل اون دوتا پوشه اصلی وجود داره که باید آپلودشون کنید و سپس کد های زیر را داخل قالب سایت خود قرار بدید.

کدهای زیر رو باید قبل از <head/> قرار بدید.


<script type="text/javascript" src="http://....../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://....../js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://....../css/style.css">

دقت کنید که باید آدرس اونجایی که فایل ها آپلود شدن رو بدید ، من نقطه چین گذاشتم ، حواستون باشه !

کد های زیر رو باید زیر <body> و هرکجای قالب که دوست داشتید قرار بدید تا اسلاید شو نمایش داده بشه.


<div id="slider">
<a href="http://doctorwp.com" target="_blank">
<img src="slide1.jpg" alt="اسلاید شو" width="565" height="290"><span><b>آرش حیدری</b><br>
www.doctorwp.com
</span></a>
<a href="http://doctorwp.com" target="_blank"><img alt="" src="slide2.jpg"></a>
<a href="http://doctorwp.com" target="_blank"><img alt="" src="slide3.jpg"></a>
<a href="http://doctorwp.com" target="_blank"><img alt="" src="slide4.jpg"></a>
<a href="http://doctorwp.com" target="_blank"><img alt="" src="slide5.jpg"></a>
</div>
<script>$(document).ready(function() {
$('#slider').coinslider({ hoverPause: false });
});
</script>

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

برای تغییر سایز کادر ، ارتفاع ، رنگ کادر ، تاخیر نمایش اسلاید ها و … باید در فایل coin-slider.min.js در انتهایش مقادیر زیر رو پیدا و ویرایش کنید.


defaults={width:<strong>565</strong>,height:<strong>290</strong>,spw:7,sph:5,delay:<strong>3000</strong>,sDelay:<strong>30</strong>,opacity:<strong>0.7</strong>,titleSpeed:<strong>500</strong>,effect:'',navigation:<strong>true</strong>,
links:<strong>true</strong>,hoverPause:<strong>true</strong>}

دانلود و دمو اسکریپت اسلاید شو جی کوئری

دموی اسلاید شو تصائیر جی کوئری

دانلود اسکریپت اسلاید شو جی کوئری

رمز فایل زیپ : www.picor.ir ( آدرس قدیم سایت بودش ! )

حجم فایل : ۱۴۰ کیلوبایت

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 9 رای
Loading...