顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

2013年8月6日 星期二

jQuery 陣列範例 

     var obj = { one:1, two:2, three:3, four:4, five:5 }; 
     var arr = [ "one", "two", "three", "four", "five" ];

    //取得陣列的值
    alert(arr[0]);

    //使用For迴圈取得陣列的值    
    for( i in arr){
        alert(arr[i]);
    }

    //使用For迴圈取得陣列的值        
    for( i in obj){
        alert(("#" + i) + " :: " + obj[i]);
    }

    //使用each迴圈取得陣列的值    
    $.each(obj, function(i, val) {
       alert(("#" + i) + " : " + obj[i]);
    });
於
標籤：

2013年1月20日 星期日

jQuery教學－ImageFlow相片特效套件

ImageFlow套件
套件名稱：ImageFlow
套件版本：1.2.1
官方網站：http://finnrudolph.de/ImageFlow/Introduction
官方下載：http://finnrudolph.de/ImageFlow/Download

放在<head>.....</head>之間：

參數設定說明：
aspectRatio: 1.964, /* ImageFlow的高度 */
buttons: false, /* 上下張按鈕 */
captions: true, /* 標題顯示 */
imageCursor: 'default', /* 滑鼠游標圖示 */
ImageFlowID: 'imageflow', /* ImageFlow 的ID 名稱 */
imageFocusM: 1.0, /* 圖片的顯示比例 */
imageFocusMax: 4, /* 二邊照片出現的張數 */
imageScaling: true, /* 影像縮放切換 */
imagesHeight: 0.67, /* 影像高度在Div的縮放比例 */
imagesM: 1.0, /* 所有影像的顯示比例 */
onClick: function() { document.location = this.url; }, /* 連結視窗設定 */
opacity: false, /* 透明效果 */
opacityArray: [10,8,6,4,2], /* 透明效果值從　0~10 */
preloadImages: true, /* 預載圖片Bar */
preloadImagesText: 'loading images',/* 預載圖片顯示文字 */
reflectionP: 0.5, /* 圖片高度縮放比例 */
scrollbarP: 0.6, /* 軸捲寬度比例 */
slider: true, /* 顯示捲軸 */
sliderCursor: 'e-resize', /* 捲軸滑鼠圖示 */
sliderWidth: 14, /* 捲軸寬度 */
startID: 1, /* 起始顯示照片的ID */
startAnimation: false, /* 起始動畫效果 */
xStep: 150, /* 圖片x軸間距 */
animationSpeed: 50, /* 圖片轉換的時間 */
singleItemTag: 'IMG', /* 設定項目的名稱　*/
slideshow: false, /* 幻燈片效果 */
slideshowInterval: 2000, /* 幻燈片的時間 */
slideshowLeftToRight: true, /* 幻燈片移動方向，true由左至右，false由右至左 */
cycle: false /* 滑鼠第三鍵切換影像 */

放在<body>.....</body>之間：

參數設定說明：
src：圖片路徑
longdesc：連結網址
alt：圖片顯示標題
title：滑鼠滑入出現提示文字

攝影-無敵鐵金鋼 
    攝影-雙人牌餐具 
    攝影-舒適刮鬍刀 
    攝影-水滴造型香水 
    攝影-萬寶龍鋼筆 
    攝影-陶瓷錶 
    攝影-金黃威士忌 
    攝影-清涼海尼根   
    攝影-德國小金牛皮夾  
    攝影-Dior愛心造型耳環
於
標籤：

jQuery教學－jqeury.height滑動展開iframe高度

其實讓iframe自動長高已不是什麼新技術

放在<head>.....</head>之間：
放在<body>.....</body>之間： 
main.html

news.html
範例http://img.minwt.com/file/sampleView/jQuery/AutoiFrameHeight/iframe.htm
範例下載 http://img.minwt.com/file/sampleView/jQuery/AutoiFrameHeight/AutoiFrameHeight.rar
於
標籤：

jQuery外掛－「SuperResize打造全螢幕背景」適用各瀏覽器

Supersized全螢背景外掛：
適用瀏覽器：IE7.0+、Chrome、Firefox、Safari、Opera
官方網站：http://www.elriks.com/prototypes/index.html
官方展示：http://www.elriks.com/prototypes/lib/scripts/prototypes/_galeries/Supersized/default.htm

