JavaScript is widely used for web development, Here’s a collection of JavaScript effects for your web pages, powerful and easy to implement .

instant.js

 This effect dynamically adds a Polaroid-like effect to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.

This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).

click here to see more...

Tags: JavaScriptJavaScript effectseffects web designerweb designer

This is a highly customizable JavaScript example that can easily turning your images into a collection viewable as a slide show gallery with fading effects. It also supports automatic thumbnail creation and tagging of images. This example includes three files: gallery.js, gallery.css,gallery.htm.

Click here to see the example

//gallery.js

var JaS = {
 // Customization parameters
 imagePath : "images/",
 images : [
  ["1.jpg", "picture 1", "category 1"],
  ["2.jpg", "picture 2", "category 1"],
  ["3.jpg", "picture 3", "category 2"],
  ["4.jpg", "picture 4", "category 3"],
  ["5.jpg", "picture 5", "category 3"],
  ["6.jpg", "picture 6", "category 4"],
  ["7.jpg", "picture 7", "category 5, category 4"], // Separate multiple tags by a comma
  ["8.jpg", "picture 8", "category 5"]
 ],

 fadeContainerId : "jas-container",
 imageContainerId : "jas-image",
 imageTextContainerId : "jas-image-text",
 previousLinkId : "previous-image",
 nextLinkId : "next-image",
 imageCounterId : "image-counter",
 startSlideShowId : "start-slideshow",
 stopSlideShowId : "stop-slideshow",
 thumbnailContainerId: "jas-thumbnails",
 tagsContainerId: "jas-tags",
 tagsSelectAllId: "jas-select-all-tags",
 useImageText : true,
 useThumbnails : true,
 useTags : true,
 useKeyboardShortcuts : true,
 useFadingIn : true,
 useFadingOut : true,
 useFadeWhenNotSlideshow : false,
 useFadeForSlideshow : true,
 useFadeAtInitialLoad : false,
 fadeIncrement : 0.1,
 fadeInterval : 100, // Milliseconds
 timeForSlideInSlideshow : 1500, // Milliseconds

 // JaS function parameters
 allImages : null,
 currentImages : null,
 fadeContainer : null,
 imageContainer : null,
 imageTextContainer : null,
 previousLink : null,
 nextLink : null,
 imageCounter : null,
 startSlideShowLink : null,
 stopSlideShowLink : null,
 thumbnailContainer : null,
 thumbnailCollection : [],
 currentThumbnailSelected : null,
 tagsContainer : null,
 tagsSelectAll : null,
 tagsList : null,
 tags : [],
 tagsCheckboxes : [],
 selectAllTags : true,
 imageText : null,
 imageText : "",
 imageSource : "",
 imageIndex : 0,
 fadingIn : true,
 fadeLevel : 0,
 fadeEndLevel : 1,
 fadeTimer : null,
 hasOpacitySupport : false,
 useMSFilter : false,
 useMSCurrentStyle : false,
 slideshowIsSupported : false,
 slideshowIsPlaying : false,
 functionAfterFade : null,
 isInitialLoad : false,

 init : function (){
     if(document.getElementById){
   this.fadeContainer = document.getElementById(this.fadeContainerId);
   this.imageContainer = document.getElementById(this.imageContainerId);
   this.slideshowIsSupported = this.fadeContainer && this.imageContainer;
   if(this.slideshowIsSupported){
    this.allImages = this.images;
    this.currentImages = this.images;
    if(this.useImageText){
     this.imageTextContainer = document.getElementById(this.imageTextContainerId);
     if(!this.imageTextContainer){
      this.useImageText = false;
     }
    }
    this.hasOpacitySupport = typeof this.fadeContainer.style.filter != "undefined" || typeof this.fadeContainer.style.opacity != "undefined";
    this.useMSFilter = typeof this.fadeContainer.style.filter != "undefined";
    this.useMSCurrentStyle = typeof this.fadeContainer.currentStyle != "undefined";

click here to see more...

Tags: customizablecustomizable JavaScriptJavaScript imageimage gallerygallery thumbnailthumbnail

This JavaScript code  implement a panorama view of an image,  Scrolls to the left and to the right .

Click here to view panorama demo

 //panorama.js

img_src='panorama.jpg';
img_wid=1440;
img_hei=100;
left_pos=20;
top_pos=20;
panel_wid=400;
panel_hei=100;
speed=30;
move_step=3;

tim=0;noscroll=true;
img_w=img_wid*panel_hei/img_hei;img_h=panel_hei;imstart=panel_wid/2-img_w*1.5;
jump_1=panel_wid/2-img_w*2.5;jump_wid_1=img_w-move_step;
jump_2=panel_wid/2-img_w/2;jump_wid_2=img_w+move_step;
text_wid=200;text_top=top_pos+img_h+10;
text_left_1=left_pos+(panel_wid/2)-text_wid;text_left_2=left_pos+(panel_wid/2);

click here to see more...

Tags: panoramapanorama viewview imageimage JavaScriptJavaScript

In this article, I will shows how to use JavaScript to display images continuously in a slideshow presentation format, with a fade effect on image transitions. Any number of images and captions can be used, and timing is adjustable. I hope it will be useful for JavaScript newcomers.  This script is cross compatible from IE 4 to 6 and Netscape 4 to 7. To implement this effect, just paste below code into the <BODY> section of your HTML document. 

<SCRIPT LANGUAGE="JavaScript">

var Pic = new Array();
Pic[0] = 'http://www.foxarc.com/en/cfxs/images/frames.jpg';
Pic[1] = 'http://www.foxarc.com/en/cfxs/images/masks.jpg';
Pic[2] = 'http://www.foxarc.com/en/cfxs/images/brushes.jpg';
Pic[3] = 'http://www.foxarc.com/en/cfxs/images/cliparts.jpg';
Pic[4] = 'http://www.foxarc.com/en/cfxs/images/text.jpg';
var t;
var j = 0;
var p = Pic.length;
var goNext = 0;
var preLoad = new Array();
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
var ie5=(document.getElementById && document.all);
var ns6=(document.getElementById && !document.all);
nPlus = -5   //the % of fading for each step
speed = 50 //the speed
nOpac = 100
function FadeImg()
{  
     
    if(document.getElementById)
    {       
        imgs = document.getElementById('demo');
 opacity = nOpac + nPlus;
 nOpac = opacity;
 setTimeout('FadeImg()',speed); 
 if(opacity < 5)
 {
  document.SlideShow.src = preLoad[j].src;
    j = j + 1;
         if (j > (p - 1)) j = 0;
 }
     
        if(opacity>100 || opacity<0)
 {
          nPlus=-nPlus;
     }
      
       if(ie5)
       {
        imgs.style.filter="alpha(opacity=0)";
 imgs.filters.alpha.opacity = opacity;
     }
        if(ns6)
     {
        imgs.style.MozOpacity = 0 + '%';
 imgs.style.MozOpacity = opacity + '%';
    }
   }
}

</script>
<table cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td id="demo" width="160" height="110"><img height="110" alt="" width="160" name="SlideShow" src="http://www.foxarc.com/en/cfxs/images/text.jpg" /></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
FadeImg();
</script>

Tags: slide showslide show presentationpresentation imageimage fadingfading effecteffect