Programming

Fancybox 2 Gallery by Ajax response

Llamamos una galeria desde la etiqueta HTML <a href='javascript:void(0);' id='' />galeria</a> usando Ajax generado por PHP

Codigo Javascript:

 
jQuery(function($)
{
        //al hacer click en determinada etiqueta ejecutamos la llamada ajax y con la respuesta
        //recogida generamos un slide show
        $('.gellery_from_link a').live('click', function()
	{
		var item = $(this); //get a href
 
		$.fancybox.showActivity();
 
		$.ajax({
			url: '?action=gallery&rand='+Math.random(), //rand for hotlink scripting
			data: 'gallery_id='+item.attr('id'), // get a href id for generate ajax result
			type: 'POST',
			dataType: 'json',
			cache: false,
			success: function(data)
			{
				$.fancybox(data,
				{
					type: 'image', //important
					autoScale: true,
					transitionIn:	'elastic',
					transitionOut:	'elastic',
					padding: 20,
				});
			}
		});
 
	});
});
 

Php > generando la respuesta ajax:

 
< ?php
 
//Hot Link script
function IsHotlink()
{
	$domain = explode("/",$_SERVER['PHP_SELF']);
	$isFromDomain = strstr($_SERVER['HTTP_REFERER'],$domain[2]);
	$isFromAjax = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
	$isHotlink = !$isFromDomain && !$isFromAjax;
	return $isHotlink;
}
 
if( $_REQUEST['action'] == 'gallery' && !IsHotlink() )
{
	$dm->gallery_id = $_REQUEST['gallery_id']; //recogemos $_POST id de la galleria
 
	$dm->fdir = "gallery/".$dm->gallery_id."/"; //ruta hasta lacarpeta con id de la galeria
	$dm->fItems = read_dir($dm->fdir);
 
	$dm->items = array();
 
	foreach( $dm->fItems as $v => $k )
	{
		array_push($dm->items, array('href' => $dm->fdir.$dm->fItems[$v]) );
	}
 
	exit( json_encode( $dm->items ) ); //generamos la respuesta ajax y cerramos el documento.
 
/*
ejemplo de la respuesta:
[href: "/gallery/2011-11-25_1.JPG", href: "/gallery/2011-11-25_2.JPG"]
*/
}
?>
 

Sotaventobcn.com

sotaventobcn.com
Url: http://sotaventobcn.com/

Cliente: GrupoCostaEste
Información: Muntaner 240 3°2° 08021 BARCELONA (93) 414-63-62
Estado: Operativa (BETA)

Sotavento, situado en un emplazamiento ideal, enfrente de la playa y con unas privilegiadas vistas al mar, ofrece servicios de Restaurante, Bar, y Club.

Equipo:

  • Diseño: Alberto Ventosa Rodriguez
  • Supervisores: Arturo Segura & Alfonso Sostres
  • Seo / Comunity manager: Ivan Sanchez Lopez

Tecnología usada:

  • Css3
  • Html5
  • JavaScript (jQuery)
  • Ajax
  • Facebook Graph
  • Twitter Api
  • en base de WordPress

Lenguas: Español y Ingles

Homologación Legal

homologacionlegal.com
Url: http://homologacionlegal.com/

Cliente: Alex y Neftalí
Información: Ronda de General Mitre 116, bajos 08021 Barcelona - Tel: (+34) 93 112 08 50
Estado: Beta Testing

En CAHL – Centro de Asesoramiento y Homologación Legal le orientamos sobre los procedimientos que debe realizar para poder iniciar los trámites de homologación de todo tipo de diplomas, titulos y otros documentos.

Tecnología usada:

  • Css3
  • Html5
  • JavaScript (jQuery)
  • Ajax
  • Twitter
  • en base de WordPress

Lenguas: Ingles y Español

Cachitos Barcelona

cachitosbcn.com
Url: http://cachitosbcn.com/

Cliente: GrupoCostaEste
Información: Muntaner 240 3°2° 08021 BARCELONA (93) 414-63-62
Estado: Operativa

No hay amor más sincero que el amor a la comida "George Bernard Shaw" una frase con cual se identifica un nuevo local de centro de Barcelona. Es un local de tapas y copas totalmente distinto a los que proponen una oferta culinaria similar. El local dispone de varias plantas y una terraza.

Tecnología usada:

  • Css3
  • Html5
  • JavaScript (jQuery)
  • Ajax
  • Facebook Graph
  • en base de WordPress

BMC 2011

barcelonamusicconference.com
Url: http://barcelonamusicconference.com/

Cliente: GrupoCostaEste
Información: Muntaner 240 3°2° 08021 BARCELONA (93) 414-63-62
Estado: Operativa

Propuesta de diseño para una fiesta anual cual tomara hogar en el local OpiumMar de Barcelona.
Cada año esta fiesta atrae a mejores Dj's de la actualidad de todo el mundo.

Tecnología usada:

  • Css3
  • Html5
  • JavaScript (jQuery, Modernizr)
  • Ajax
  • Twitter API, Facebook Graph y Youtube Api
  • en base de WordPress

Lenguas: Ingles y Español

SAMSARA LOUNGE CLUB Splash

samsaralounge.es
Url: http://www.samsaralounge.es/

Cliente: GrupoCostaEste
Información: Muntaner 240 3°2° 08021 BARCELONA (93) 414-63-62

