دانلود پلاگین گالری عکس حرفه ای و ریسپانسیو جی کوئری + آموزش کامل و ساده
امروز با یک پلاگین فوق حرفه ای و بسیار پرکاربرد در صفحات وب در خدمت شما عزیزان هستم.
پلاگین Nivo Slider یک گالری عکس یا همان اسلاید شو عکس . همون طور که میدونید زبان Jquery یک زبان بسیار قابل انعطاف و حرفه ای میباشد که خیلی وقته جای خودشو میان طراحی های حرفهای وب سایت باز کرده و نبود پلاگین یا کدنویسی های Jquery , یک خلا در طراحی وب سایت به شمار میرود .
در همین راستا امروز میخواهم دانلود و آموزش کامل و به زبان ساده این گالری عکس حرفه ای و البته ریسپانسیو رو در اختیار شما عزیزان قرار دهم .
در بسیاری از سایت ها این پلاگین موجود میباشد اما متاسفانه نه آموزش کامل و ساده ای برای آن موجود است و نه این پلاگین به صورت بهینه شده وجود دارد. شما در این پست , پلاگین کاملا بهینه شده را دانلود خواهید کرد …
ویژگی های این پلاگین :
دارای بیش از 5 افکت مختلف
قابلیت نمایش در تمامی مرورگرهای جدید و قدیمی
کاملا ریسپانسیو ( نمایش در تمامی دستگاه ها به صورت کامل )
کنترل کامل زمان بندی ها , افکت ها و …
دارای استایل مجزا Theme برای تغییر دیزاین به دلخواه خودتان
آموزش نصب پلاگین :
ابتدا فایل های مربوز به این پلاگین رو از اینجا دانلود کنید . پس از دانلود , پوشه ها رو در روت سایت خود قرار دهید .
نکته : کاملا بدیهی است که این آموزش , طریقه نصب پلاگین در روت سایت میباشد و اگر بخواهید جای فایل ها و پوشه هارو عوض کنید , باید آدرس دهی کدهایی که در ادامه آموزش خواهم داد رو هم به صورت مناسب عوض کنید .
حال فایل یا صفحه ای رو که میخواهید در آن از این اسلایدر استفاده کنید با استفاده از NotePad و البته ترجیحا با DreamWeaver باز کنید .
حال باید در بین دو تگ <head> و <head/> , به این پوشه ها با آدرسهای متناسب ( گفته شده در نکته بالا ) آدرس دهی نمایید .
برای حالت پیش فرض و در روت سایت به صورت زیر :
<link rel="stylesheet" href="theme/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
حال در دو خط مانده به انتها ( یعنی قبل از دو تگ <body/> و <html/> ) کد های زیر را کپی نمایید ( باز هم با توجه به آدرس دهی مناسب گفته شده در نکته بالا )
برای حالت پیش فرض و در روت سایت به صورت زیر :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
حال نوبت قطعه کدی میباشد که با کپی آن در هرجایی که از قبل در نظر گرفته اید برای نمایش اسلاید شو , میتوانید از آن استفاده کنید .
کافیست کد زیر را در محل مناسب و البته بین دو تگ <body> و <body/> کپی نمایید :
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href="http:/اسکریپت.com"><img src="images/VM1.jpg" title="عکس شماره یک"></a>
<a href="http://اسکریپت.com"><img src="images/VM2.jpg" title="عکس شماره دو"></a>
<a href="http://اسکریپت.com"><img src="images/VM3.jpg" title="عکس شماره سه"></a>
<a href="http://اسکریپت.com"><img src="images/VM4.jpg" title="عکس شماره چهار"></a>
</div>
</div>
نکات و آموزش کد های بالا :
1 – به جای لینک های قرار گرفته در بالا , باید لینک های مربوط به هر عکس را جایگزین کنید که کاربر پس از کلیک بر روی عکس , وارد لینک دلخواه شود . ( در صورتی که نمیخواهید عکس شما لینک دار باشد , میتوانید کل تگ a را پاک نمایید )
2 – در تگ img و در اتربیوت src آن , لینک نمایش عکسها را وارد نماید که برای مثال , اینجا عکس ها در پوشه ای به نام images و عکس هایی با نام های VM1 , VM2 VM 3 و VM4 می باشد .
3 – در تگ img و اتربیوت title میتوانید شرحی در مورد عکس بیان کنید تا در نمایش اسلاید شو , پایین هر عکس به نمایش درآید . ( میتوانید در صورت دلخواه و عدم نمایش شرح عکس , این اتربیوت را پاک نمایید )
4 – بدیهی است که به صورت پیش فرض , این اسلایدر دارای 4 عکس میباشد که شما میتوانید به راحتی و طبق الگوی بالا , به آن عکس های بیشتری اضافه و کم کنید .
تا اینجا شما میتوانید از این پلاگین به راحتی استفاده نمایید . اما برای کسانی که میخواهند به صورت خیلی پیشرفته تر از این پلاگین استفاده نمایند و به حالت افکتها , زمان بندی ها و … دسترسی داشته باشند . باید کد زیر را به جایگزین 2 قطعه کد بالاتر کنید .
یعنی به جای این قطعه کد :
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
از این قطعه کد استفاده کنند :
<script type="text/javascript">
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
با کمی تغییر در کدهای بالا , شاهد یک اسلاید شو کاملا کاستومایز و حرفه ای تر خواهید بود .
آموزش : وحید مجیدی
پخش اختصاصی
دانلود اسلاید شو نمونه پلاگین به صورت آماده
[sdm-download id=”1015″ fancy=”0″]
سلام. خسته نباشید استاد.
ممنون از توضیحات خوبتون.
کد دوم که فانکشنای بیشتری برای کاستومایز کردن داره عمل نمی کنه. یعنی با استفاده از اون، اسلایدر لود نمیشه.
لطفا یه بررسی کنید.
عالی بود
سلام دستتون درد نکنه