close
Blogtrottr
綠色工廠 Easylife Blog
本站蒐藏最多最實用的綠色軟體與免安裝軟體。生活資訊豐富,愛美食愛攝影,更愛騎著單車遊山玩水。技能上分享Linux使用的經驗與小技巧。 
Copywriters are the smartest people online

There are two great reasons to become a professional copywriter. Find out today and enroll in this $197 online course.
From our sponsors
thumbnail Hi Slider 1.0.2 - JQuery相簿工具,輕鬆製作不求人
Sep 2nd 2013, 00:21, by chiahsin.liu@gmail.com (哇哇)

Hi Slider CSS相簿製作

社群網路很發達,大家要傳照片真的不怕沒地方,不過若要有好看的相簿,自己製作還是最有趣的,Hi Slider 是一款使用 JQuery 的相簿製作工具,透過軟體來調整圖片的擺放、播放轉場特效,更有上下張的圖片預覽選單,不用五分鐘就可以製作出一本專業的網路相簿,若是你想要相簿與眾不同的話,這工具還內建了許多不同的範本可以套用,推薦自己試試看唷!

先給大家看看官方的 Demo:http://www.hislider.com/showcase.html

Hi Slider 製作流程

Hi Slider CSS相簿製作

第一次執行 Hi Slider 建立一個新的檔案,完成的作品也可以另存新檔,之後讀取檔案就可以直接編輯,算是頗方便的。

Hi Slider CSS相簿製作

接著要設定相簿的大小,以像素為單位,這個之後似乎無法更改,若是所設定大小覺得不好看,之後必須建立新的檔案。第二點要注意的就是占片展示的型態,分別為照片全滿、自動調整與調整圖片長寬,個人是建議第一種,這之間的差異大家實作看看就知道了,而最不建議的就是最後一種,因為會把圖片用變形,一點都沒有相簿的感覺。接下來就可以加入圖片、Youtube、vimeo 的影片,並且設定基本的資訊等等。

Hi Slider CSS相簿製作

內建了許多種的轉場效果,有些真的是簡單又好看,有些是太過華麗反而會頭暈,可以選擇都用同一種的,讓他套用到所有的相片,或是選擇用自動的方式。

Hi Slider CSS相簿製作

完成基本的設定之後就可以建立相簿了,會開始執行一些基本的設定,包含產生縮圖等等。

Hi Slider CSS相簿製作

最後會有完整的編輯畫面,可以填寫每一張相片的名稱、簡易說明,每一張相片能夠調整自己的轉場,並且可以設定點擊照片後的動作,包含了不執行任何動作、開啟網址、呼叫 Javascrit function 與使用 Light box 開啟圖片。在側邊欄可以選用 Hi Slider 內建的六種相簿模板,每一種模板都還有三到五種的風格可以套用,此外還有更進階的自己調整,稍微懂得 CSS 的人絕對可以製作出獨一無二的相簿!

我所製作的 Demo:這裡

http://www.hislider.com/

Hi Slider 1.0.2.7z(Hotfile下載)
Hi Slider 1.0.2.7z(MediaFire下載)
Hi Slider 1.0.2.7z(ZippyShare下載)
Hi Slider 1.0.2.7z(DepositFiles下載)
Hi Slider 1.0.2.7z(Hami+下載)
檔案大小:20.4 MB

若是喜歡這篇文章的話,也請點個讚給綠色工廠支持!加入綠色工廠粉絲團隨時追蹤最新動態!


This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 omoss 的頭像
    omoss

    中視聶小倩線上看 , 聶小倩線上看第二集 , 聶小倩 中視 , 聶小倩電視劇 , 聶小倩

    omoss 發表在 痞客邦 留言(0) 人氣()