<%@ Page Language="C#" MasterPageFile="~/ImageSwitch/ImageSwitch.master" AutoEventWireup="true" CodeFile="Examples.aspx.cs" Inherits="ImageSwitch_Examples" Title="Untitled Page" %> Groject - Jquery.ImageSwitch - Examples

Examples

Bellow are some of the combination you could do with ImageSwitch(so far) with the code to demonstrate it.

List Tab
Fade In
Fly In
Fly Out
Flip In
Flip Out
Scroll In
Scroll Out
Single Door
Double Door

Fade in

TemplateImg
  • Default Setting
    $("Img").ImageSwitch({Type:"FadeIn", NewImage:"NewImg.gif"});
  • Not fade out the first image
    $("Img").ImageSwitch({Type:"FadeIn", NewImage:"NewImg.gif", EffectOriginal: false});
  • Full customize
    $("Img").ImageSwitch({Type:"FadeIn", NewImage:"NewImg.gif", EffectOriginal: false, Speed: 2000});

Fly in

TemplateImg

Fly Out

TemplateImg

Flip In

TemplateImg
  • Default Setting
    $("Img").ImageSwitch({Type:"FlipIn", NewImage:"NewImg.gif"});
  • With customize end position
    $("Img").ImageSwitch({Type:"FlipIn", NewImage:"NewImg.gif", EndTop: -150, EndLeft: -0});
  • With customize speed
    $("Img").ImageSwitch({Type:"FlipIn", NewImage:"NewImg.gif", EndTop: -50, EndLeft: 300, Speed:2000});
  • With customize start opacity
    $("Img").ImageSwitch({Type:"FlipIn", NewImage:"NewImg.gif", StartOpacity: 1, EndTop: 100, EndLeft: 200, StartOpacity: 1});

Flip Out

TemplateImg
  • Default Setting
    $("Img").ImageSwitch({Type:"FlipOut", NewImage:"NewImg.gif"});
  • With customize end position
    $("Img").ImageSwitch({Type:"FlipOut", NewImage:"NewImg.gif", EndTop: -150, EndLeft: -0});
  • With customize speed
    $("Img").ImageSwitch({Type:"FlipOut", NewImage:"NewImg.gif", EndTop: -50, EndLeft: 300, Speed:2000});
  • With customize end opacity
    $("Img").ImageSwitch({Type:"FlipOut", NewImage:"NewImg.gif", EndOpacity: 1, EndTop: 100, EndLeft: 200, EndOpacity: 1});

Scroll In

TemplateImg
  • Default Setting
    $("Img").ImageSwitch({Type:"ScrollIn", NewImage:"NewImg.gif"});
  • Without effect original layer
    $("Img").ImageSwitch({Type:"ScrollIn", NewImage:"NewImg.gif", EffectOriginal: false});
  • Different Direction
    $("Img").ImageSwitch({Type:"ScrollIn", NewImage:"NewImg.gif", Direction:"RightLeft"});
  • With full customize
    $("Img").ImageSwitch({Type:"ScrollIn", NewImage:"NewImg.gif", Direction:"DownTop", EffectOriginal: false, StartOpacity:1});

Scroll Out

TemplateImg
  • Default Setting
    $("Img").ImageSwitch({Type:"ScrollOut", NewImage:"NewImg.gif"});
  • Without changing opacity
    $("Img").ImageSwitch({Type:"ScrollOut", NewImage:"NewImg.gif", EndOpacity:1});
  • Different Direction
    $("Img").ImageSwitch({Type:"ScrollOut", NewImage:"NewImg.gif", Direction:"RightLeft"});
  • With full customize
    $("Img").ImageSwitch({Type:"ScrollOut", NewImage:"NewImg.gif", Direction:"DownTop", EndOpacity:1});

Single Door

TemplateImg
  • Default Setting
    $("Img").ImageSwitch({Type:"SingleDoor", NewImage:"NewImg.gif"});
  • With door image
    $("Img").ImageSwitch({Type:"SingleDoor", NewImage:"NewImg.gif", Door1: "url(images/metal.jpg) repeat"});
  • Different Direction
    $("Img").ImageSwitch({Type:"SingleDoor", NewImage:"NewImg.gif", Direction:"RightLeft"});
  • With full customize
    $("Img").ImageSwitch({Type:"SingleDoor", NewImage:"NewImg.gif", Direction:"DownTop", Door1: "url(images/metal.jpg) repeat"});

Double Door

TemplateImg
  • Default Setting
    $("Img").ImageSwitch({Type:"DoubleDoor", NewImage:"NewImg.gif"});
  • With door image
    $("Img").ImageSwitch({Type:"DoubleDoor", NewImage:"NewImg.gif", Door1: "url(/ImageSwitch/images/metal.jpg) repeat", Door2: "url(/ImageSwitch/images/metal.jpg) repeat"});
  • Different Direction
    $("Img").ImageSwitch({Type:"DoubleDoor", NewImage:"NewImg.gif", Direction:"TopDown", Door1: "#EBC012", Door2: "#EBC012"});
  • With EffectOriginal set to false
    $("Img").ImageSwitch({Type:"DoubleDoor", NewImage:"NewImg.gif", Direction:"DownTop", EffectOriginal: false});