가벼운 자바스크립트 이미지 갤러리 및 슬라이드쇼.
매우 가벼운  이미지 갤러리입니다.

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. Recently I was looking for a nice existing script for a client project. I wanted something elegant, simple and lightweight. What I found were a number of scripts built on JavaScript frameworks and a few others that really lacked any appealing interface or were over 30kb. I challenged myself to build a full-featured slideshow gallery under 4kb. Hopefully I will be add a few more features to the script soon and make it a little mode user-friendly.

Here is an example of the markup…

<div id="gallery">
<div id="imagearea">
<div id="image">
<a href="javascript:slideShow.nav(-1)" id="previmg"></a>
<a href="javascript:slideShow.nav(1)" id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" alt="" /></li>
<li value="4"><img src="thumbs/4.jpg" alt="" /></li>
<li value="5"><img src="thumbs/5.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>

The list section is the important element to the gallery. Each li has a value property that is set to the name of the full-size image. The interface is very flexible and can easily be altered in the HTML and CSS.

You will also need to setup the variables below and include the slideshow JavaScript…

<script type="text/javascript">
var imgid = 'image'; // id of image div //
var imgdir = 'fullsize'; // full-size image directory //
var imgext = '.jpg'; // full-size image extension //
var thumbid = 'thumbs'; // id of the thumbnail container //
var auto = true; // automatic rotation toggle //
var autodelay = 5; // seconds before the image rotates //
</script>
<script type="text/javascript" src="packed.js"></script>

This script isn’t completely polished yet but I wanted to go ahead and get it out there for anyone that can put it to use. It is tested working in IE6/IE7, FF, Opera and Safari. Feel free to use it in any personal or commercial projects. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”.
Demo Link : http://sandbox.leigeber.com/slideshow/

Animated JavaScript Slideshow

같은 제작자가 만든 버전업된  자바스크립트 이미지 갤러리 및 슬라이드쇼입니다.

Here is an example of the markup to build a slideshow…

<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>

Each “li” above represents an image. The “h3″ content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. If you want to link the image wrap an “a” tag around the “img” tag which is the thumbnail image.

The following are the parameters that can be set on the object… more complete documentation will follow soon. Default values are displayed as (10) and recommended values as [1-20].

Images

imgSpeed = int; (10)
navOpacity = int; (25)
navHover = int; (70)
letterbox = “string”; (#000) 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

Here is an example calling the script…

<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>

The init function takes 5 parameters (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).

This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects under the creative commons license and is offered AS-IS, NO FREE SUPPORT PROVIDED.

Demo Link : http://sandbox.leigeber.com/javascript-slideshow/

TinySlideshow.zip