About this plugin
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.
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. com/project/supersized/
Why supersized? In my case, I need my background to be full screen and to act like a slideshow.
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($){
jpg'} ], // Theme Options progress_bar: 0, // Timer for each slide mouse_scrub: 0 });
}); [/js]
You can see more options on the plugin page.
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. css
[css]
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;}
important; display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px;}
important;}
png’) no-repeat 100% 0;}
[/css]
js.
Befone any image transition, we hide the hotspots, so the user don’t see it moving.
js beforeAnimation: function(direction){
width()}, 0 );
getField(‘title’))? html(”); }
length){
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.
1: Set up the hotspots. As I said above, I define the top and the left.
[html]
[/html]
png’) center center no-repeat;} [/css]
js file. After the image transition you calculate the sizes, positions, move and show the right hotspots.
progressBar(); // Start progress bar
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.
css(“visibility”, “visible”);
}); [/js]
2: Set a button to show or hide the hotspots. removeClass(“show”);
getField(‘title’); //What hotpots will be show next – This fucntion comes with supersized
css(“visibility”, “visible”);
} else {
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. com/Plugins/Tooltip
tooltip({
track: true,
delay: 0,
showURL: false,
showBody: ” – “,
fade: 250
}); [/js]
Open a colorbox popup when click on the hotspot. com/colorbox
colorbox({ iframe:true,
scrolling:false,
innerWidth:”750px”,
innerHeight:”450px” }); [/js]