Permalink
Browse files

Added image viewer and CSS3 background pattern.

  • Loading branch information...
1 parent 1db5dd7 commit 5149fe7898fdba57507665039f60d4a3ab9c6233 David H committed Jun 1, 2011
View
@@ -13,6 +13,7 @@
<link rel="StyleSheet" href="default.css" type="text/css" />
<link rel="StyleSheet" href="overflow-touch.css" type="text/css" />
<script type="text/javascript" src="overflow-touch.js"></script>
+ <script type="text/javascript" src="tinybox.js"></script>
</head>
<body>
<?php include("header.php"); ?>
@@ -38,23 +39,29 @@
<p>YO DAWG, I heard you like davidhuerta.me, so we put some davidhuerta.me in davidhuerta.me so you can read about David while you read about David. <a href="https://github.com/huertanix/davidhuertadotme" target="_new">Source code</a> available on Github.</p>
<h3>HeatSync Labs Laser Cutter Fundraiser Reward Plaque (2010)</h3>
<section class="imageContainer">
- <a href="http://www.flickr.com/photos/25968780@N03/5256517805/" target="_new"><img src="images/hackerspace_plaque.jpg" alt="Plaque photo" /></a>
+ <!--<a href="http://www.flickr.com/photos/25968780@N03/5256517805/" target="_new">-->
+ <img src="images/hackerspace_plaque.jpg" alt="Plaque photo" onclick="TINY.box.show({image:'images/hackerspace_plaque_large.jpg',boxid:'frameless',animate:true,openjs:function(){openJS()}})" />
+ <!--</a>-->
</section>
<h3>HeatSync Labs Business Cards, Sticker, and Button (2010)</h3>
<section class="imageContainer">
- <a href="http://www.flickr.com/photos/25968780@N03/5369349364/" target="_new"><img src="images/hsl_swag.jpg" alt="HeatSwag" /></a>
+ <!--<a href="http://www.flickr.com/photos/25968780@N03/5369349364/" target="_new">-->
+ <img src="images/hsl_swag.jpg" alt="HeatSwag" onclick="TINY.box.show({image:'images/hsl_swag_large.jpg',boxid:'frameless',animate:true,openjs:function(){openJS()}})" />
+ <!--</a>-->
</section>
<h3>DigiDesert Logo (2010)</h3>
<section class="imageContainer">
- <a href="http://huertanix.tumblr.com/post/364438993/a-logo-i-designed-for-digital-desert-colo-which" target="_new"><img src="images/digidesert_logo.png" alt="DigiDesert logo" /></a>
+ <img src="images/digidesert_logo.png" alt="DigiDesert logo" onclick="TINY.box.show({image:'images/digidesert_logo_large.png',boxid:'frameless',animate:true,openjs:function(){openJS()}})" />
</section>
<h3>ABLEconf T-shirt (2009)</h3>
<section class="imageContainer">
- <a href="http://www.flickr.com/photos/25968780@N03/4912213624/" target="_new"><img src="images/ableconf_shirt.jpg" alt="Its the one on the right..." /></a>
+ <!--<a href="http://www.flickr.com/photos/25968780@N03/4912213624/" target="_new">-->
+ <img src="images/ableconf_shirt.jpg" alt="Its the one on the right..." onclick="TINY.box.show({image:'images/ableconf_shirt_large.jpg',boxid:'frameless',animate:true,openjs:function(){openJS()}})" />
+ <!--</a>-->
</section>
<h3>Hayst.ac Logo (2008)</h3>
<section class="imageContainer">
- <a href="http://haystackproject.org/press.htm" target="_new"><img src="images/haystac_logo.jpg" alt="Formerly known as Haystack Project..." /></a>
+ <img src="images/haystac_logo.jpg" alt="Formerly known as Haystack Project..." onclick="TINY.box.show({image:'images/haystac_logo_large.jpg',boxid:'frameless',animate:true,openjs:function(){openJS()}})" />
</section>
<script type="text/javascript">
setIosOverlay('verbageContainer');
View
@@ -7,6 +7,7 @@ body
background-color:#AF9879;
/*background-image: -moz-linear-gradient(bottom, #FFF, #EEE);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #FFF),color-stop(1, #EEE));*/
+ background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
font-family:Helvetica, Arial, Sans;
text-align:center;
margin: 0 auto;
@@ -239,4 +240,18 @@ header h1 a
.grandNotification, .grandFailNotification a
{
color:#FFF;
-}
+}
+
+/* From tinybox css... */
+.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
+.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
+.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
+.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat}
+.tclose:hover {background-position:0 -30px}
+
+#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
+#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
+#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}
+#bluemask {background:#4195aa}
+#frameless {padding:0}
+#frameless .tclose {left:6px}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,136 @@
+// Copyright (c) ScriptTiny. Licensed under a Creative Commons CC BY 3.0 license
+
+TINY={};
+
+TINY.box=function(){
+ var j,m,b,g,v,p=0;
+ return{
+ show:function(o){
+ v={opacity:70,close:1,animate:1,fixed:1,mask:1,maskid:'',boxid:'',topsplit:2,url:0,post:0,height:0,width:0,html:0,iframe:0};
+ for(s in o){v[s]=o[s]}
+ if(!p){
+ j=document.createElement('div'); j.className='tbox';
+ p=document.createElement('div'); p.className='tinner';
+ b=document.createElement('div'); b.className='tcontent';
+ m=document.createElement('div'); m.className='tmask';
+ g=document.createElement('div'); g.className='tclose'; g.v=0;
+ document.body.appendChild(m); document.body.appendChild(j); j.appendChild(p); p.appendChild(b);
+ m.onclick=g.onclick=TINY.box.hide; window.onresize=TINY.box.resize
+ }else{
+ j.style.display='none'; clearTimeout(p.ah); if(g.v){p.removeChild(g); g.v=0}
+ }
+ p.id=v.boxid; m.id=v.maskid; j.style.position=v.fixed?'fixed':'absolute';
+ if(v.html&&!v.animate){
+ p.style.backgroundImage='none'; b.innerHTML=v.html; b.style.display='';
+ p.style.width=v.width?v.width+'px':'auto'; p.style.height=v.height?v.height+'px':'auto'
+ }else{
+ b.style.display='none';
+ if(!v.animate&&v.width&&v.height){
+ p.style.width=v.width+'px'; p.style.height=v.height+'px'
+ }else{
+ p.style.width=p.style.height='100px'
+ }
+ }
+ if(v.mask){this.mask(); this.alpha(m,1,v.opacity)}else{this.alpha(j,1,100)}
+ if(v.autohide){p.ah=setTimeout(TINY.box.hide,1000*v.autohide)}else{document.onkeyup=TINY.box.esc}
+ },
+ fill:function(c,u,k,a,w,h){
+ if(u){
+ if(v.image){
+ var i=new Image(); i.onload=function(){w=w||i.width; h=h||i.height; TINY.box.psh(i,a,w,h)}; i.src=v.image
+ }else if(v.iframe){
+ this.psh('<iframe src="'+v.iframe+'" width="'+v.width+'" frameborder="0" height="'+v.height+'"></iframe>',a,w,h)
+ }else{
+ var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
+ x.onreadystatechange=function(){
+ if(x.readyState==4&&x.status==200){p.style.backgroundImage=''; TINY.box.psh(x.responseText,a,w,h)}
+ };
+ if(k){
+ x.open('POST',c,true); x.setRequestHeader('Content-type','application/x-www-form-urlencoded'); x.send(k)
+ }else{
+ x.open('GET',c,true); x.send(null)
+ }
+ }
+ }else{
+ this.psh(c,a,w,h)
+ }
+ },
+ psh:function(c,a,w,h){
+ if(typeof c=='object'){b.appendChild(c)}else{b.innerHTML=c}
+ var x=p.style.width, y=p.style.height;
+ if(!w||!h){
+ p.style.width=w?w+'px':''; p.style.height=h?h+'px':''; b.style.display='';
+ if(!h){h=parseInt(b.offsetHeight)}
+ if(!w){w=parseInt(b.offsetWidth)}
+ b.style.display='none'
+ }
+ p.style.width=x; p.style.height=y;
+ this.size(w,h,a)
+ },
+ esc:function(e){e=e||window.event; if(e.keyCode==27){TINY.box.hide()}},
+ hide:function(){TINY.box.alpha(j,-1,0,3); document.onkeypress=null; if(v.closejs){v.closejs()}},
+ resize:function(){TINY.box.pos(); TINY.box.mask()},
+ mask:function(){m.style.height=this.total(1)+'px'; m.style.width=this.total(0)+'px'},
+ pos:function(){
+ var t;
+ if(typeof v.top!='undefined'){t=v.top}else{t=(this.height()/v.topsplit)-(j.offsetHeight/2); t=t<20?20:t}
+ if(!v.fixed&&!v.top){t+=this.top()}
+ j.style.top=t+'px';
+ j.style.left=typeof v.left!='undefined'?v.left+'px':(this.width()/2)-(j.offsetWidth/2)+'px'
+ },
+ alpha:function(e,d,a){
+ clearInterval(e.ai);
+ if(d){e.style.opacity=0; e.style.filter='alpha(opacity=0)'; e.style.display='block'; TINY.box.pos()}
+ e.ai=setInterval(function(){TINY.box.ta(e,a,d)},20)
+ },
+ ta:function(e,a,d){
+ var o=Math.round(e.style.opacity*100);
+ if(o==a){
+ clearInterval(e.ai);
+ if(d==-1){
+ e.style.display='none';
+ e==j?TINY.box.alpha(m,-1,0,2):b.innerHTML=p.style.backgroundImage=''
+ }else{
+ if(e==m){
+ this.alpha(j,1,100)
+ }else{
+ j.style.filter='';
+ TINY.box.fill(v.html||v.url,v.url||v.iframe||v.image,v.post,v.animate,v.width,v.height)
+ }
+ }
+ }else{
+ var n=a-Math.floor(Math.abs(a-o)*.5)*d;
+ e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'
+ }
+ },
+ size:function(w,h,a){
+ if(a){
+ clearInterval(p.si); var wd=parseInt(p.style.width)>w?-1:1, hd=parseInt(p.style.height)>h?-1:1;
+ p.si=setInterval(function(){TINY.box.ts(w,wd,h,hd)},20)
+ }else{
+ p.style.backgroundImage='none'; if(v.close){p.appendChild(g); g.v=1}
+ p.style.width=w+'px'; p.style.height=h+'px'; b.style.display=''; this.pos();
+ if(v.openjs){v.openjs()}
+ }
+ },
+ ts:function(w,wd,h,hd){
+ var cw=parseInt(p.style.width), ch=parseInt(p.style.height);
+ if(cw==w&&ch==h){
+ clearInterval(p.si); p.style.backgroundImage='none'; b.style.display='block'; if(v.close){p.appendChild(g); g.v=1}
+ if(v.openjs){v.openjs()}
+ }else{
+ if(cw!=w){p.style.width=(w-Math.floor(Math.abs(w-cw)*.6)*wd)+'px'}
+ if(ch!=h){p.style.height=(h-Math.floor(Math.abs(h-ch)*.6)*hd)+'px'}
+ this.pos()
+ }
+ },
+ top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
+ width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
+ height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
+ total:function(d){
+ var b=document.body, e=document.documentElement;
+ return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
+ Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
+ }
+ }
+}();

0 comments on commit 5149fe7

Please sign in to comment.