Splash temporal para un Lounge Club que se situa en C/Tuset 10, 08021 de Barcelona tel:934 146 362

Tecnología usada:

  • Css2
  • Html

CACHITOS Splash

cachitosbcn.com
Url: http://www.cachitosbcn.com/

Cliente: GrupoCostaEste
Información: Muntaner 240 3°2° 08021 BARCELONA (93) 414-63-62

Splash temporal para un restaurante recien inagurado que se situa en Rambla de Catalunya nº33, 08017 BARCELONA - Tel: 93 215 2718.

Tecnología usada:

  • Css2 / Css3
  • Html
  • JavaScript

Mis-Pegatinas

Mis-Pegatinas.es
Url: http://www.mis-pegatinas.es

Cliente: Tjalja Schaaf
Diseño: Sebastiaan van Kempen

Estado: Operativa

Tecnología usada:

  • Html / Css2
  • JavaScript
  • jQuery
  • Flash "Flex"
  • PHP "Wp3.0"
  • PayPal Integration TPV

Lenguas: Español y Ingles

Backup MySQL con un comando

Aveces tenemos que hacer backup de toda base de datos, para ello tenemos que acceder a panel control, phpMyAdmin, teclear contraseñas, seleccionar etc...

En todo este proceso podemos perder unos 15 - 20 minutos....

Imaginaros que este proceso de clicks y pasos se puede simplificar con tan solo una línea de comando!

¿Como y que se necesita?
Único que se necesita es tener instalado MySQL o tener acceso a al server donde este instalado. En concreto necesitamos archivo llamado "mysqldump".

Con siguiente comando exportamos toda la base de datos hacia un archivo de texto:

 
$ mysqldump -u [NOMBRE_DE_USUARIO] -h [DIR_DEL_HOST] -p [TABLA] > c:\dump_sql.txt
$ password: ******
 

Explicación:

  • -u Nombre de usuario del host donde se encuentra nuestra BBDD.
  • -h Dirección donde nos vamos a conectar. Ej.: nuestrohosting.com o dirección ip.
  • -p Nombre de la tabla que vamos a exportar. (Aquí hay dos opciones una indicando la tabla que queramos o otra exportar todas las tablas para ello solo tenemos que poner siguiente comando "--all-databases")

Una vez apretado enter el sistema nos pedirá contraseña correspondiente de nuestro host. El proceso tardara tiempo equivalentemente proporcional al tamaño de BBDD.

Resultado de exportación:

 
-- MySQL dump 10.13  Distrib 5.1.36, for Win32 (ia32)
--
-- Host: myhost.com    Database: gce_mbc
-- ------------------------------------------------------
-- Server version	5.0.90-log
 
--
-- Table structure for table `gce_mbc_bwbps_galleries`
--
 
DROP TABLE IF EXISTS `gce_mbc_bwbps_galleries`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `gce_mbc_bwbps_galleries` (
  `gallery_id` BIGINT(20) NOT NULL AUTO_INCREMENT,
  `post_id` BIGINT(20) DEFAULT NULL,
  `updated_date` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP on UPDATE CURRENT_TIMESTAMP,
  `layout_id` INT(4) DEFAULT NULL,
  `use_customform` TINYINT(1) DEFAULT NULL,
  `rating_position` INT(4) DEFAULT NULL,
  `pext_insert_setid` INT(4) DEFAULT NULL,
  PRIMARY KEY  (`gallery_id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;
 
--
-- Dumping data for table `gce_mbc_bwbps_galleries`
--
 
LOCK TABLES `gce_mbc_bwbps_galleries` WRITE;
/*!40000 ALTER TABLE `gce_mbc_bwbps_galleries` DISABLE KEYS */;
INSERT INTO `gce_mbc_bwbps_galleries` VALUES (NULL),(NULL);
/*!40000 ALTER TABLE `gce_mbc_bwbps_galleries` ENABLE KEYS */;
UNLOCK TABLES;
 

Resize and Centered Thickbox 3.1

Con este código re-dimensionamos la ventana abierta de Thickbox

 
<script>
function dm_simpleResize(TB_newWidth , TB_newHeight )
{
 jQuery('#TB_window').width(TB_newWidth).height(TB_newHeight).css({marginLeft: '-' + parseInt((TB_newWidth / 2),10) + 'px', width: TB_newWidth + 'px'});
 
 if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) 
 { 
	jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_newHeight / 2),10) + 'px'});
 }
}
</script>
</script>

Re-dimensionamos la ventana abierta de Thickbox con animación

 
<script>
function dm_animateResize(TB_newWidth , TB_newHeight, TB_speedAnim )
{
jQuery('#TB_window').animate({
width: TB_newWidth ,
height: TB_newHeight ,
marginLeft: '-' + parseInt((TB_newWidth / 2),10) + 'px',
marginTop: '-' + parseInt((TB_newHeight / 2),10) + 'px'
},TB_speedAnim );
}
</script>
 

Con este cambiamos el titulo de la ventana abierta

 
<script>
function dm_renameWindow(TB_newTitle)
{
 jQuery('#TB_ajaxWindowTitle').html(TB_newTitle).fadeIn('slow');
}
</script>
 

Para manejar la el contenido o el centro de la ventana abierta hay que modificar css con siguiente id "#TB_ajaxContent".

Go to Top