內容簡介
創建映像地圖本來就很容易，對吧？但是，當您需要全屏幕背景並且需要設置某些圖像在上方時，應該怎樣做呢？
步驟 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
外掛標籤
開發者團隊
原文外掛簡介
It’s easy to create an image map, right? But, what you do when you want your background to be full screen? And you need to set some images above.
Step 1: Get jQuery (can be done here: http://jquery.com). Now a days you use it to everything, we can’t live without it.
Step 2: If you Google it, you will find some scripts that will help you define a full screen background. I used supersized, that can be download here: http://www.buildinternet.com/project/supersized/
Why supersized? In my case, I need my background to be full screen and to act like a slideshow.
Step 2.2: Important options. Set “autoplay: 0”, the image only changes on button click. Set “horizontal_center: 1”, to set the image at the center of the browser. Set a title in a descending order.
I set a title to know what hotspots I need to show.
[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]
You can see more options on the plugin page.
Optinal Step 2.3: As you can see, I set some thumbnails with mouse event. To do this, you need to set the “thumb:” options of the supersized configurations.
Then you set the HTML. [html]
[/html]
And the css. I set it on the 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]
Step 3: You need to do some changes in supersized.shutter.js.
Befone any image transition, we hide the hotspots, so the user don’t see it moving.
[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(api.getField(‘title’)) : $(vars.slide_caption).html(”); }
// Update slide number if (vars.slide_current.length){
$(vars.slide_current).html(vars.current_slide + 1); /* ADD THIS CODE */ $(".image_map").css("display", "none"); $(".image_map").css("visibility", "hidden"); /* END ADD THIS CODE */
} [/js]
Step 4 This step is where the magic happens.
To calculate the distance, I set the percentage from the center and calculate that percentage in pixels. Example: Image width = 400px Image height = 400px Image center vertical = 200px Image center horizontal = 200px
Horizontal Percentage Distance from center = 20% Horizontal Distance from center in pixels = Image width – Percentage Distance = 400px-20% = 80px
So, the hotspots is positioned 80px from the center.
After that, you need to see if the hotspot is position to the left or to the right. To the left you set a negative percentage, to the right, you set it positive.
At this point all the hotspots are at the center of the image. Then you position all the hotpots assigning the calculated value to the margin.
Example: Horizontal Distance from center in pixels = 80px Margin-left: -80px
You get the current image title to know what hotspots to show and it is good to go.
Step 4.1: Set up the hotspots. As I said above, I define the top and the left.
[html]
[/html]
[css] body, html{margin:0; padding:0; overflow:hidden;} .image_map{width:100%; height:100%; z-index:2000; position:absolute; display:none;} .image_map a{position:absolute; z-index:9000; width:20px; height:20px; background:url(‘../images/icons/icon_yellow.png’) center center no-repeat;} [/css]
Step 4.2 Still in the supersized.shutter.js file. After the image transition you calculate the sizes, positions, move and show the right hotspots.
[js] supersized.shutter.js /* After Slide Transition —————————-*/ afterAnimation : function(){ if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar
/* ADD THIS CODE */ /* HOTSPOTS */ var imageId = "#supersized .activeslide img";
//Image style var style = $(imageId).attr("style"); var partsArray = style.split(':'); var w = 0; //width var h = 0; //height var t = 0; //top var l = 0; //left var temp = 0; var partsStyle = style.split(' '); for(var i=0; i
}); $('.image_map a').css('margin-left', function(i, v) { var marginLeft = $(this).attr('left'); var newMLP = Math.abs(parseInt(marginLeft)); var newML = w * (newMLP / 100); if(parseInt(marginLeft) > 0) return newML+"px"; else return "-"+newML+"px"; }); /* END HOTSPOTS */ var next_map = "#" + api.getField('title'); $(next_map).css("display", "inline"); $(next_map).css("visibility", "visible");
/* END ADD THIS CODE */
}, [/js]
Step 5: When the browser is resized the hotspots are hidden and the “show hotspots” button changes. So, when the user clicks to show the hotspots, they are positioned to the right place.
[js] $(window).resize(function() { $(‘#show’).html(“show hotspots”); $(‘#show’).addClass(“show”); $(‘#show’).removeClass(“hide”); $(“.image_map”).css(“display”, “none”); $(“.image_map”).css(“visibility”, “visible”);
}); [/js]
Step 5.2: Set a button to show or hide the hotspots. [js] $(‘#show’).click(function() { var state = $(this).attr(‘class’); if(state==”show”) { repositionHotspots(); //function that position the hotspots $(this).html(“hide hotspots”); $(this).addClass(“hide”); $(this).removeClass(“show”);
var next_map = “#” + api.getField(‘title’); //What hotpots will be show next – This fucntion comes with supersized
$(next_map).css(“display”, “inline”); $(next_map).css(“visibility”, “visible”);
} else {
$(this).html(“show hotspots”); $(this).addClass(“show”); $(this).removeClass(“hide”); $(“.image_map”).css(“display”, “none”); $(“.image_map”).css(“visibility”, “hidden”); } }); [/js]
Opticional Steps:
This steps were made so the user have a better experience when surfing the website.
Show a tooltip with the name of the product. From here: http://docs.jquery.com/Plugins/Tooltip
[js] $(‘.image_map a’).tooltip({
track: true,
delay: 0,
showURL: false,
showBody: ” – “,
fade: 250
}); [/js]
Open a colorbox popup when click on the hotspot. From here: http://colorpowered.com/colorbox
[js] $(“.image_map a”).colorbox({ iframe:true,
scrolling:false,
innerWidth:”750px”,
innerHeight:”450px” }); [/js]
