').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-image':'url(images/vectos/'+$(this).attr('overlay')+')'});}));}}};function initkeyboard(){keyboardJS.bind('right',function(event){nextPages();});keyboardJS.bind('left',function(event){prevPages();});};init();});
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 4d23dac..bfc4edf 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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(
+ $('
')
+ .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')+')'
+ });
+ })
+ );
+ }
+ }
};
// __ __ __ __
diff --git a/js/pages.json b/js/pages.json
index 4aa5cbf..1109d90 100644
--- a/js/pages.json
+++ b/js/pages.json
@@ -1,38 +1,153 @@
var _PAGES=[
- "00_1couv.jpeg",
- "00_1couvV.jpeg",
- "01_anan.jpeg",
- "02_TH.jpeg",
- "03_ologyOf.jpeg",
- "04_chance.jpeg",
- "05_Stories.jpeg",
- "06_byGeorge.jpeg",
- "07_Copyright.jpeg",
- "08_Brecht.jpeg",
- "100_Williams.jpeg",
- "104_Wolff.jpeg",
- "108_Young.jpeg",
- "110_StraightLine.jpeg",
- "112_Portrait?.jpeg",
- "113_4couv.jpeg",
- "114_4couv.jpeg",
- "12_Bremer.jpeg",
- "14_Brown.jpeg",
- "23_Byrd.jpeg",
- "26_Cage.jpeg",
- "28_deMaria.jpeg",
- "32_Flynt.jpeg",
- "37_Ono.jpeg",
- "39_HIggins.jpeg",
- "41_Ichiyanagi.jpeg",
- "45_Jennings.jpeg",
- "48_Dennis.jpeg",
- "54_DingDong.jpeg",
- "56_Johnson.jpeg",
- "58_MacLow.jpeg",
- "79_Maxfield.jpeg",
- "90_Simone.jpeg",
- "92_Paik.jpeg",
- "94_Riley.jpeg",
- "99_Rot.jpeg"
-]
+ {
+ "bg":"",
+ "overlays":[]
+ },
+ {
+ "bg":"00_1couv.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"00_1couvV.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"01_anan.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"02_TH.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"03_ologyOf.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"04_chance.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"05_Stories.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"06_byGeorge.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"07_Copyright.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"08_Brecht.jpeg",
+ "overlays":[
+ {"x":0,"y":0,"w":200,"h":200,"over":"04_chance-RB.svg"},
+ {"x":400,"y":400,"w":100,"h":100,"over":"04_chance-RB.svg"}
+ ]
+ },
+ {
+ "bg":"100_Williams.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"104_Wolff.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"108_Young.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"110_StraightLine.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"112_Portrait?.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"113_4couv.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"114_4couv.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"12_Bremer.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"14_Brown.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"23_Byrd.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"26_Cage.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"28_deMaria.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"32_Flynt.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"37_Ono.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"39_HIggins.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"41_Ichiyanagi.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"45_Jennings.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"48_Dennis.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"54_DingDong.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"56_Johnson.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"58_MacLow.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"79_Maxfield.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"90_Simone.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"92_Paik.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"94_Riley.jpeg",
+ "overlays":[]
+ },
+ {
+ "bg":"99_Rot.jpeg",
+ "overlays":[]
+ }
+];