Commit inicial.
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 723 B |
|
Before Width: | Height: | Size: 366 B |
@@ -1,71 +0,0 @@
|
||||
/***********************************************
|
||||
* Copyright (c) 2010 Valeriano Alfonso *
|
||||
***********************************************/
|
||||
/*
|
||||
NOTA DE DOMINIO PUBLICO
|
||||
-----------------------
|
||||
ImgView es Dominio Publico. Esto significa que se puede hacer con el
|
||||
lo que se quiera sin haber ninguna garantia de reembolso o idoneidad.
|
||||
Se aprecia que la fuente sea citada.
|
||||
*/
|
||||
|
||||
#imgview_fondo {
|
||||
background-image: url(fondo.png);
|
||||
}
|
||||
|
||||
#imgview_imgcargando {
|
||||
border: 10px solid white;
|
||||
}
|
||||
|
||||
#imgview_fondo a {
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
#imgview {
|
||||
background-color: white;
|
||||
border: 10px solid white;
|
||||
}
|
||||
|
||||
#imgview img {
|
||||
border: none;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
#imgview a {
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
#imgview_control {
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#imgview_anterior {
|
||||
background-color: white;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height:32px;
|
||||
border:0px;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background-image:url('anterior.png');
|
||||
background-repeat:no-repeat;
|
||||
background-position: 50% 0%;
|
||||
cursor:pointer;
|
||||
}
|
||||
#imgview_siguiente {
|
||||
background-color: white;
|
||||
float: right;
|
||||
width: 50%;
|
||||
height:32px;
|
||||
border:0px;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background-image:url('siguiente.png');
|
||||
background-repeat:no-repeat;
|
||||
background-position: 50% 0%;
|
||||
cursor:pointer;
|
||||
}
|
||||
@@ -1,497 +0,0 @@
|
||||
/***********************************************
|
||||
* Copyright (c) 2010 Valeriano Alfonso *
|
||||
***********************************************/
|
||||
/*
|
||||
NOTA DE DOMINIO PUBLICO
|
||||
-----------------------
|
||||
ImgView es Dominio Publico. Esto significa que se puede hacer con el
|
||||
lo que se quiera sin haber ninguna garantia de reembolso o idoneidad.
|
||||
Se aprecia que la fuente sea citada.
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
Historial de cambios
|
||||
--------------------
|
||||
1.0 2010-1-3 :
|
||||
* Version inicial.
|
||||
1.1 2010-1-5 :
|
||||
* Corregida necesidad de cargar el script en la seccion head.
|
||||
* Funcionalidad basica de album implementada.
|
||||
1.2 2010-5-18 :
|
||||
* Asimilado de todos los enlaces a imagenes en un album general.
|
||||
* Iconos de anterior y siguiente de los albums, nuevos.
|
||||
*/
|
||||
|
||||
/////////////////////////
|
||||
// Configuracion
|
||||
//
|
||||
var imgview_prefix = ""; // Se atoconfigura
|
||||
var imgview_border = 10; // Tambien ajustar en el CSS.
|
||||
var imgview_control_alto = 32; // Tambien ajustar en el CSS.
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////
|
||||
// Globales
|
||||
//
|
||||
var imgview_nombre_album="";
|
||||
var imgview_href_anterior="";
|
||||
var imgview_href_siguiente="";
|
||||
var imgview_preloader=false;
|
||||
|
||||
/////////////////////////////////////
|
||||
// ImgView_ShowImage
|
||||
//
|
||||
|
||||
function ImgView_ShowImage(href,is_album){
|
||||
var elemFondo = document.getElementById('imgview_fondo');
|
||||
var elemImgview = document.getElementById('imgview');
|
||||
var elemImgviewControl = document.getElementById('imgview_control');
|
||||
var elemImgCargando = document.getElementById('imgview_imgcargando');
|
||||
var elemEnlace = document.getElementById('imgview_enlace');
|
||||
var elemImg = document.getElementById('imgview_img');
|
||||
var elemAnt = document.getElementById('imgview_anterior');
|
||||
var elemSig = document.getElementById('imgview_siguiente');
|
||||
var preloader;
|
||||
var max_horiz, max_vert;
|
||||
var ventana_ancho, ventana_alto;
|
||||
var pagina_ancho, pagina_alto;
|
||||
var pos_horiz = 0, pos_vert = 0;
|
||||
|
||||
|
||||
if(is_album){
|
||||
var enlaces;
|
||||
var imgview_RegExp;
|
||||
var nombre_temp;
|
||||
var i,j;
|
||||
|
||||
// Buscar imagenes anterior y siguientes
|
||||
enlaces = document.getElementsByTagName("a");
|
||||
for(i=0;i<enlaces.length;i++){
|
||||
if(enlaces[i].getAttribute("href")==href &&
|
||||
enlaces[i].getAttribute("imgview_albumid")==imgview_nombre_album)
|
||||
{
|
||||
// Encontrado el actual
|
||||
|
||||
// Buscar Anterior
|
||||
imgview_href_anterior="";
|
||||
if(i>0){
|
||||
j=i-1;
|
||||
while(j>=0){
|
||||
if(enlaces[j].getAttribute("imgview_albumid")==
|
||||
imgview_nombre_album)
|
||||
{
|
||||
imgview_href_anterior=enlaces[j].getAttribute("href");
|
||||
break;
|
||||
}
|
||||
j--;
|
||||
}
|
||||
}
|
||||
|
||||
// Buscar Siguiente
|
||||
imgview_href_siguiente="";
|
||||
if(i<(enlaces.length-1)){
|
||||
j=i+1;
|
||||
while(j<enlaces.length){
|
||||
if(enlaces[j].getAttribute("imgview_albumid")==
|
||||
imgview_nombre_album)
|
||||
{
|
||||
imgview_href_siguiente=enlaces[j].getAttribute("href");
|
||||
break;
|
||||
}
|
||||
j++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Obtener maximos de scroll
|
||||
if(window.innerHeight && window.scrollMaxY) {
|
||||
max_horiz = document.body.scrollWidth;
|
||||
max_vert = window.innerHeight + window.scrollMaxY;
|
||||
}else if(document.body.scrollHeight > document.body.offsetHeight){
|
||||
// all but Explorer Mac
|
||||
max_horiz = document.body.scrollWidth;
|
||||
max_vert = document.body.scrollHeight;
|
||||
}else{
|
||||
// Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||||
max_horiz = document.body.offsetWidth;
|
||||
max_vert = document.body.offsetHeight;
|
||||
}
|
||||
|
||||
// Obtener tamanho de la ventana
|
||||
if(window.innerHeight) {
|
||||
// Todos excepto Explorer
|
||||
ventana_ancho = window.innerWidth;
|
||||
ventana_alto = window.innerHeight;
|
||||
}else if(document.documentElement && document.documentElement.clientHeight){
|
||||
// Explorer 6 Strict
|
||||
ventana_ancho = document.documentElement.clientWidth;
|
||||
ventana_alto = document.documentElement.clientHeight;
|
||||
}else if(document.body){
|
||||
// Resto de Explorers
|
||||
ventana_ancho = document.body.clientWidth;
|
||||
ventana_alto = document.body.clientHeight;
|
||||
}
|
||||
|
||||
// HACK: reducir el tamaho de ventana_ancho. Hace que no sobrepase los bordes
|
||||
ventana_ancho-=20;
|
||||
|
||||
// Obtener el tamanho de la pagina
|
||||
if(max_vert < ventana_alto){
|
||||
pagina_alto = ventana_alto;
|
||||
}else{
|
||||
pagina_alto = max_vert;
|
||||
}
|
||||
if(max_horiz < ventana_ancho){
|
||||
pagina_ancho = ventana_ancho;
|
||||
}else{
|
||||
pagina_ancho = max_horiz;
|
||||
}
|
||||
|
||||
// Obtener posicion del los scrolls
|
||||
if( typeof( window.pageYOffset ) == 'number' ) {
|
||||
// La mayoria de navegadores
|
||||
pos_vert = window.pageYOffset;
|
||||
pos_horiz = window.pageXOffset;
|
||||
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
|
||||
// Explorer
|
||||
pos_vert = document.body.scrollTop;
|
||||
pos_horiz = document.body.scrollLeft;
|
||||
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
|
||||
// Explorer 6 Strict
|
||||
pos_vert = document.documentElement.scrollTop;
|
||||
pos_horiz = document.documentElement.scrollLeft;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Centrar y hacer visible la imagen de cargando
|
||||
if(elemImgCargando){
|
||||
elemImgCargando.style.top =
|
||||
(pos_vert +
|
||||
((ventana_alto - elemImgCargando.height) / 2)) + 'px';
|
||||
elemImgCargando.style.left =
|
||||
(pos_horiz +
|
||||
((ventana_ancho - elemImgCargando.width) / 2)) + 'px';
|
||||
elemImgCargando.style.display = 'block';
|
||||
}
|
||||
|
||||
// Hacer que el fondo ocupe la pagina y sea visible
|
||||
elemFondo.style.height = (pagina_alto + 'px');
|
||||
elemFondo.style.display = 'block';
|
||||
|
||||
// Carga de la imagen
|
||||
imgview_preloader=new Image();
|
||||
imgview_preloader.onload=function(){
|
||||
|
||||
// Mostrar imgview, necesario para que los tamanhos sean correctos
|
||||
elemImgview.style.display = 'block';
|
||||
|
||||
// Mostrar/Ocultar control de albums
|
||||
if(is_album){
|
||||
elemImgviewControl.style.display = 'block';
|
||||
ventana_alto-=imgview_control_alto;
|
||||
if(imgview_href_anterior.length==0){
|
||||
elemAnt.style.display = 'none';
|
||||
}else{
|
||||
elemAnt.style.display = 'block';
|
||||
}
|
||||
if(imgview_href_siguiente.length==0){
|
||||
elemSig.style.display = 'none';
|
||||
}else{
|
||||
elemSig.style.display = 'block';
|
||||
}
|
||||
}else{
|
||||
elemImgviewControl.style.display = 'none';
|
||||
}
|
||||
|
||||
// Establecer la imagen precargada
|
||||
elemImg.src = href;
|
||||
elemImg.width = imgview_preloader.width;
|
||||
elemImg.height = imgview_preloader.height;
|
||||
|
||||
// Ajustar el tamanho de la imagen
|
||||
var relacion=elemImg.width/elemImg.height;
|
||||
if((elemImg.height+imgview_border*2)>ventana_alto){
|
||||
elemImg.height=ventana_alto-imgview_border*2;
|
||||
elemImg.width=elemImg.height*relacion;
|
||||
}
|
||||
if((elemImg.width+imgview_border*2)>ventana_ancho){
|
||||
elemImg.width=ventana_ancho-imgview_border*2;
|
||||
elemImg.height=elemImg.width/relacion;
|
||||
}
|
||||
|
||||
// Centrar imgview
|
||||
elemImgview.style.top =
|
||||
(pos_vert +
|
||||
((ventana_alto - elemImg.height) / 2) - imgview_border) + 'px';
|
||||
elemImgview.style.left =
|
||||
(pos_horiz +
|
||||
((ventana_ancho - elemImg.width) / 2) - imgview_border) + 'px';
|
||||
|
||||
|
||||
// Oclultar imagen de cargar y mostrar imgview
|
||||
if(elemImgCargando) {
|
||||
elemImgCargando.style.display = 'none';
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
imgview_preloader.src = href;
|
||||
elemEnlace.href = href;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////
|
||||
// ImgView_Show
|
||||
//
|
||||
function ImgView_Show(obj){
|
||||
imgview_nombre_album=obj.getAttribute("imgview_albumid");
|
||||
if(imgview_nombre_album){
|
||||
ImgView_ShowImage(obj.getAttribute("href"),true);
|
||||
}else{
|
||||
ImgView_ShowImage(obj.getAttribute("href"),false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////
|
||||
// ImgView_Hide
|
||||
//
|
||||
function ImgView_Hide(){
|
||||
var elemFondo = document.getElementById('imgview_fondo');
|
||||
var elemImgview = document.getElementById('imgview');
|
||||
var elemImgCargando = document.getElementById('imgview_imgcargando');
|
||||
var elemEnlace = document.getElementById('imgview_enlace');
|
||||
elemFondo.style.display = 'none';
|
||||
elemImgview.style.display = 'none';
|
||||
elemImgCargando.style.display = 'none';
|
||||
imgview_preloader.onload=function(){return false;}
|
||||
imgview_preloader.src = "";
|
||||
elemEnlace.href = "";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////
|
||||
// ImgView_ShowAnterior
|
||||
//
|
||||
function ImgView_ShowAnterior(obj){
|
||||
if(imgview_href_anterior.length){
|
||||
ImgView_ShowImage(imgview_href_anterior,true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////
|
||||
// ImgView_ShowSiguiente
|
||||
//
|
||||
function ImgView_ShowSiguiente(obj){
|
||||
if(imgview_href_siguiente.length){
|
||||
ImgView_ShowImage(imgview_href_siguiente,true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////
|
||||
// ImgView_Init
|
||||
//
|
||||
// Asociar al evento "onclick" la funcion "ImgView_Show" a los links con rel="imgview".
|
||||
// Anhadir el markup necesario para mostrar imagenes.
|
||||
function ImgView_Init(){
|
||||
var i;
|
||||
var enlaces;
|
||||
var scripts;
|
||||
var imgview_RegExp;
|
||||
var isimage_RegExp;
|
||||
|
||||
if (!document.getElementsByTagName){
|
||||
return;
|
||||
}
|
||||
|
||||
// HACK: Obtener el path donde de este mismo script
|
||||
scripts=document.getElementsByTagName("script");
|
||||
imgview_RegExp = /imgview\.js$/i;
|
||||
for(i=0;i<scripts.length;i++){
|
||||
if(imgview_RegExp.test(scripts[i].getAttribute("src"))){
|
||||
imgview_prefix=scripts[i].getAttribute("src").
|
||||
replace(imgview_RegExp,"");
|
||||
}
|
||||
}
|
||||
if(imgview_prefix.length<1){
|
||||
imgview_prefix=".";
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Iterar los enlaces
|
||||
enlaces = document.getElementsByTagName("a");
|
||||
imgview_RegExp = /^imgview\./i;
|
||||
isimage_RegExp = /\.gif$|\.jpg$|\.jpeg$|\.png$/i;
|
||||
for(i=0;i<enlaces.length;i++){
|
||||
link_href=enlaces[i].getAttribute("href");
|
||||
if(link_href && isimage_RegExp.test(link_href)){
|
||||
link_rel = enlaces[i].getAttribute("rel")
|
||||
// Enlace a imagen
|
||||
if(link_rel == "imgview"){
|
||||
// Imagen Normal
|
||||
enlaces[i].onclick =
|
||||
function () {
|
||||
ImgView_Show(this);
|
||||
return false;
|
||||
}
|
||||
}else{
|
||||
if(imgview_RegExp.test(link_rel)){
|
||||
// Imagen de Album
|
||||
nombre_album=link_rel.replace(imgview_RegExp,"");
|
||||
enlaces[i].setAttribute("imgview_albumid",nombre_album);
|
||||
enlaces[i].onclick =
|
||||
function () {
|
||||
ImgView_Show(this);
|
||||
return false;
|
||||
}
|
||||
}else{
|
||||
// Anhadir en el album global
|
||||
enlaces[i].setAttribute("imgview_albumid","imgview");
|
||||
enlaces[i].onclick =
|
||||
function () {
|
||||
ImgView_Show(this);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inyectar el link de la hoja de estilo
|
||||
var LinkHoja=document.createElement('link');
|
||||
LinkHoja.rel="stylesheet";
|
||||
LinkHoja.type="text/css";
|
||||
LinkHoja.href=imgview_prefix+"/imgview.css";
|
||||
document.getElementsByTagName("head")[0].appendChild(LinkHoja);
|
||||
|
||||
var elemCuerpo = document.body;
|
||||
|
||||
// Inyectar markup del fondo con la animacion de carga
|
||||
var elemFondo = document.createElement("div");
|
||||
elemFondo.setAttribute('id','imgview_fondo');
|
||||
elemFondo.onclick =
|
||||
function () {
|
||||
ImgView_Hide();
|
||||
return false;
|
||||
}
|
||||
elemFondo.style.display = 'none';
|
||||
elemFondo.style.position = 'absolute';
|
||||
elemFondo.style.top = '0';
|
||||
elemFondo.style.left = '0';
|
||||
elemFondo.style.zIndex = '90';
|
||||
elemFondo.style.width = '100%';
|
||||
elemCuerpo.insertBefore(elemFondo, elemCuerpo.firstChild);
|
||||
|
||||
|
||||
var elemImgCargando = document.createElement("img");
|
||||
elemImgCargando.src = imgview_prefix+"/cargando.gif";
|
||||
elemImgCargando.setAttribute('id','imgview_imgcargando');
|
||||
elemImgCargando.style.position = 'absolute';
|
||||
elemImgCargando.style.zIndex = '150';
|
||||
elemImgCargando.style.display = 'none';
|
||||
elemImgCargando.onclick =
|
||||
function () {
|
||||
ImgView_Hide();
|
||||
return false;
|
||||
}
|
||||
elemCuerpo.insertBefore(elemImgCargando, elemCuerpo.firstChild);
|
||||
|
||||
// Inyectar markup de imgview
|
||||
var elemImgview = document.createElement("div");
|
||||
elemImgview.setAttribute('id','imgview');
|
||||
elemImgview.style.display = 'none';
|
||||
elemImgview.style.position = 'absolute';
|
||||
elemImgview.style.zIndex = '100';
|
||||
elemCuerpo.insertBefore(elemImgview, elemFondo.nextSibling);
|
||||
var elemEnlace = document.createElement("a");
|
||||
elemEnlace.setAttribute('href','#');
|
||||
elemEnlace.setAttribute('id','imgview_enlace');
|
||||
elemEnlace.setAttribute('title','Click para cerrar');
|
||||
elemEnlace.onclick =
|
||||
function () {
|
||||
ImgView_Hide();
|
||||
return false;
|
||||
}
|
||||
elemImgview.appendChild(elemEnlace);
|
||||
var elemImg = document.createElement("img");
|
||||
elemImg.setAttribute('id','imgview_img');
|
||||
elemEnlace.appendChild(elemImg);
|
||||
var elemImgviewControl = document.createElement("div");
|
||||
elemImgviewControl.setAttribute('id','imgview_control');
|
||||
elemImgviewControl.style.display = 'none';
|
||||
elemImgview.appendChild(elemImgviewControl);
|
||||
|
||||
|
||||
var elemImgviewAnterior = document.createElement("div");
|
||||
elemImgviewAnterior.setAttribute('id','imgview_anterior');
|
||||
elemImgviewControl.appendChild(elemImgviewAnterior);
|
||||
elemImgviewAnterior.onclick =
|
||||
function () {
|
||||
ImgView_ShowAnterior(this);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
var elemImgviewSiguiente = document.createElement("div");
|
||||
elemImgviewSiguiente.setAttribute('id','imgview_siguiente');
|
||||
elemImgviewControl.appendChild(elemImgviewSiguiente);
|
||||
elemImgviewSiguiente.onclick =
|
||||
function () {
|
||||
ImgView_ShowSiguiente(this);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// Deshabilitar seleccion de la imagen
|
||||
elemImgview.onselectstart=function () {return false;}
|
||||
elemImgview.style.MozUserSelect="none";
|
||||
elemImg.onselectstart=function () {return false;}
|
||||
elemImgview.style.MozUserSelect="none";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Asociar la funcion de inciado al evento "onload"
|
||||
// sin evitar la ejecucion de lo que pudiera estar antes
|
||||
var imgview_oldonload = window.onload;
|
||||
if (typeof(imgview_oldonload)!='function'){
|
||||
window.onload = ImgView_Init;
|
||||
}else{
|
||||
window.onload = function(){
|
||||
imgview_oldonload();
|
||||
ImgView_Init();
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
-----------------
|
||||
---- ImgView ----
|
||||
-----------------
|
||||
|
||||
Informacion:
|
||||
------------
|
||||
ImgView es un visor de imagenes escrito en Javascript, diseñado para no
|
||||
entorpecer la navegacion de los usuarios.
|
||||
|
||||
Caracteristicas:
|
||||
----------------
|
||||
* Apertura de las imagenes en la propia pagina.
|
||||
* Fundido a negro del resto de la pagina.
|
||||
* Ajuste del tamaño de las imagenes para que no se salgan de la ventana.
|
||||
* Conserva la direccion del enlace original.
|
||||
* Sale clickando en cualquier sitio.
|
||||
* Soporte para albumes de fotos.
|
||||
* Asimilacion de todos los enlaces a imagenes por defecto.
|
||||
|
||||
Historial:
|
||||
----------
|
||||
1.0 2010-1-3 :
|
||||
* Version inicial.
|
||||
1.1 2010-1-5 :
|
||||
* Corregida necesidad de cargar el script en la seccion head.
|
||||
* Funcionalidad basica de album implementada.
|
||||
1.2 2010-5-18 :
|
||||
* Asimilado de todos los enlaces a imagenes en un album general.
|
||||
* Iconos de anterior y siguiente de los albums, nuevos.
|
||||
* Ocultado de iconos de anterior siguiente al principio y al
|
||||
final del album respectivamente.
|
||||
|
||||
Instalacion:
|
||||
------------
|
||||
Descomprimir en algun directorio accesible al exterior mediante el servidor web.
|
||||
|
||||
Uso:
|
||||
----
|
||||
Para usarlo hay que cargar el script "imgview.js" en las paginas
|
||||
donde quiera ser usado:
|
||||
|
||||
<script type="text/javascript" src="imgview/imgview.js"></script>
|
||||
|
||||
Con esto todos los enlaces a imagenes usaran imgview. Es recomendable
|
||||
insertar una imagen en miniatura dentro del enlace.
|
||||
|
||||
Uso Avanzado:
|
||||
-------------
|
||||
|
||||
Para mostrar una imagen independiente de cualquier album:
|
||||
|
||||
<a href="imagen.jpg" rel="imgview"><img src="thumb.jpg"></a>
|
||||
|
||||
Para crear albumes independientes; poner a todas las imagenes del mismo grupo
|
||||
rel="imgview.album", siendo "album" el nombre para esa coleccion:
|
||||
|
||||
<a href="imagen1.jpg" rel="imgview.album"><img src="thumb1.jpg"></a>
|
||||
<a href="imagen2.jpg" rel="imgview.album"><img src="thumb2.jpg"></a>
|
||||
|
||||
Licencia:
|
||||
---------
|
||||
ImgView es Dominio Publico. Esto significa que se puede hacer con el
|
||||
lo que se quiera sin haber ninguna garantia de reembolso o idoneidad.
|
||||
Se aprecia que la fuente sea citada.
|
||||
|
||||
|
||||
Copyright (c) 2010 Valeriano Alfonso
|
||||
|
Before Width: | Height: | Size: 1003 B |
104
web/index.html
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
|
||||
<meta name="author" content="Valeriano Alfonso" >
|
||||
<meta name="description" content="Lonely Ruins" >
|
||||
<meta name="keywords" content="linux windows game lonely ruins robot kitten">
|
||||
<meta name="Copyright" content="Copyright (c) 2011-2012 by Valeriano Alfonso, All Right Reserved">
|
||||
<meta content="ALL" name="ROBOTS">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script type="text/javascript" src="imgview/imgview.js"></script>
|
||||
<title>Lonely Ruins</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="contenedor">
|
||||
<table border="0" cellspacing="0" cellpadding="0" align="center">
|
||||
<tr><td>
|
||||
|
||||
<div class="cabecera">
|
||||
<a class="titulo" href="./"><!-- LOGO--><img src="imagenes/logo_lonelyruins_web.png"></a>
|
||||
<div class="navbar">
|
||||
<!-- NAVBAR-->
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#play">Play</a></li>
|
||||
<li><a href="#screenshots">Screenshots</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="contenido">
|
||||
|
||||
<!-- CONTENIDO -->
|
||||
|
||||
|
||||
<!--ABOUT-->
|
||||
<a name="about"></a>
|
||||
<h1>About</h1>
|
||||
You are a robot on a rescue mision.<br>
|
||||
The rescuer and the rescued are alone<br>
|
||||
in a strange place.<br>
|
||||
<br>
|
||||
Good Luck!<br>
|
||||
<p> </p>
|
||||
|
||||
<!--PLAY-->
|
||||
<a name="play"></a>
|
||||
<h1>Play</h1>
|
||||
<div class="columnContainer">
|
||||
<div class="column2" style="text-align: center;">
|
||||
<a href="play.html" class="playLink">► Play</a>
|
||||
</div>
|
||||
<div class="column2" style="text-align: center;">
|
||||
<a href="https://play.google.com/store/apps/details?id=com.var.lonelyruins"><img alt="Get it on Google Play" src="https://developer.android.com/images/brand/en_generic_rgb_wo_45.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
<p> </p>
|
||||
|
||||
|
||||
|
||||
<!--SCREENSHOTS-->
|
||||
<a name="screenshots"></a>
|
||||
<h1>Screenshots</h1>
|
||||
<p>
|
||||
<span style="vertical-align:top;">
|
||||
<a href="sshots/20120102/shot-20120102-1.png" rel="imgview.lonelyruins"><img src="sshots/20120102/shot-20120102-1.thumb.png"></a>
|
||||
<a href="sshots/20120102/shot-20120102-2.png" rel="imgview.lonelyruins"><img src="sshots/20120102/shot-20120102-2.thumb.png"></a>
|
||||
<a href="sshots/20120102/shot-20120102-3.png" rel="imgview.lonelyruins"><img src="sshots/20120102/shot-20120102-3.thumb.png"></a>
|
||||
</span>
|
||||
</p>
|
||||
<p> </p>
|
||||
|
||||
|
||||
<!--CONTACT-->
|
||||
<a name="contact"></a>
|
||||
<h1>Contact</h1>
|
||||
<ul>
|
||||
<li><a href="http://varstudio.com">VAR Studio (Main site in spanish).</a></li>
|
||||
</ul>
|
||||
|
||||
<p> </p>
|
||||
<div class="toTop"><a href="#top">Back to top.</a></div>
|
||||
<p> </p>
|
||||
|
||||
|
||||
|
||||
<!-- PIE -->
|
||||
<div class="pie">
|
||||
<b>Copyright © 2011-2014 <a href="/">Valeriano Alfonso</a>.</b>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
web/join.php
@@ -1,36 +0,0 @@
|
||||
<?php
|
||||
|
||||
// split -b 1024 -a 4 -d game.js game.js
|
||||
$filelist=array();
|
||||
$fileout="game.js";
|
||||
for($i=0;$i<564;$i++){
|
||||
$filelist[]=sprintf("game.js%04d",$i);
|
||||
}
|
||||
|
||||
// Quitar el limite de tiempo
|
||||
set_time_limit(0);
|
||||
|
||||
// Fusionar ficheros
|
||||
$out=fopen($fileout,"wb") or die("error creating/opening merged file");
|
||||
foreach($filelist as $file){
|
||||
$size=filesize($file);
|
||||
$in=fopen($file,"rb") or die("error opening file");
|
||||
$data=fread($in, $size) or die("error reading file");
|
||||
fclose($in);
|
||||
fwrite($out,$data,$size) or die("error writing to merged file");
|
||||
}
|
||||
fclose($out);
|
||||
|
||||
|
||||
// Limpiar
|
||||
foreach($filelist as $file){
|
||||
unlink($file);
|
||||
}
|
||||
unlink("join.php");
|
||||
|
||||
?>
|
||||
<html>
|
||||
<body>
|
||||
<h1>OK!</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 11 KiB |
133
web/play.html
@@ -1,133 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Lonely Ruins</title>
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Verdana,Arial,Helvetica,sans-serif;
|
||||
background-color:#000000;
|
||||
color: #777777;
|
||||
font-size: 10pt;
|
||||
}
|
||||
h1{
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header{
|
||||
margin:0 auto;
|
||||
width:600px;
|
||||
padding-top:10px;
|
||||
text-align:center;
|
||||
}
|
||||
.progress-container{
|
||||
border: 1px solid #808080;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
box-shadow: 0px 0px 5px #808080;
|
||||
}
|
||||
.progress-container progress{
|
||||
width:100%;
|
||||
}
|
||||
.game-screen-container{
|
||||
margin:0 auto;
|
||||
width:640px;
|
||||
padding-top:10px;
|
||||
}
|
||||
.game-screen-container canvas{
|
||||
border: 1px solid #808080;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
box-shadow: 0px 0px 5px #808080;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="titulo" href="./"><img
|
||||
src="imagenes/logo_lonelyruins_web_mini.png"></a>
|
||||
</div>
|
||||
<div class="game-screen-container">
|
||||
<div id="progress-container" class="progress-container">
|
||||
<h1>Loading...</h1>
|
||||
<span>Code:</span></br>
|
||||
<progress id="progress-code" max="1" value="0"></progress></br>
|
||||
</br>
|
||||
<span>Data:</span></br>
|
||||
<progress id="progress-data" max="1" value="0"></progress></br>
|
||||
</div>
|
||||
<canvas class="game-screen" id="canvas" style="display:none;"
|
||||
oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var Module = {
|
||||
preRun: [function (){
|
||||
FS.mkdir('/saves');
|
||||
FS.mount(IDBFS, {}, '/saves');
|
||||
addRunDependency("SaveDir");
|
||||
FS.syncfs(true, function (err) {
|
||||
removeRunDependency("SaveDir");
|
||||
});
|
||||
}],
|
||||
postRun: [],
|
||||
canvas: document.getElementById('canvas'),
|
||||
progressContainer: document.getElementById('progress-container'),
|
||||
progressCode: document.getElementById('progress-code'),
|
||||
progressData: document.getElementById('progress-data'),
|
||||
print: function(text) {
|
||||
if(console && console.log){
|
||||
console.log(text);
|
||||
}
|
||||
},
|
||||
printErr: function(text) {
|
||||
this.print(text);
|
||||
},
|
||||
setStatus: function(text) {
|
||||
this.print(text);
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
if(m){
|
||||
this.progressData.value = parseInt(m[2]);
|
||||
this.progressData.max = parseInt(m[4]);
|
||||
}
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
if(!left){
|
||||
// All loaded
|
||||
this.progressContainer.style.display="none";
|
||||
this.canvas.style.display="block";
|
||||
}
|
||||
},
|
||||
LaunchCode: function (){
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', "game.js", true);
|
||||
xhr.responseType = 'text';
|
||||
xhr.onprogress = function(event) {
|
||||
this.progressCode.value = event.loaded;
|
||||
this.progressCode.max = event.total;
|
||||
}.bind(this);
|
||||
xhr.onload = function(event) {
|
||||
var packageData = xhr.response;
|
||||
// Launch loaded code
|
||||
eval.call(null,packageData);
|
||||
};
|
||||
xhr.onerror = function(event) {
|
||||
alert(event);
|
||||
};
|
||||
xhr.send(null);
|
||||
}
|
||||
};
|
||||
Module.LaunchCode();
|
||||
</script>
|
||||
<!-- <script async type="text/javascript" src="game.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 192 KiB |
|
Before Width: | Height: | Size: 28 KiB |
223
web/style.css
@@ -1,223 +0,0 @@
|
||||
/***********************************************
|
||||
* Copyright (c) 2012 Valeriano Alfonso *
|
||||
***********************************************/
|
||||
|
||||
|
||||
|
||||
/* Elementos Base */
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Verdana,Arial,Helvetica,sans-serif;
|
||||
background-color:#000000;
|
||||
color: #777777;
|
||||
font-size: 10pt;
|
||||
}
|
||||
h1{
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
h2{
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.75em;
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
h3{
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
h4{
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
p,li,td{
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 10pt;
|
||||
}
|
||||
li {
|
||||
padding:2px;
|
||||
}
|
||||
img {
|
||||
border:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Links normales */
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight: bold;
|
||||
display:inline;
|
||||
}
|
||||
a:link {
|
||||
color: #7777FF;
|
||||
}
|
||||
a:visited {
|
||||
color: #7777FF;
|
||||
}
|
||||
a:hover {
|
||||
color: #FFFFFF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:active {
|
||||
color: #CBB545;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Estilo de Lonely Ruins */
|
||||
.contenedor {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
.cabecera {
|
||||
width: 700px;
|
||||
height:130px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
.titulo {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
vertical-align:bottom;
|
||||
position:absolute;
|
||||
}
|
||||
a.titulo:hover {
|
||||
background:none;
|
||||
}
|
||||
a.titulo img {
|
||||
border:none;
|
||||
}
|
||||
a.titulo:hover img{
|
||||
border:none;
|
||||
}
|
||||
.contenido {
|
||||
width: 700px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
position:relative;
|
||||
margin: 0 auto;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
.pie {
|
||||
width:700px;
|
||||
height: 64px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
position:relative;
|
||||
margin: 0 auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar {
|
||||
height:130px;
|
||||
width:500px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
vertical-align:bottom;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
}
|
||||
.navbar ul {
|
||||
list-style:none;
|
||||
list-style-type:none;
|
||||
list-style-position:inside;
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
display:block;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
}
|
||||
.navbar li{
|
||||
padding:0px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
margin: 1px;
|
||||
border-left:1px solid #777777;
|
||||
}
|
||||
.navbar li:first-child{
|
||||
border-left:none;
|
||||
}
|
||||
|
||||
/* links del navbar */
|
||||
.navbar a {
|
||||
padding: 4px;
|
||||
font-size:12pt;
|
||||
display:block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.toTop{
|
||||
text-align:right;
|
||||
font-size:7pt;
|
||||
}
|
||||
|
||||
|
||||
.columnContainer{
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.column2{
|
||||
width:50%;
|
||||
display:inline-block;
|
||||
font-size: 10pt;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
.playLink{
|
||||
font-size:25px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
border: solid 1px grey;
|
||||
width:127px;
|
||||
height:43px;
|
||||
line-height:43px;
|
||||
}
|
||||
.playLink:link{
|
||||
color: #777777;
|
||||
}
|
||||
.playLink:hover{
|
||||
box-shadow: 0 0 5px white;
|
||||
text-shadow: 0 0 2px white;
|
||||
border: solid 1px white;
|
||||
text-decoration:none;
|
||||
color: white;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 28 KiB |