Supersized 參數設定：
startwidth: 640 //照片起始長度
startheight: 480 //照片起始寬度
vertical_center: 1 //垂直居中 1居中,0關閉
slideshow: 1 //自動輪播 1開,0關
navigation: 1 //播放控制鈕 1開,0關
transition: 1 //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left //轉場效果
pause_hover: 1 //滑入時停止輪播 1開,0關
slide_counter: 1 //顯示圖片筆數 1開,0關
slide_captions: 1 //圖片名稱
slide_interval: 3000 //轉場時間

Supersized 增加圖片：
加在<div id="supersize">~</div>之間即可，增加圖片img標籤中，可用title來設定圖片名稱。
於
標籤：

jQuery外掛－jQuery Masonry瀑布流版型套件

放在<head>.....</head>之間：
放在<body>.....</body>之間： 



內容1



內容2



內容3



內容4



內容5



內容6
CSS樣式設定，放在<head>.....</head>之間：
啟用Jquery Masonry元件，放在<script>.....</script>之下： 
$(function(){
 $('#_container').imagesLoaded(function () {
        $('#_container').masonry({        
            itemSelector: '.content_box',
            columnWidth: 364,
            animate:true
        });
 });
});


Jquery Masonry參數說明：
imagesLoaded：用來防止計算圖片寬度和高度的錯誤
itemSelector：要套用效果的DIV
columnWidth：欄位寬度，當圖片載入失敗，或是還沒載入時，預設的寬高會以這為主
animate：動態效果

jQuery Masonry套件：
外掛元件：jQuery Masonry
外掛版本：v2.1
官方網站：http://masonry.desandro.com/index.html
於
標籤：

2011年8月19日 星期五

jQuery 語法範例

jQuery 取得所有 input type="text" 的ID 

//抓取ID

    $("input[type^='text']").each( //取得所有 input type=text 的 id

            function (indexs) {

                alert($(this).attr("id"));

            });



    $("textarea").each(         //取得所有 textarea 的 id

            function (indexs) {

                alert($(this).attr("id"));

            });

jQuery 取得所有 input type="text" 及 textarea 並填入資料 

//填入值

      $("input[type^='text']").each( 

            function (indexs) {

                $(this).val('aaaa');

            });

      $("textarea").each( 

            function (indexs) {

                $(this).val('112212121212');

            });

jQuery 取得所有 input type="text" 並置換符號 
    function RPmark() {

        $("input[type^='text']").each( 

                function (indexs) {

                    var Text = $(this).attr("value").replace(/\</g, '&lt;').replace(/\>/g, '&gt;');

                    $(this).val(Text);

                });

        $("textarea").each( 

                function (indexs) {

                    var TAText = $(this).attr("value").replace(/\</g, '&lt;').replace(/\>/g, '&gt;');

                    $(this).val(TAText);

                });

            }
於
標籤：

jQuery 語法範例

解決JavaScript中replace只置換第一個符合的字串問題 

//只有置換的符合的第一個

var s=s.replace('aa','AA');



//把所有符合的字串置換

var s=s.replace(/\你要置換的字串/g,'AA');


針對整個 Form Selectors 的方式寫了一個 function 來掃全部欄位 

$("#news_form :input").each(

function(){

  switch($(this).attr('type')){

    case 'radio':

      /* 取消所有選取 */

      $(this).attr("checked", false);

    case 'checkbox':

      /* 取消所有選取 */

      $(this).attr("checked", false);

    break;

    case 'select-one':

      /* 把 select 元件都歸到選第一項 */

      $(this)[0].selectedIndex = 0;

    break;

    case 'text':

      /* 清空 text 來欄位 */

      $(this).attr("value", "");

    break;

    case 'password':

      /* 清空 password 來欄位 */

      $(this).attr("value", "");

    case 'hidden':

      /*

      * 不清空 hidden，通常保純此欄位      

      */

    case 'textarea':

      /* 清空 textarea 來欄位 */

      $(this).attr("value", "");

    break; 

  }

});

使用Html.TextBox可以透過maxlength屬性來限制字元數 

//限制TextArea字元數 

<script Type="text/javascript">

    function checklength(ctlid, maxlength) {

        if ($("#" + ctlid).text().length > maxlength) {

            $("#" + ctlid).text($("#" + ctlid).text().substring(0, maxlength));

            alert("已超過最大長度!"); return false;

        } 

    }



    $(function () {

        $("#mycomments").keyup(function ()

        { checklength("mycomments", 100); });

    }); 

