Team:Sevilla/Notebook

From 2011.igem.org

(Difference between revisions)
 
(35 intermediate revisions not shown)
Line 4: Line 4:
<html>
<html>
-
<script type="text/javascript">
 
-
/* panorama360 - plugin for jQuery
 
-
* Copyright (c) 2011 Minimalistic Studio (http://minimalisticstudio.com/)
 
-
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 
-
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 
-
* Thanks to: http://www.openstudio.fr for the initial idea.
 
-
*
 
-
* Some changes were made by Evgeny Likov (http://likov.spb.ru): fixed drag and kinetic scroll (thanks man!)
 
-
*/
 
-
(function($) {
 
-
$.fn.panorama360 = function(options){
 
-
this.each(function(){
 
-
var settings = {
 
-
start_position: 0,
 
-
image_width: 0,
 
-
image_height: 0,
 
-
mouse_wheel_multiplier: 20,
 
-
bind_resize: true
 
-
};
 
-
if(options) $.extend(settings, options);
 
-
var viewport = $(this);
 
-
var panoramaContainer = viewport.children('.panorama-container');
 
-
var viewportImage = panoramaContainer.children('img:first');
 
-
if(settings.image_width<=0 && settings.image_height<=0){
 
-
settings.image_width = parseInt(viewportImage.data("width"));
 
-
settings.image_height = parseInt(viewportImage.data("height"));
 
-
if (!(settings.image_width) || !(settings.image_height)) return;
 
-
}
 
-
var image_ratio = settings.image_height/settings.image_width;
 
-
var elem_height = parseInt(viewport.height());
 
-
var elem_width = parseInt(elem_height/image_ratio);
 
-
var image_map = viewportImage.attr('usemap');
 
-
var image_areas;
 
-
var isDragged = false;
 
-
var mouseXprev = 0;
 
-
var scrollDelta = 0;
 
-
viewportImage.removeAttr("usemap").css("left",0).clone().css("left",elem_width+"px").insertAfter(viewportImage);
+
<!-- Lab 360 http://www.rockechris.com/jquery/jquery.panorer.js.html -->
 +
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> -->
-
panoramaContainer.css({
+
<script src="http://www.rockechris.com/jquery/jquery.panorer.js"></script>
-
'margin-left': '-'+settings.start_position+'px',
+
<script>
-
'width': (elem_width*2)+'px',
+
-
'height': (elem_height)+'px'
+
-
});
+
-
setInterval( function() {
+
  $(document).ready(function() {
-
if (isDragged) return false;
+
//use panorer plugin.
-
scrollDelta = scrollDelta * 0.98;
+
    $('#pano').panorer({ 'easing': 'linear', 'direction': "EW" });
-
if (Math.abs(scrollDelta)<=2) scrollDelta = 0;
+
-
scrollView(panoramaContainer, elem_width, scrollDelta);
+
-
}, 1);
+
-
viewport.mousedown(function(e){
+
-
if (isDragged) return false;
+
-
$(this).addClass("grab");
+
-
isDragged = true;
+
-
mouseXprev = e.clientX;
+
-
scrollOffset = 0;
+
-
return false;
+
-
}).mouseup(function(){
+
-
$(this).removeClass("grab");
+
-
isDragged = false;
+
-
scrollDelta = scrollDelta * 0.45;
+
-
return false;
+
-
}).mousemove(function(e){
+
-
if (!isDragged) return false;
+
-
scrollDelta = parseInt((e.clientX - mouseXprev));
+
-
mouseXprev = e.clientX;
+
-
scrollView(panoramaContainer, elem_width, scrollDelta);
+
-
return false;
+
-
}).bind("mousewheel",function(e,distance){
+
-
var delta=Math.ceil(Math.sqrt(Math.abs(distance)));
+
-
delta=distance<0 ? -delta : delta;
+
-
scrollDelta = scrollDelta + delta * 5;
+
-
scrollView(panoramaContainer,elem_width,delta*settings.mouse_wheel_multiplier);
+
-
return false;
+
-
}).bind('contextmenu',stopEvent).bind('touchstart', function(e){
+
-
if (isDragged) return false;
+
-
isDragged = true;
+
-
mouseXprev = e.originalEvent.touches[0].pageX;
+
-
scrollOffset = 0;
+
-
}).bind('touchmove', function(e){
+
-
e.preventDefault();
+
-
if (!isDragged) return false;
+
-
var touch_x = e.originalEvent.touches[0].pageX;
+
-
scrollDelta = parseInt((touch_x - mouseXprev));
+
-
mouseXprev = touch_x;
+
-
scrollView(panoramaContainer, elem_width, scrollDelta);
+
-
}).bind('touchend', function(e){
+
-
isDragged = false;
+
-
scrollDelta = scrollDelta * 0.45;
+
-
});
+
-
if (image_map) {
+
});  
-
$('map[name='+image_map+']').children('area').each(function(){
+
-
switch ($(this).attr("shape").toLowerCase()){
+
-
case 'rect':
+
-
var area_coord = $(this).attr("coords").split(",");
+
-
$area1 = $("<a class='area' href='"+$(this).attr("href")+"' title='"+$(this).attr("alt")+"'</a>");
+
-
panoramaContainer.append($area1.data("stitch",1).data("coords",area_coord));
+
-
panoramaContainer.append($area1.clone().data("stitch",2).data("coords",area_coord));
+
-
break;
+
-
}
+
-
});
+
-
$('map[name='+image_map+']').remove();
+
-
image_areas = panoramaContainer.children(".area");
+
-
image_areas.mouseup(stopEvent).mousemove(stopEvent).mousedown(stopEvent);
+
-
repositionHotspots(image_areas,settings.image_height,elem_height,elem_width);
+
-
}
+
-
if (settings.bind_resize){
+
</script>
-
$(window).resize(function(){
+
-
elem_height = parseInt(viewport.height());
+
-
elem_width = parseInt(elem_height/image_ratio);
+
-
panoramaContainer.css({
+
-
'width': (elem_width*2)+'px',
+
-
'height': (elem_height)+'px'
+
-
});
+
-
viewportImage.css("left",0).next().css("left",elem_width+"px");
+
-
if (image_map) repositionHotspots(image_areas,settings.image_height,elem_height,elem_width);
+
-
});
+
-
}
+
-
});
+
-
+
-
function stopEvent(e){
+
-
e.preventDefault();
+
-
return false;
+
-
}
+
-
function scrollView(panoramaContainer,elem_width,delta){
 
-
var newMarginLeft = parseInt(panoramaContainer.css('marginLeft'))+delta;
 
-
if (newMarginLeft > 0) newMarginLeft = -elem_width;
 
-
if (newMarginLeft < -elem_width) newMarginLeft = 0;
 
-
panoramaContainer.css('marginLeft', newMarginLeft+'px');
 
-
}
 
-
function repositionHotspots(areas,image_height,elem_height,elem_width){
+
<div style="color:#1F7C83; font-weight:bold;text-transform:uppercase; font-size: 120%;margin-left:170px;"> Our lab! </div>
-
var percent = elem_height/image_height;
+
</html>{{:Team:Sevilla/Templates/hr|colour=#FFB880|class=lab}}<html>
-
areas.each(function(){
+
</br>
-
area_coord = $(this).data("coords");
+
-
stitch = $(this).data("stitch");
+
-
switch (stitch){
+
-
case 1:
+
-
$(this).css({
+
-
'left': (area_coord[0]*percent)+"px",
+
-
'top': (area_coord[1]*percent)+"px",
+
-
'width': ((area_coord[2]-area_coord[0])*percent)+"px",
+
-
'height': ((area_coord[3]-area_coord[1])*percent)+"px",
+
-
});
+
-
break;
+
-
case 2:
+
-
$(this).css({
+
-
'left': (elem_width+parseInt(area_coord[0])*percent)+"px",
+
-
'top': (area_coord[1]*percent)+"px",
+
-
'width': ((area_coord[2]-area_coord[0])*percent)+"px",
+
-
'height': ((area_coord[3]-area_coord[1])*percent)+"px",
+
-
});
+
-
break;
+
-
}
+
-
});
+
-
}
+
-
}
+
-
})(jQuery);
+
-
</script>
+
-
<img src="https://lh5.googleusercontent.com/-CIHTtaRbdgM/TiAa0Y3zubI/AAAAAAAAAO4/1dhIyuanIzc/s640/IMG_4497.JPG" height="192" width="288" />            
+
<div id="pano" style= "width: 700px; height: 501px;border: medium solid black; position: relative; overflow: hidden;margin-left:170px;">
-
<img src="https://lh5.googleusercontent.com/-XwFZY6HcLGw/ThdO1E3FgTI/AAAAAAAAANE/Swz7_vKNSnE/s288/IMG_4496.JPG" height="192" width="288" />
+
   
 +
        <img alt="Example" src="http://institucional.us.es/igembiouse/360/View_from_Sky_Tower_Akl_small.jpg" style="position: absolute; left: -100.3px;">
-
 
-
<!-- Lab 360 -->
 
-
 
-
 
-
 
-
<script type="text/javascript">
 
-
  <!--
 
-
$(function(){
 
-
$('.panorama-view').panorama360({
 
-
bind_resize: false // no need to subscribe to window resize event
 
-
});
 
-
});
 
-
-->
 
-
</script>
 
-
 
-
<div class="panorama round" style="padding-left:10px;width:700px;height:500px;">
 
-
<div class="panorama-view">
 
-
<div class="panorama-container">
 
-
<img src="https://sites.google.com/site/bobstringfiles/arcanum/arcanumlab.jpg" data-width="7476" data-height="501" alt="Panorama" />
 
-
</div>
 
-
</div>
 
-
<a class="info round" href="http://www.arcanumproject.com">Arcanum Lab</a>
 
</div>
</div>
-
 
-
 
-
 
-
<style>
 
-
 
-
/* layout */
 
-
.panorama,.panorama-view{width:100%;height:100%;overflow:hidden}
 
-
.panorama,.panorama-container{position:relative}
 
-
.panorama-container img{height:100%;position:absolute;top:0}
 
-
.panorama .info,.panorama-view .area{position:absolute;display:block}
 
-
.panorama .info{right:10px;bottom:10px}
 
-
 
-
/* style */
 
-
 
-
.panorama .info{padding:6px;opacity:0.4;background-color:#000;color:#fff;font:11px bold Arial,sans-serif;text-decoration:none}
 
-
.panorama .info:hover{opacity:0.6}
 
-
.panorama-view .area{opacity:0.2;background-color:#000;cursor:pointer}
 
-
.panorama-view .area:hover{opacity:0.4}
 
-
.panorama-view img{user-select:none;-o-user-select:none;-moz-user-select:none;-webkit-user-select:none)}
 
-
</style>
 
</html>
</html>

Latest revision as of 22:50, 21 September 2011



Our lab!

Example

Retrieved from "http://2011.igem.org/Team:Sevilla/Notebook"