disable zoom, remove image gallery, size images, highlight correctly

vurbanism/static/css/colorbox.css

@@ -4,7 +4,7 @@
     Avoid changing this area to maintain compatability with future versions of ColorBox.
 */
 #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
-#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxOverlay{position:fixed; width:100%; height:100%}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative; overflow:hidden;}
 #cboxLoadedContent{overflow:auto;}
@@ -18,7 +18,7 @@
     The following rules are ordered and tabbed in a way that represents the
     order/nesting of the generated HTML, so that the structure easier to understand.
 */
-#cboxOverlay{background:url(images/overlay.png) 0 0 repeat;}
+#cboxOverlay{background:url(images/overlay_trans.png) 0 0 repeat;}
 #colorbox{}
     #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) -100px 0 no-repeat;}
     #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) -129px 0 no-repeat;}

vurbanism/static/css/vurbanism.css

@@ -54,18 +54,25 @@ a img {
 .imageWrapper {
   float: left;
   width: 120px;
-  height: 120px;
   text-align: center;
 }
 
+.videosWrapper {
+  padding: 10px;
+}
+
 .videoWrapper {
   float: left;
-  width: 400px;
+  width: 180px;
   text-align: center;
 }
 
 .videoWrapper img {
-  width: 340px;
+  width: 140px;
+}
+
+.imageWrapper img {
+  width: 100px;
 }
 
 .imagesWrapper {
@@ -136,11 +143,10 @@ a img {
 
 .imageWrapper .mapSelect img {
   width: 100px;
-  height: 100px;
 }
 
 .videoWrapper .mapSelect img {
-  width: 400px;
+  width: 140px;
 }
 
 .textsWrapper .mapSelect {
@@ -173,3 +179,9 @@ a img {
   width: 80%;
   height: 100px;
 }
+
+.highlightOverlay {
+  position: absolute;
+  background: #2A0AB3;
+  cursor: pointer;
+}

vurbanism/static/js/vurbanism.js

@@ -39,7 +39,9 @@ var map, currentlySelectedFeature, jsonLayer, mapControl, zoomControl;
 
 $(function() {
   var center = new OpenLayers.LonLat(72.855211097628413, 19.010775291486027);
-  map = new OpenLayers.Map('map');
+  map = new OpenLayers.Map('map', {
+    'controls': []
+  });
   var layers = [];
   layers[0] = new OpenLayers.Layer.Google(
                 "Google Streets", // the default
@@ -72,9 +74,25 @@ $(function() {
 
 
 function onFeatureSelect(f) {
-  var id = f.feature.attributes.id;
+    var id = f.feature.attributes.id;
-//  $('img').removeClass('mapSelect');
+    $('.highlightOverlay').hide().remove();
-  $('[data-id=' + id + ']').addClass("mapSelect");
+  //  $('img').removeClass('mapSelect');
+    var $img = $('[data-id=' + id + ']');
+    var offset = $img.find('img').offset();
+    var height = $img.find('img').height();
+    var width = $img.find('img').width();
+    var overlayCss = {
+      'top': parseInt(offset.top) + "px",
+      'left': parseInt(offset.left) + "px",
+      'width': width + "px",
+      'height': height + "px",
+      'display': 'none'    
+    }
+    $('<div />').addClass('highlightOverlay').css(overlayCss).appendTo('body').fadeTo(100, 0.5).click(function() {
+      $img.click();
+    });
+//    currentlySelectedFeature = f;
+//  .addClass("mapSelect");
 /*
   var id = f.feature.attributes.id;
   $.getJSON("flyover", {'id': id}, function(json) {
@@ -88,8 +106,11 @@ function onFeatureSelect(f) {
 }
 
 function onFeatureUnselect(f) {
+
+  currentlySelectedFeature = false;
   var id = f.feature.attributes.id;
-  $('[data-id=' + id + ']').removeClass("mapSelect");
+  $('.highlightOverlay').hide();
+//  $('[data-id=' + id + ']').removeClass("mapSelect");
 }
 
 //will highlight the feature id's passed in arr
@@ -206,7 +227,7 @@ $(function() {
   });
 
   //trigger click on "About" on page load:
-  $('#aboutBtn').click();
+//  $('#aboutBtn').click();
 });
 
 function getFlyoverById(id) {
@@ -223,12 +244,17 @@ $('.flyoverImage').live("mouseover", function() {
   var id = $(this).attr("data-id");
 //  console.log(id);
   var flyover = getFlyoverById(id);
+  if (flyover == currentlySelectedFeature) {
+    return false;
+  }
   mapControl.select(flyover);
-  currentlySelectedFeature = flyover;
+  $(this).data("flyover", flyover);
+//  currentlySelectedFeature = flyover;
 });
 
 $('.flyoverImage').live("mouseout", function() {
-  mapControl.unselect(currentlySelectedFeature);  
+//  console.log(currentlySelectedFeature);
+  mapControl.unselect($(this).data("flyover"));  
 });
 
 $('#submitQuestions').live("click", function() {

vurbanism/templates/flyovers.html

@@ -6,7 +6,7 @@
   <meta name="title" content="Vertical Urbanism" />
   <meta name="description" content="This site maps the landscapes of elevated road highways – flyovers – and elevated pedestrian walkways – skywalks – across the Mumbai Metropolitan Region in Western India." />
   <link rel="stylesheet" type="text/css" href="/static/css/vurbanism.css" />
-  <title>Vertical Urbanism: Flyovers in Mumbai</title>
+  <title>Vertical Urbanism: Flyovers and Skywalks in Mumbai</title>
   <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />
   <script type="text/javascript" src="/static/js/jquery.js"></script>
   <script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
@@ -22,7 +22,7 @@
 <div class="imagesWrapper">
   <% for (var i=0; i<images.length;i++) { var img = images[i]; %>
     <div class="imageWrapper">
-      <a href="<%= img.sizes[3].source %>" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>" rel="group_<%= img.id %>">
+      <a href="<%= img.sizes[3].source %>" class="flyoverImage" title="<%= img.caption %>" data-id="<%= img.flyover.id %>">
         <img src="<%= img.sizes[0].source %>" alt="<%= img.caption %>" />
       </a> 
     </div>
@@ -76,8 +76,12 @@ Harris with the assistance of Savitri Medhatul. The website was devised by
 Andrew Harris and created by Sanjay Bhangar.The research was funded by
 the UK’s Economic and Social Research Council and the Urban Laboratory of
 University College London.</p>
-      <img src="/static/images/urbanlablogo.jpg" alt="Urban Lab Logo" title="Urban Lab" />
+      <a href="http://www.ucl.ac.uk/urbanlab" title="Urban Lab">
-      <img src="/static/images/esrclogo.jpg" alt="ESRC Logo" title="Economic and Social Research Council" />
+        <img src="/static/images/urbanlablogo.jpg" width="200" alt="Urban Lab Logo" title="Urban Lab" />
+      </a>
+      <a href="http://www.esrc.ac.uk/" title="Economic and Social Research Council">
+        <img src="/static/images/esrclogo.jpg" alt="ESRC Logo" width="200" title="Economic and Social Research Council" />
+      </a>
     </div>
   </div>
 </script>
@@ -118,7 +122,7 @@ University College London.</p>
         <tr>
           <td class="imageCategory" data-id="6">Signs</td>
           <td class="imageCategory" data-id="7">Piers</td>
-          <td class="imageCategory" data-id="15">Columns</td>
+          <td class="imageCategory" data-id="15">Skywalk Columns</td>
           <td class="imageCategory" data-id="13">End surfaces</td>
         </tr>
         <tr>
@@ -143,7 +147,7 @@ University College London.</p>
           <td class="imageCategory" data-id="5">Life underneath</td>
           <td class="imageCategory" data-id="3">Storing / Selling</td>
           <td class="videoCategory" data-id="3">Stills underneath</td>
-          <td class="audioCategory" data-id="">Sounds</td>
+          <td class="audioCategory" data-id="">Ground Sounds</td>
         </tr>
       </table>
     </div>