</script>

防止頁面重複送出使用 jQuery:Validation，前端驗證的極品 jQuery:Validation，利用它來處理防止重複送出的按鈕 

<script type="text/javascript" > 

$('form').validate({ 

    rules: { 

        name: { required: true }, 

        email: { required: true, email: true }, 

        pw: { required: true } 

    }, 

    submitHandler: function (form) 

    { 

        $('form input:submit').attr('disabled', 'disabled'); 

  

        form.submit(); 

    } 

}); 

</script>
於
標籤：

2011年8月8日 星期一

jQuery - javascript 呼叫 Button click

頁面上A.ASPX 
<div style=" display:none"><asp:Button ID="B_AddData" runat="server" Text="觸發" onclick="B_AddData_Click" /></div>



<script type="text/javascript">

    function clickPageButton(buttonID) {

        var pageButton = $get(buttonID);

        pageButton.click();        

    }

</script>

程式 A.ASPX.CS 
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Confi", "if(confirm('請確定資料是否正確')  == true){ clickPageButton('" + B_AddData.ClientID + "');}", true);

於
標籤： ,

2010年9月1日 星期三

jQuery神奇的選擇器(Selector)

就像正規運 算式(Regular Expression)的Pattern match一般，jQuery使用了CSS(Cascading Style Sheet)、XPath(XML Path Language)與自訂等三大類的選擇器(Selector)當做$( )函數的參數，讓我們由複雜多樣的DOM結構裡，快速的找出符合樣式的要素。

使用選擇器的三個基本格式是：
序　格式　　　　　　　　範例　　　　　　　　說明
1　$("HTML標籤")　　　$("div")　　　　　　傳回表示所有div要素的jQuery物件
2　$("#要素的ID")　　　$("#linksLeft")　　　傳回表示<div id="linksLeft">要素的jQuery物件
3　$(".要素的類別")　　　$(".blogname")　　傳回<div class="blogname">要素的jQuery物件

jQuery 怎麼用來「快速選取元素」並且「做一些事情」呢？請看看程式碼：
$("div").addClass("special");

$("div") 　　　　　　　解釋：選取所有 <div>
$("#body") 　　　　　　解釋：選取 id 為 body 的元素
$("div#body") 　　　　解釋：選取 id 為 body 的 <div>
$("div.contents p") 　　解釋：選取 class 為 contents 的 <div> 所包住的所有下層的 <p>
$("div > div") 　　　　解釋：選取被 <div> 包住的下一層 <div>
$("div:has(div)") 　　　解釋：和前一個範例相反，這邊是選取至少有包住一個 <div> 的 <div>

[範例1] 選取所有有 target 屬性的 <a>，並且在其節點下加入一段文字
$("a[target]").append(" (Opens in New Window)");

這是一段原始的 HTML 
jsGears  
Google  
Amazon

選取有 target 屬性並加入文字後的結果：
jsGears  
Google (Opens in New Window)  
Amazon (Opens in New Window)

[範例2] 選取 id 為 body 的元素，並且修改兩個 css 屬性。
$("#body").css({   
  border: "1px solid green",   
  height: "40px"  
});

這是一段原始的 HTML :
  
  ...

選取 id 為 body 的元素並修改 css 後的結果(示意)：
  
  ...

[範例3] 在網頁上的表單送出時加入一個判斷，如果 username 這個欄位是空值的話，就顯示 help 這個區塊內的文字。
$("form").submit(function() {   
  if ($("input#username").val() == "")   
    $("span.help").show();   
});

可作用在類似以下的 HTML，一開始 span.help 是隱藏的，如果沒有輸入 username，才會顯示：
  
  
    
    
  這個欄位必填喔

[範例4] 當 user 點選 id 為 open 的連結時，顯示 id 為 menu 的區塊，並回傳 false 避免瀏覽器真的換頁。
$("a#open").click(function() {   
  $("#menu").show();   
  return false;   
});

可作用在類似以下的 HTML：
  
控制面板

[範例5] 將 id 為 menu 的區塊以下拉布幕的動態效果快速顯示：
$("#menu").slideDown("fast");

