http://dimsemenov.com/plugins/royal-slider/wordpress/
http://codecanyon.net/item/royalslider-touchenabled-jquery-image-gallery/461126?ref=Semenov
有在注意國外 wordpress 市集的朋友,應該有發現到不管是 theme 還是 plugin,功能都相當的全面且完整,小弟也常常購買相關產品,的確幫了我不少的忙。
然而語系的整理往往會佔據我開發上的許多時間,再加上自己本身也踩過幾次地雷,買到不堪用的外掛卻無法退費,demo 頁面也只能看到前臺卻看不到後臺,能夠評估是否值得購買的中文說明往往都是對岸同胞的 Google 翻譯火星文,
於是我就想如果有更清楚的說明以及前後臺的實際操作畫面,是否能幫助更多朋友來使用這些方便的工具,所以我把自己曾購買過並已經使用在好幾個專案中的工具整理了一下,生出了這系列的廣告文加中文語系檔的付費下載,希望能幫助到有需要的朋友,也能幫助到自己的荷包XD~
無論是在那一種類型的網站中,圖像的呈現往往是關鍵,尤其是大面積的輪播廣告,更是是否能在第一時間吸引使用者的主要因素,也因此透過豐富的互動方式來呈現精彩的圖片內容,是每一個網站的基本配備。
今天要介紹的這支外掛 RoyalSlider ,事實上跟目前市集名列前茅的產品如 Slider Revolution 、LayerSlider 相比,它比較沒有那麼多的轉場特效跟圖層設定,乍看下可能會覺得它不夠酷炫,但因為我比較講究實用,太多酷炫的效果可能會讓老電腦跑不動,所以我最常用的還是它。
另外一個吸引我的因素,除了它能在手機裝置上完整呈現外,還支援觸碰手勢操作,也就是說它可以提供手機裝置的使用者更接近於原生 APP 的使用體驗。
其它的特色,它在官網上洋洋灑灑的列快 30 點,有興趣的朋友可以上去看看。以下就我自己的使用經驗,整理出最常使用的三大特色,並附上展示頁面與後臺介面操作,讓有需要的朋友可以快速了解 RoyalSlider 的基本功能。
使用真實世界的例子
滑塊,這裡列出的,是定制設計,並通過它們的作者有版權的。列表包含了HTML和WordPress版本創建的兩個幻燈片。
- LandRover.co.uk。
- 藝術學校獸醫。
- 牛津Summerfuel。
- 通過TouchPress迪斯尼動畫的應用程序(視頻和文字滑塊)。
- 絲綢整蠱 -小型畫廊,裡面自定義的CSS動畫的內容。
- NYC.gov -主頁新聞旋轉木馬。
- 可口可樂公司。
- 蝙蝠俠:阿卡姆騎士 -媒體庫。
- CASADEI -時尚品牌主頁幻燈片。
- Truffol -產品推廣的畫廊。
- 真正的好 -家具設計工作室的網站最小的畫廊。
- 斯德哥爾摩設計實驗室。
- 火花品牌代理 -投資組合畫廊與附近的幻燈片。
- Autoblog簡體中文版簡單的畫廊。
- 早安-數碼代理機構。
- Braastad白蘭地主頁,產品頁。
- 奧迪微型。
- Multiplayer.it – 3圖像中可見一次。
- Caiphotography.co.uk -漂亮的與鄰近的圖像的自定義皮膚。
- Regentaucher攝影 -全寬主頁畫廊。
- 佩普卡斯滕 -美麗的攝影,100%的寬度和窗口的高度。
- 波特先生。
- Substrakt設計工作室 -用CSS過渡添加額外的動畫層在滑蓋元素很好的例子。
- Mappeditions.com -全寬畫廊。
- 橡樹設計工作室 -全屏滑塊展示工作室項目。
- Foursonsinteriors.com -使用動畫塊的很好的例子。
- 世界Bessy.com -電子商務,用作主頁促銷和作為產品滑塊。
- ibrowsergame.it -簡單,但與左側縮略圖功能的例子。
- 柴油VECTR耳機運動,全屏畫廊。
- 歐瑞蓮運動(東歐) -在滑塊熱點。
- 拉爾夫·勞倫 -促銷畫廊。
- 在Instagram的畫廊好胃口 數字雜誌(2013年8月號)和有線(2013年5月發行,並進一步),發布為iOS應用。
- Userbra.in -只要與設計工作室,使偉大的應用程序的網站動畫塊幻燈片。
- 馬里蘭大學 -簡單的圖片庫。
- 法拉利Californiaŧ -畫廊與全屏選項。
RoyalSlider特點
看看由DailyJS插件檢討,如果您對代碼質量問題或訪問RoyalSlider網站全功能列表。
- 觸摸適用於iOS(所有版本),Android 2.3以上版本,IE10,IE11,黑莓等操作系統和瀏覽器支持觸控或指針事件導航支持。
- 絕對每張幻燈片中的任何HTML內容和每個縮略圖(或標籤)。
- 智能懶加載 – 在後台加載圖像附近,因此用戶無需每次都等待和圖像都可以瞬間。你可以設置多少圖像選項預加載。可以禁用。
- 超級流暢的硬件加速CSS3過渡。
- 全屏功能,以原生HTML5全屏支持。完美的,你要顯示的高分辨率攝影照相館。
- 內存管理 – 只保留幾張幻燈片中顯示列表。
- 在幻燈片YouTube和Vimeo的視頻。
- 深層鏈接 – 鏈接URL從特定的幻燈片。
- 速度可調,過渡和寬鬆的每個標題或幻燈片。
- 每張幻燈片的靜態內容是允許的。查看演示與靜態內容。
- 自定義動畫效果HTML字幕(淡入淡出,移動頂部,向右移動…)。
- 移動或淡出過渡幻燈片。
- 所有的起動模板響應向下移動。縮略圖和幻燈片,可以動態調整大小..
- 用刷卡的速度幻燈片。
- 利用能力鼠標拖動刪除導航。
- SEO優化和語義,圖像是可轉位,全部為標記的標籤名稱,標題可以使用任何你想要的標籤(“H1”,“H2”,“P”……)。
- 自動幻燈片上懸停可選暫停。
- 公共方法,屬性和回調(去滑動,播放幻燈片等)。包括方法來動態地添加或刪除幻燈片。
- 設置開始幻燈片指數和幻燈片之間的間距。
- 滑塊可以放在收藏夾腳本中,像Magnific酒店的彈出。查看滑塊在燈箱例子。
- 可以使用Ajax來加載容易,有destroy()方法。
- 自定義的界面(添加/刪除箭,子彈)。
- 縮略圖,標籤或子彈進行導航。
- 基於物理學的觸摸縮略圖,圖片滾動,可以放在任何地方頁和集裝箱上的任何HTML裡面的內容。
- 縮略圖可以垂直或水平放置,並且可以從滑塊分別調整。
- 多個滑塊允許在一個頁面上。
- 自定義縮放模式的圖像 – 融入區域,適合面積只有當圖像較小,填補區域。
- 與所有主要的瀏覽器(包括IE7至IE9,Chrome瀏覽器,火狐,Safari和Opera)兼容
- Photoshop中(.PSD)皮膚文件包括在內。
- 任何HTML內容可以放在裡面的幻燈片。
- 擴展HTML文檔。
- 你可能會問一個問題上支持論壇關於實施,請注意,支持不包括安裝或定制服務。
- 更新是永久免費。
你必須登入才能發表留言。