نمایش تصاویر به صورت چرخشی
چرخفلک تصاویر
این روزها استفاده و کاربرد فایلهای چند رسانهای در سطح وب بیشتر و بیشتر میشود، از این رو باید توجه بیشتری به نمایش آنها در صفحات وب داشت. فایلهای چند رسانهای صوتی و تصویری معمولا باعث میشوند که صفحه شما شلوغتر جلوه کند و اگر برای نمایش آنها از ابزارهای دیگری استفاده کنید، صفحه شما میتواند نمای بهتری داشته باشد.
یکی از روشهای معمول استفاده از تکنیک Css جهت نمایش بهتر نمای فایلهای تصویری است. با استفاده از Css میتوان ظاهری متفاوت برای این نوع از فایلها ایجاد کرد و آنها را جذابتر از قبل نمایش داد. اما اگر تعداد تصاویر مورد نظر ما بیشتر از حد معمول باشد و یا بخواهیم تعداد بیشتری از تصاویر را یک جا برای بازدیدکنندگان نمایش دهیم، آن وقت تکلیف چیست؟
ممکن است تعدادی از شما روشهای مختلفی را برای انجام این کار مد نظر داشته باشید و در طراحیهایتان نیز از آنها استفاده کنید، اما این هفته میخواهیم روش نوینی را معرفی کنیم که با استفاده از آن میتوانید کیفیت نمایش تصاویر خود را بیشتر از پیش کنید به طوری که کاربران سایت شما لذت بیشتری از تماشا و بازدید این تصاویر ببرند.
پلاگینی که امروز آن را معرفی خواهیم کرد، jCarousel نام دارد. با استفاده از این پلاگین میتوانید فایلهای چند رسانهای خود را در صفحات وب به صورت لیستی گردشی نمایش دهید که کاربران میتوانند حرکت آن را کنترل کنند.
برای شروع به صفحه خانگی این پلاگین بروید و آن را دانلود کنید:
http://sorgalla.com/jcarousel
از این پلاگین میتوانید در سطوح مختلفی بر اساس دانش خود استفاده کنید. نمونههای مختلف استفاده از این پلاگین را میتوانید در صفحه خانگی این پلاگین مشاهده کنید. نمونه کار این پلاگین در حالت ساده به این شکل است که ابتدا مثل همیشه باید کتابخانه جیکوئری و پلاگین jCarousel را در بخش <head >صفحه قرار دهید:
script type="text/javascript">
<src="jquery.js"<>/script
script type="text/javascript" src=>
<jquery.jcarousel.pack.js"<>/script"
همچنین این پلاگین دو فایلCss را جهت نمایش تصاویر مورد نظر شما نیاز دارد که آنها را نیز باید در بخش <>head صفحه قرار دهید، در ادامه توضیح خواهیم داد که این فایلها چه وظیفهای را بر عهده دارند و به چه دلیل باید از آنها استفاده کنید.
link rel="stylesheet" type=>
<text/css" href="jquery.jcarousel.css" /"
link rel="stylesheet" type=>
<text/css" href="skin.css" /"
توجه کنید که این فایلها را میتوانید از طریق دانلود پکیجی که در صفحه خانگی این پلاگین معرفی شده است، دریافت کنید.
بعد از طی فرآیندهای بالا، نوبت به دستور اصلی میرسد که باید در بخش head قرار بگیرد.
<script type="text/javascript">
تjQuery(document).ready(function()
jQuery('َmycarousel').jcarousel();
;(ت
</script>
با استفاده از این دستور تابعjcarousel را به عنصری که با یکID مشخص مثل mycarousel (البته در این مثال) در صفحه مشخص شده است، مرتبط میسازیم. سپس تصاویر مورد نظر خود را درون آن عنصر قرار میدهیم. اما در استفاده از این پلاگین باید چند نکته را مد نظر داشته باشید. پیشنهاد میشود عنصری که قرار است ID آنjcarousel یا هر نام دیگری باشد، از جنس <>ul باشد. تصاویر خود را در درون عناصر < >li قرار دهید، بهعنوان مثال کد مورد نظر میتواند چیزی شبیه کد زیر باشد:
>ul id="mycarousel" class=
<jcarousel-skin-tango""
li<>img src="pic1.jpg" width=>
< "57" height="57" alt="" /<>/li
li<img src="pic2.jpg" width=>
< "57" height="57" alt="" /<>/li
</ul>
توجه کنید که در این مثال برای عنصر <>ul کلاسی با نام jcarousel-skin-tango تعریف شده است. این کلاس مربوط به ظاهری است که برای نمایش چرخ و فلک تصاویر استفاده میشود. میتوانید با باز کردن فایلهای css که در ابتدا آنها را در بخش> <head صفحه قرار دادید و با استفاده از دانش خود، ظاهری متفاوت برای نمایش تصاویر مورد نظرتان ایجاد کنید. با استفاده از این روش تصاویر بهصورت افقی نمایش داده میشوند و به صورت افقی نیز حرکت میکنند. یکی از نکات مثبت این پلاگین انعطاف پذیری آن است. به این ترتیب که میتوانید به صورتهای مختلف از آن استفاده کنید، تنظیمات مختلفی را برای آن ایجاد کنید و یا همراه با ایجکس از آن استفاده کرده و تصاویر را به صورت پویا نمایش دهید.
پویا سلیمی
گفت و گو