可作用在類似以下的 HTML，原本隱藏的選單會以動態下拉的方式顯示出來：

[範例6] 將所有的 <div> 漸變為寬 300px、文字與邊界寬 20px
$("div").animate({   
    width: '300px',   
    padding: '20px'  
  }, 'slow');

可作用在類似以下的 HTML：
  
  Hello world!

PS. jQuery 核心程式的 animate 函數能改變的元素屬性並不多，但是可以透過其他 plugin 提供更多的動態效果。

[範例7] 動態效果的 callback 的範例，將所有的 <div> 以 0.5 秒的動態效果隱藏後，再以 0.5 秒的動態效果顯示。hide() 的第二個參數就是一個 callback 函數，其中 $(this) 是原本程式所處理的各個元素。
$("div").hide(500, function(){   
  // $(this) 是每一個各別的 <div>   
  $(this).show(500);   
});

可作用在類似以下的 HTML：
  
  Hello world!   
  
  
  jsGears.com!

[範例8] 取得 sample.html 並將找出文件內所有 <div> 下一層的 <h1> 填入原本文件 id 為 body 的元素內
$("#body").load("sample.html div > h1");

這是一段原始的 HTML :

sample.html 的片段：
  
  
Hello world!
  
  
This is H2
  
  
jsGears.com!

執行程式碼之後的結果：
  
  
Hello world!
  
  
jsGears.com!

