前言介紹
- 這款 WordPress 外掛「WP Supersized Image Map」是 2012-09-09 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2012-09-10，距離現在已有 4621 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 3.0 以上版本才可以安裝。
- 有 2 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
imamap | Image Map | supersized |
內容簡介
創建映像地圖本來就很容易，對吧？但是，當您需要全屏幕背景並且需要設置某些圖像在上方時，應該怎樣做呢？
步驟 1：獲取 jQuery（可在此處完成： http://jquery.com）。現今您可以使用它去實現一切，我們不能沒有它。
步驟 2：如果您在 Google 上搜尋，您會發現一些腳本可以幫助您定義全屏幕背景。我使用了 Supersized，它可以在此下載：http://www.buildinternet.com/project/supersized/
為什麼是 Supersized？在我的情況下，我需要我的背景全屏幕並且像一個投影片放映。
步驟 2.2：重要的選項。設置“autoplay：0”，僅在按鈕單擊時播放圖片。設置“horizontal_center：1” 將圖像設置在瀏覽器中央。以降序方式設置標題。
我設置了一個標題以知道我需要顯示哪些熱點。
[js] jQuery(function($){
$.supersized({ autoplay: 0, //Only plays on button click horizontal_center: 1, //Defines the image at the center // Functionality slide_interval: 3000, // Length between transitions transition: 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed: 3000, // Speed of transition // Components
slide_links: 'blank', // Individual links for each slide (Options: false, 'number', 'name', 'blank') slides: [ // Slideshow Images {image: 'images/backgrounds/Frato-795531.jpg', title: 'hotspots_14', thumb: 'images/thumb/ambi_795531.jpg'}, {image: 'images/backgrounds/Frato-794891.jpg', title: 'hotspots_13', thumb: 'images/thumb/ambi_794891.jpg'}
], // Theme Options
progress_bar: 0, // Timer for each slide
mouse_scrub: 0 });
}); [/js]
您可以在插件頁面上查看更多選項。
選擇性步驟 2.3: 如您可以看到，我設置了一些縮略圖與滑鼠事件。要做到這一點，您需要在 Supersized 配置的“thumb:”選項中進行設置。
然後，您設置 HTML。 [html]
[/html]
和 CSS。我將它設置在 Supersized.shutter.css 中。
[css]
thumb-tray-wrapper{width:452px; height:60px; position:absolute; text-align:center; bottom:58px!important;
left:50%; z-index:3000; padding:0 0 0 32px; margin:0 0 0 -250px;}
thumb-tray{overflow:hidden; width:427px; height:59px; padding:0;}
ul#thumb-list{width:1500px !important; display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px;}
ul#thumb-list li{list-style:none; background:none; display:inline; width:91px; height:46px; overflow:hidden; float:left; margin:7px 7px; padding:0; display:block !important;}
thumb-back{left:0; background: url(‘../img/btn_play.png’) no-repeat 0 0;} thumb-forward{right:0; background:url(‘../img/btn_play.png’) no-repeat 100% 0;}
[/css]
步驟 3：您需要在 Supersized.shutter.js 中進行一些更改。
在任何圖像轉換之前，我們隱藏熱點，這樣用戶就看不到它移動了。
[js] supersized.shutter.js beforeAnimation : function(direction){
if (api.options.progress_bar && !vars.is_paused) $(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 );
/* Update Fields —————————-*/ // Update slide caption if ($(vars.slide_caption).length){ (api.getField(‘title’)) ? $(vars.slide_caption).html
原文外掛簡介
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「WP Supersized Image Map」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。