جاوا اسکریپتی که امروز می خوام خدمتتون معرفی کنم کارش اینه که یه سری تصویر رو به صورت پشت سر هم یا همون به اصطلاح اسلاید نمایش می ده، در ضمن حجمش هم به خیلی کمه (در حدود ۵ کیلو ببایت). امکانات جالبی هم داره مثلا: برای هر تصویر می تونین توضیح یا لینک هم داشته باشین، تصاویر Portrait رو هم پشتیبانی می کنه و …
همچنین مستندات و مثال هم داره. در زیر یه مثال از نحوه بکار بردن این اسکریپ اومده:
<ul id=”slideshow”>
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href=”#”><img src=”thumbnails/image-one.jpg” alt=”Image One” /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src=”thumbnails/image-two.jpg” alt=”Image Two” />
</li>
</ul>
هر “li” نمایانگر یه تصویر هست و تگ های “h3″ عنوان تصویر رو مشخص می کنن همچنین تگ های “p” شامل توضیحات هستن. تگ “span” هم مسیر مسیر تصویر اصلی رو مشخص می کنه. اگر می خواین که تصویرتون به جایی لینک باشه باید دو طرف تگ “img” که برای تصویر کوچیک به کار بردین از یک تگ “a” استفاده کنین.
در زیر پارامترهایی که می تونین به شی بفرستین اومده: (مقادیر پیش فرض داخل پرانتز و مقادیر پیشنهادی به صورت بازه ای نوشته شده اند)
Images
imgSpeed = int; (10)
navOpacity = int; (25)
navHover = int; (70)
letterbox = “string”; (#۰۰۰) required color for letterbox on portrait images
link = “string”; class name for link hover state
Auto Slideshow
auto = boolean; (false)
speed = int; (10)
Information Dialog
info = boolean; (true)
infoID = “string”; required for information dialog
infoSpeed = int; (10)
Thumbnail Slider
thumbs = “string”; id of thumbnail slider, disabled if not set
scrollSpeed = int; [1-20] (5)
thumbOpacity = int; [0-100] (70)
active = “string”; required for thumbnail active border
spacing = int; (5) spacing between thumbnails
left = “string”; id of left navigation link, required for slider
right = “string”; id of right navigation link, required for slider
در زیر یه نمونه از نحوه کار اومده:
<script type=”text/javascript” src=”compressed.js”></script>
<script type=”text/javascript”>
$(’slideshow’).style.display=’none’;
$(’wrapper’).style.display=’block’;
var slideshow=new TINY.slideshow(”slideshow”);
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=”linkhover”;
slideshow.info=”information”;
slideshow.thumbs=”slider”;
slideshow.left=”slideleft”;
slideshow.right=”slideright”;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=”#fff”;
slideshow.init(”slideshow”,”image”,”imgprev”,”imgnext”,”imglink”);
}
</script>
تابع init پنج تا پارامتر می گیره که بهتره توضیحش رو به انگلیسی بیارم:
id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder
این اسکریپت برای فایرفاکس، اینترنت اکسپلورر، اپرا، سفری و کروم تست شده.
نمایش نسخه نمایشی
دریافت فایل