[範例9] 透過 getJSON() 取得 JSON 格式的資料，並透過 callback 函數處理資料
$.getJSON("test.json", function(data){   
  for (var idx in data)   
    $("#menu").append("
  • " + data[idx] + "
    • ");   
    });

    這是一段原始的 HTML：

    test.json 的內容：
    [   
      "Hello world!",    
      "jsGears.com!"  
    ]

    執行程式碼之後的結果：

    [範例10]抓取DIV內容
    onclick="addition('DivSh_Year');"


    [範例11]抓取DIV內容
    onclick="addition(DivSh_Year);"

    於
    標籤：

    jQuery教學-SliderGallery滑動式相本特效應用



    CSS部分
    body{font-family:Arial, Helvetica, sans-serif;}
     ul ,li{ margin:0; padding:0; list-style-type: none; float:left;}
     #showbox{width:360px; border:solid 1px #eee;}
     #showImg , #showImg table{width:360px; height:300px;}
     #imgList{margin-top:10px; margin-left:3px; padding-bottom:10px; overflow:auto;}
     #imgList span{float:left; display:block; width:22px;  margin:2px; line-height:50px;}
     #list{position:relative; float:left; width:350px; height:60px;}
     #list img{width:40px; height:40px;}
     #list{width:300px; float:left; margin:0 2px; overflow:hidden;}
     #list ul{ position:absolute; left:0; top:0; white-space: nowrap;/* 不斷行 */}
     #list ul li{
      display: inline; /* 水平排列 */
      margin:0 4px;
      padding:5px;
      border:solid 1px #eee;
     }
     #list ul li.on{border:solid 2px #ccc;}
     #list ul li img {display: inline-block; /* 水平內顯示為區塊 */}
     /* 秀大圖 */
     #imgB{border:solid 7px #fff;}
     /* 滑入顯示圖片區塊 */
     #overImg{position:absolute; top:-99999; left:-99999; display:none; z-index:100; border:solid 5px #666; padding:5px; background:#fff;}

    HTML的部分


     

     



     

          



        
       
               		    
       

     

     

      
         

        

            

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •       

      •


    轉載自 http://www.minwt.com/?p=1406
    如需範例或DEMO請至原網站瀏覽
    於
    標籤：

    jQuery-將網頁元素名稱標示出來


    不知有沒有人跟我有一樣的困擾? 步入中年後，腦容量似有變小趨勢，每次寫網頁Client Script時，<input>, <select>的欄位名稱老記不住，要用時總是要回HTML Source或用IE Dev Tools去查，查完了一轉頭又忘了，再不然就是切換回Script Editor時搞不清楚剛才寫到哪裡。幾番折騰下來，效率很差，心情很糟。(老了，不中用了~~ 不中用了~~ 不~中~用~了了了了~~~)

    於是我寫了以下的jQuery Plugin，試圖把所有的輸入元素id直接顯示在網頁上，方便對照，也試圖挽救我岌岌可危的事業。
    $.fn.showElemId = function(bgc, fc) {
        return this.each(function() {
            var $elem = $(this);
            //if (!$elem.is(":visible")) return;
            var pos = $elem.offset();
            var html = "" +
            (this.id || "----") +
            "    ";
            $("body").append(html);
        });
    };
    /* 使用範例: $(":text,select").showElemId(); */

    用Hotmail的註冊畫面做個示範(只查:text,select，不包含:button,:password)，如下圖所示，輸入欄位元素名稱一目瞭然，列印出來，就不用每次去HTML Source裡找半天了，真是中年程式開發人員的福音呀

    轉載自 http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/10/13/mark-element-id-with-jquery.aspx
    於
    標籤：

    [jQuery] 如何自動取得所有前端 JavaScript 錯誤以提升網站品質

    這個需求透過 jQuery 來做最方便了，透過 error(fn) 事件即可達成此一目標：
    $(window).error(function(msg, url, line){  
    jQuery.post("/js_error_log.ashx", { msg: msg, url: url, line: line });
    });

    透過這個技巧即可有效獲得即時的前端資訊，看你要儲存到資料庫、EventLog、File、或郵寄出來都可以，不過唯一要小心的地方是當錯誤非常多時，這個錯誤追蹤的量可能會非常大，這時要特別注意程式的寫法，不要因為前端的錯誤槁掛了你的伺服器，而且有查到錯誤就要立即處理，降低錯誤發生的次數與提升網站品質。
    於
    標籤： ,

    2010年8月26日 星期四

    jQuery 外掛 - The Silky Smooth Marquee 文字跑馬燈

    (1)官方網站：remy sharp's b:log
    (2)外掛程式下載：http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
    (3)官方範例：http://remysharp.com/demo/marquee.html
    於
    標籤：

    2010年8月25日 星期三

    JQuery 設計資源連結

    jQuery Cycle Plugin
    jQuery Plugin , 圖片輪播器 , 支援非常多的效果

    jCarousel Lite
    JQuery Plugin , 跑馬燈一種 , 可串接多張圖片或 HTML 內容 , 且中途跑馬時資訊不會間斷 , 不同於 <marquee> 效果

    CSS Dock Menu
    大部分是以 CSS 來模仿 Mac OS 的 Dock Menu , 效果非常順暢 , 但要搭配 JQuery 使用

    ColorBox
    ColorBox 是一套類似 lightbox 的 jquery plugin , 但對於 jquery 1.4 相容性比較好

    jCaption
    jQuery Plugin , 可以把 <img> 中的 alt 的文字變為圖說
    於
    標籤：

    2010年8月11日 星期三

    [jQuery] jquery.scrollable 可以利用鼠標滾輪控制內容顯示


    如果喜歡這類型的控制方法，可以使用mouse wheel 去拉動頁面。更重要的是不影響mouse wheel 正常操作。適當使用可以令website上的控制會更簡單而且可以放更多內容，但又不影響外觀，這是好的工具，值得推薦。
    Demo http://flowplayer.org/tools/scrollable/index.html#
    於
    標籤：

    2010年7月5日 星期一

    jQuery Ajax 使用方法 

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
    <script type='text/javascript'>
        $(function() {

            //XML時解析成XMLDOM，如傳回時已宣告ContentType=text/xml，type="xml"可省略
            $.get("../ReturnDiffType.aspx?t=xml", {}, function(x) { alert($(x).find("Item").text()); }, "xml");
            //JSON時直接解析成物件
            $.get("../ReturnDiffType.aspx", { t: "json" }, function(o) { alert(o.Name + "->" + o.Rating); }, "json");
            //上述寫法也可寫成以下形式
            $.getJSON("../ReturnDiffType.aspx", { t: "json" }, function(o) { alert(o.Name + "->" + o.Rating); });
            //Script時直接執行
            $.get("../ReturnDiffType.aspx", { t: "script" }, null, "script");
            //上述寫法較冗長，故多寫成以下形式
            $.getScript("../ReturnDiffType.aspx?t=script", null);
            //將HTML內容載入<div id="x"></div>中
            $("#x").load("../ReturnDiffType.aspx", { t: "html" }, function(d) { alert('Loaded!'); });
        });
    </script>
    於
    標籤：

    2010年6月14日 星期一

    jquery圖表-Highcharts Demo Gallery-DEMO


    官網在這：What is Highcharts?
    範例：Highcharts Demo Gallery

    若是使用IE請加入這一行

    於
    標籤：

    2010年6月13日 星期日

    漂亮的jQuery Chart Plug-in-Highcharts -jQuery圖表

    無意間在網路上看到這個jQuery的圖表Plug-in，驚嘆於現在Javascript的強大外，也對其蓬勃發展愈來愈有信心，下面先來看看這個圖表工具有多好：

    官網在這：What is Highcharts?
    範例：Highcharts Demo Gallery

    先來看看幾個範例圖表：

    於
    標籤：

    2010年5月22日 星期六

    優秀 jQuery 各式外掛插件 17 個

    隨 著 jQuery 的插件日多，要在官方的 wiki 上找到自己想要的插件已經變得十分困難。所以整理了一份常用的 jQuery plugin列表，方便自己找資料，也順便溫習一下 jQuery ，免得老是重造別人造過的輪子 (重造很易，Fix bug 才要命…)。

    jQuery UI
    由 jQuery 官方所整理的 UI 插件包。包括拖放、排序、Resize、Dialog、Slider等常見UI控件。

    Interface elements for jQuery
    另一個比較老的 jQuery UI控件及特效庫。

    jQuery Plugin and Demo
    幾個十分優秀的 UI Plugin。包括 Block UI、Cycle Plugin、Feed Plugin等。

    SuckerFish Style
    下拉目錄。雖然不是很難做的技術，但能省下很可觀的 Fix bug 的時間。

    jQuery UI Tabs
    已經收錄在官方 UI 插件包。

    jQuery Cycle Plugin
    可以用在 photo gallery 中，極度強大。

    jCarousel
    剛剛要用到這個插件。

    Inner Fade
    無需再用 Flash 來做漸隱漸現的效果囉。

    ThinkBox 3.1
    常用到爆的ThickBox，已經是很完美的版本。

    Validation
    表單驗證

    tablesorter
    表格排序

    Zebra Table
    間條的表格，不錯的效果。

    jQuery Tooltips
    Tooltips

    JQuery Curvy Corners
    圖角效果。雖然不喜歡，但收下來以防萬一有客方要求「Web2.0 Style」….XD

    jQuery Scroll To
    平滑地 scroll to somewhere

    Block UI
    把某個部份 Block 掉的插件，可能有用。

    hoverIntent
    為hover加上delay的功能。
    於
    標籤：

    超過10個 jQuery 相簿、圖庫與秀圖外掛

    Introduction
    A picture is worth a thousand word. No doubt about it. Most of the information based website such as CNN, ESPN, they are all using a massive photo slide show on its front page. It's a very effective method to attract viewers' attention.

    So, here you go. 15 jQuery based photo gallery and sliders. Enjoy.

    jQuery Cycle
    Official Website | Demo
    The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

    Pikachoose
    Official Website | Demo
    Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well... all around easy. Creating an image gallery shouldn't be a complex thing. I've created a new plugin that I'm packaging with PikaChoose called SliderJS.

    s3Slider
    Official Website | Demo
    The s3Slider jQuery plugin is made by example of jd's smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self.

    Galleria
    Official Website | Demo
    Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

    slideViewer
    Official Website | Demo
    slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

    Image Flow
    Official Website | Demo
    Image flow is inspired by Apple's cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

    jQuery Gallery Scroller
    Official Website | Demo
    jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

    Spacegallery
    Official Website | Demo
    I particularly love this one. It's really cool. If you are familair with Apple's mac os leopard. Yes, this image gallery display photo just like the time machine does.

    Easy Slider
    Official Website | Demo
    Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

    jFlow
    Official Website | Demo
    A pretty neat photo slider. It featured in nettut, if you try to make yourself a photo slider. Visit this site.

    Supersized
    Official Website | Demo
    A fullscreen photo gallery. It resizes images to fill browser while maintaining image dimension ratio. No extra whitespace, no scrollbars - the entire browser window is always filled.

    Simple jQuery Slideshow
    Official Website | Demo
    A simple tutorial, and it shows us how to create a really simple jquery photo slideshow.

    CrossSlide
    Official Website | Demo
    CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (a lot.)

    Innerfade
    Official Website | Demo
    InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
    於
    標籤：
    訂閱： 文章 (Atom)