automated maps and overlays in js
This commit is contained in:
+57
-6
@@ -1,9 +1,11 @@
|
||||
$(document).ready(function() {
|
||||
console.log("ready");
|
||||
|
||||
var _current_pages = -1,
|
||||
var _current_pages = 0,
|
||||
_page_left_bg, _page_right_bg,
|
||||
_$page_left = $('#page-left'), _$page_right = $('#page-right'),
|
||||
_$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
|
||||
_$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
|
||||
_bgs_prefix = "images/pages/";
|
||||
|
||||
// ____ _ __
|
||||
@@ -13,7 +15,7 @@ $(document).ready(function() {
|
||||
// /___/_/ /_/_/\__/
|
||||
|
||||
function init(){
|
||||
console.log("init", _$page_left);
|
||||
console.log("init", _PAGES[0].bg);
|
||||
initkeyboard();
|
||||
changePages();
|
||||
};
|
||||
@@ -41,13 +43,62 @@ $(document).ready(function() {
|
||||
|
||||
function changePages(){
|
||||
console.log("changePages");
|
||||
_page_left_bg = _bgs_prefix+_PAGES[_current_pages];
|
||||
_page_right_bg = _bgs_prefix+_PAGES[_current_pages+1];
|
||||
_page_left_bg = _bgs_prefix+_PAGES[_current_pages].bg;
|
||||
_page_right_bg = _bgs_prefix+_PAGES[_current_pages+1].bg;
|
||||
console.log(_page_left_bg+" | "+_page_right_bg);
|
||||
|
||||
_$page_left.css({'background-image': "url("+_page_left_bg+")"});
|
||||
_$page_right.css({'background-image': "url("+_page_right_bg+")"});
|
||||
_$page_left
|
||||
.css({'background-image': "url("+_page_left_bg+")"})
|
||||
.removeClass(pageClassToRemove)
|
||||
.addClass('page-'+_current_pages);
|
||||
_$page_right
|
||||
.css({'background-image': "url("+_page_right_bg+")"})
|
||||
.removeClass(pageClassToRemove)
|
||||
.addClass('page-'+(_current_pages+1));
|
||||
|
||||
updatePagesOverlays();
|
||||
};
|
||||
|
||||
function pageClassToRemove(){
|
||||
var c = $(this).attr('class').match(/page-+\d+/);
|
||||
if(c && c.length)
|
||||
return c[0];
|
||||
};
|
||||
|
||||
function updatePagesOverlays(){
|
||||
console.log("updatePagesOverlays");
|
||||
|
||||
// remove all pages overlays
|
||||
$('.overlay, .maps',_$page_left).children().remove();
|
||||
$('.overlay, .maps',_$page_right).children().remove();
|
||||
|
||||
console.log("Overlays", _PAGES[_current_pages].overlays);
|
||||
// build page_left overlays
|
||||
for (var map in _PAGES[_current_pages].overlays) {
|
||||
if (_PAGES[_current_pages].overlays.hasOwnProperty(map)) {
|
||||
map = _PAGES[_current_pages].overlays[map];
|
||||
console.log("Map",map);
|
||||
_$maps_left.append(
|
||||
$('<div>')
|
||||
.addClass("map")
|
||||
.attr('overlay', map.over)
|
||||
.css({
|
||||
"left":map.x,
|
||||
"top":map.y,
|
||||
"width":map.w,
|
||||
"height":map.h
|
||||
})
|
||||
.bind("mouseover", function(e){
|
||||
$(this)
|
||||
.parents('.page').find('.overlay')
|
||||
.css({
|
||||
// 'background-color':"red",
|
||||
'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// __ __ __ __
|
||||
|
||||
Reference in New Issue
Block a user