[jQuery]照片展示animate左右及上下移動

在前一篇[jQuery]利用animate來製作左右移動圖片展示器有利用jQuery來製作Animate效果,來製作左右移動圖片的照片或產品展示器,不過就只能針對同種分類或同性資的照片來做效果,如果有多種分類照片或產品就需要再做一份一樣的內容,這裡提供一個解決的方案,再做一次Animate,不過這次是上下移動來選擇不同列的圖片(照片)資料。

不同分類的圖片,利用不同的ul來分開,然後在ul的前面再加上一個Div來做上下移動的框架,左右移動則是利用ul這個tag,當移動到那一列的框架,把index記錄起來,如此左移及右移按鈕才可針對目前列來做移動。

ul及img都有title這個屬性,所以利用此屬性來當上方分類名稱。

效果截圖如下:

jQueryAnimate3.png

Read More

[jQuery]利用animate來製作左右移動圖片展示器

這個範例應該有很多人做過了,十分實用,如果把圖片縮小些,然後再加上燈箱的效果,應該可以拿來當展示產品或是照片等資訊,這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播來做修改的。

jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback])

想法,外層利用一個Div框住要製作動畫的內容,設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel,如此可以把元件浮在最外層Div框的相對位置。

需要二個按鈕,浮在左邊及右邊,設定動作向左移及向右移。

畫面如下:範例網址

img元件設定title屬性的話,那文字會顯示在圖片下方一條bar上

jQueryAnimate1.png

Read More

[jQuery]淡出fade-Out,淡入fade-In及Ajax json資料範例

在使用Ajax功能時,一般規劃大都會是清空原本資料區域,顯示Loading畫面,取得資料及處理,然後把Loading移除後顯示回傳的資料,而以下這個範例會再多二個效果,在清空原本資料區域前先做淡出效果,而在取回資料顯示之前,做淡入的效果。

所以效果顯示的順序會是:

jQuery淡入淡山Ajax流程

而在資料傳遞方面則使用格式json,在取回json格式的資料後,依json Array使用for迴圈一個個附加append到資料區域裡。

Read More

[ExtJS]使用PHP上傳檔案圖片-WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

這個範例是跟據之前的ExtJS-CKEditor上傳檔案及圖片使用jsp的方法改寫的,裡面可能有需多jsp的概念存在,不過在php上傳時是沒有問題的,不同於jsp範例,此處直require_once設定檔進來,而不使用讀取外部設定檔的方式。在使用上要修改CKConfig三個上傳參數,指定正確的url路徑。

                    filebrowserUploadUrl : 'CKEditorUpload.php?Type=File',   
                    filebrowserImageUploadUrl : 'CKEditorUpload.php?Type=Image',   
                    filebrowserFlashUploadUrl : 'CKEditorUpload.php?Type=Flash',

詳細的說明請參考[ExtJS]WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

ExtJS外掛CKEditor使用PHP上傳檔案或圖片

Read More

[ExtJS]使用JSP上傳檔案圖片-WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

承前一篇使用Servlet上傳檔案,此篇改寫Servlet使用JSP來上傳圖片、Flash或檔案,取得設定檔部份由web.xml設定改成讀取外部properties設定檔,在前端javascript部份只需要修改CKConfig裡的上傳使用的三個參數就可以了。

          filebrowserUploadUrl : 'CKEditorUpload.jsp?Type=File',   
          filebrowserImageUploadUrl : 'CKEditorUpload.jsp?Type=Image',   
          filebrowserFlashUploadUrl : 'CKEditorUpload.jsp?Type=Flash',

CKEditorJSP.png

CKEditorJSP-ImageUpload3.png

CKEditorJSP-ImageUpload.png

CKEditorJSP-ImageUpload2.png

Read More