نمایش تصاویر بصورت ریلی
|استفاده از اسلایدر برای نمایش تصاویر در وب سایت ها بسیار پرکاربرد است بخصوص در سایت های فروشگاهی بطور گسترده از ان استفاده می شود برای مثال نمایش کالاهای مشابه یا پرفروشترین کالاها و …..
اسلایدر های زیادی با استفاده از JQuery نوشته شده اند و بصورت رایگان در دسترس می باشند یکی از این موارد که بنظرم بسیار ساده نوشته شده و به سادگی قابل پیاده سازی در وب سایت ها می باشد در سایت sorgalla.com معرفی شده که بصورت open source با مجوز MIT ارائه می شود
در ادامه حالت پایه اسلایدر معرفی شده در سایت فوق را با تغییراتی جهت نمایش کالاها بصورت ریلی استفاده کردم
شما می توانید در این اینجا دموی این اسلایدر را مشاهده کنید و فایل پیوست را در انتهای مطلب دانلود نمایید.
برای شروع از یک تگ div استفاده میکنیم که قالب اسلایدر خواهد بود و با استفاده از css های مربوط به آن در فایل style.css (در مسیر css/style.css فایل پیوست)قرار داده شده مشخص میکنیم که اسلایدر چه اندازه ای داشته باشد و کجای صفحه قرار بگیرد.
<div class="ProductSlider"> </div>
cssهای استفاده شده هم بصورت زیر هستند
.ProductSlider{ display: inline; float: left; position: relative; margin-left: 20px; margin-right: 20px; direction: rtl; min-height: 300px; border:1px solid #e2e2e2 !important; width:70%; font-family:yekan; }
قدم بعدی تعیین هدر و بدنه اسلایدر می باشد که برای اینکار از تگ article استفاده شده است داخل تگ header عنوان اسلایدر نوشته می شود
<div class="ProductSlider"> <article class='SliderHeader' data-sort=''> <header> <h3>پر بازدیدترین ها</h3> </header> <!--بدنه اصلی اسلایدر--> </article> </div>
برای این قسمت در فایل style.css استایل هایی لحاظ شده که بسته به سلیقه شما قابل تغییر است
.SliderHeader{ background-color: #f7f9fa; height: 40px; } .SliderHeader h3{ color: #666; display: inline-block; font-size: 12px; padding-right: 15px; direction: rtl; }
بدنه اصلی اسلایدر از تگ div تشکیل شده استایل های مربوطه در فایل jcarousel.basic.css (داخل پوشه css) اعمال شده است. از تگ a با کلاس های jcarousel-control-prev و jcarousel-control-next بعنوان کلید های بعدی و قبلی استفاده شده.
<div class="ProductSlider"> <article class='SliderHeader' data-sort=''> <header> <h3>پر بازدیدترین ها</h3> </header> <div class="jcarousel-wrapper"> <div class="jcarousel"> <!--ایتم های اسلایدر در این قسمت قرار می گیرند--> </div> <a href="#" class="jcarousel-control-prev">‹</a> <a href="#" class="jcarousel-control-next">›</a> </div> </article> </div>
برای برای نمایش آیتم ها که معمولا عکس یا ترکیبی از عکس و نوشته است از تگ ul و li استفاده می شود.من از این اسلایدر برای نمایش کالاها به همراه نام و قیمت آنها استفاده کردم و استایل هایی را هم در فایل style.css براشون لحاظ کردم و استایل ها رو هم از سایت دیجی کالا کپی کردم که شبیه اسلایدر نمایش کالا در دیجی کالا باشه
<div class="ProductSlider"> <article class='SliderHeader' data-sort=''> <header> <h3>پر بازدیدترین ها</h3> </header> <div class="jcarousel-wrapper"> <div class="jcarousel"> <ul> <li> <a href='#' target="_blank" class="productItem"> <img src='images/Tablet-Huawei-MediaPad-X1-70.jpg' alt='Tablet-Huawei-MediaPad-X1'/> <h5 class="entitle">Tablet-Huawei-MediaPad-X1</h5> <span class="final-price">699,000 <span class="currency">تومان</span></span> </a> </li> <li> <!--آیتم دوم--> </li> <li> <!--آیتم سوم--> </li> </ul> </div> <a href="#" class="jcarousel-control-prev">‹</a> <a href="#" class="jcarousel-control-next">›</a> </div> </article> </div>
برای اینکه این اسلایدر کار بکنه نیاز به کد های جاوا اسکریپت داریم توابعی که هنگام کلیک روی کلید قبلی و بعدی بصورت ریلی تصاویر رو نمایش بده. توابعی که من استفاده کردم از سایت sorgalla.com گرفتم و مربوط به نسخه پایه اسلایدر معرفی شده در آنجا هستش. برای نوشتن این اسلایدر از کتاب خانه JQuery ورژن ۱٫۱۱٫۱ استفاده شده که در فایل پیوست قرار داده شده (فایل jquery-1.11.1.js در پوشه scripts) و دو فایل JQuery دیگر هم بنام های jquery.jcarousel.min.js و jcarousel.basic.js استفاده شده که آنها رو باید به پروژه اضافه کنید. فایل های jquery-1.11.1.js و jquery.jcarousel.min.js بدون تغییر باید به پروژه اضافه بشن اما فایل jcarousel.basic.js حاوی تنظیمات پایه اسلایدر هست که تنظیمات مربوط به اینکه با هر بار کلیک روی کلید های “بعدی” و “قبلی” چند آیتم جا به جا بشن از طریق تابع داخل این فایل انجام می شود. در اسلایدری که من بعنوان دمو نمایش دادم در هر بار کلیک ۴ آیتم جابه جا می شوند اگر بخواهید تعداد آیتم های جابه جا شونده را تغییر دهید این کار رو با تغییر مقدار target در فایل مذکور می توانید انجام دهید.
$('.jcarousel-control-prev') .on('jcarouselcontrol:active', function () { $(this).removeClass('inactive'); }) .on('jcarouselcontrol:inactive', function () { $(this).addClass('inactive'); }) .jcarouselControl({ target: '-=4' }); $('.jcarousel-control-next') .on('jcarouselcontrol:active', function () { $(this).removeClass('inactive'); }) .on('jcarouselcontrol:inactive', function () { $(this).addClass('inactive'); }) .jcarouselControl({ target: '+=4' });
سلام … بخشید من یه درخواست داشتم شما می تونید یه دوره کامل آموزش طراحی یه قالب حرفه ای با html منتر کنید …
یکی از اهدافم این هست که این کار رو بکنم اما فعلا به علت مشغله زیاد فرصتش رو پیدا نمی کنم . دارم برنامه ریزی می کنم که برا عید همچین مجموعه ای رو تهیه کنم
سلام استاد از شما یه سوال داشتم کاربرد علامت بزرگتر در css چی هستش ؟ مثال
menu>ul>li
یعنی تمام المان های li انتخاب می شوند که والد(parent) آنها المان ul هست و والد خود ul نیز المان menu می باشد
برای توضیح بیشتر در مورد css selectors از این لینک می تونید کمک بگیرید
Say, you got a nice article.Much thanks again. Much obliged.