Weblogs Código

RecorteX

» imagenes
73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
Estás viendo los recortes de la etiqueta imagenes

RSS
Recortes: 7

Etiquetas relacionadas:
php
jpg
javascript
mascara
extension
filtrar
scroll

Clase para creacion dinamica de Galeria de Imagenes sin BD

Esta es una clase que permite de manera dinamica crear tu galeria de imagenes, funciona sobre todo para casos donde no tienes una BD donde apoyarte para la creacion de tus albums de imagenes, creo que aun le voy a poner mas cosas, aqui en este sitio encontre una funcion para crear thumbsnails, que quisiera acoplar a esta clase.

 
/*******************
CLASE GALERIA
 
METODOS
	mostrarGaleria($id,$max); lista todas las imagenes que aparecen en el directorio seleccionado, este directorio 
							viene especificado en la variable $id.
							El argumento $max define cuantas fotos como maximo son mostradas.
	crarMiniGalerias($ini);el argumento $ini define desde donde empieza a mostrar, funciona para hacer la paginacion
***************/
class Galeria
{
	function mostrarGaleria($id,$max){	
		$ext = array("jpg", "png", "jpeg", "gif");//@LISTA DE EXTENSIONES ACEPTABLES
		$c=0;//@CONTADOR DEL NUMERO DE ARCHIVOS ENCONTRADOS SEGUN EL FILTRO;
		$datos=array();
		$a=3;
		//@$a=5;//@ESPECIFICA EL NUMERO DE ARCHIVOS QUE DEBE TENER CADA LISTA;		
		$dir="./galerias/".$id;
		if(is_dir($dir)){
			if ($gestor = opendir($dir)) {
				include ("./galerias/$id/datos.php");	
				echo "\t<div class='galeria'>\n";			
				echo "<p class='titulo'> $titulo </p>";
				echo "\n\t<div>\n";			
				echo "\t\t<ul>\n";
				if($max==0){
				   while (false !== ($archivo = readdir($gestor))) {
								   if ($archivo != "." && $archivo != "..") {													
										for($i=0;$i<sizeof($ext);$i++){
											if(stristr($archivo, ".".$ext[$i])){																	
												if ($c%$a==0 && $c!=0)
												{	echo "\t</ul>\n";
													echo "\t<ul>\n";
													echo "<li class='fila'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo'/> </a></li>\n";
												}
												else
												{
													echo "<li class='fila'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo' /> </a></li>\n";
												}
												$c++;																			
											}
										}
						   }
				   }
				}
				else{	while(!false==($archivo=readdir($gestor)) and $c<$max){				
								if ($archivo != "." && $archivo != "..") {													
												for($i=0;$i<sizeof($ext);$i++){
													if(stristr($archivo, ".".$ext[$i])){																	
														if ($c%$a==0 && $c!=0)
														{	echo "\t</ul>\n";
															echo "<ul>\n";
															echo "<li class='image'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo' /> </a> </li>\n";
														}
														else
														{
															echo "<li class='image'> <a href='$dir/$archivo' class='imagen' target='_blank'> <img src='$dir/$archivo' alt='$archivo' /> </a> </li>\n";
														}
														$c++;									
													}
								}
								
						}		
					}	
				}
				
				echo "\t</ul>\n";
				echo "<div class='descripcion'> $descripcion </div>\n\t";
				if($max!=0){
					echo"\n\t<a href='galeria.php?gid=$id' class='oDir'> ver [+] </a>";
				}
				echo "\n\t</div>\n";	   
			   echo "</div>\n";
				closedir($gestor);
			}			
		}		
	}
	
 
	function creaMiniGalerias($ini)
	{
		echo "<div id='miniGalerias'>";
		if($ini!=1)
		{	$ini=$ini*2+1;
		}
			$max=$ini+3;
		for($i=$ini;$i<=$max;$i++)			
		{	$id='g'.$i;
			$this->mostrarGaleria($id,3);			
		}		
		echo "</div>";
		
		$dir="./galerias/";
		if ($gestor = opendir($dir)) {
			$g=0;
			echo "<div id='menuGal'>";
			 while (false !== ($archivo = readdir($gestor))) {
								   if ($archivo != "." && $archivo != "..") 
								   {		if($g%4==0)
											{	$c++;
												echo " <a href='galerias.php?n=$c'> [$c] </a> ";											
											}
											$g++;
								   }
				}
			echo "</div>";
		}
				
	}
	
	function numGalerias()
	{	$dir="./galerias";
		if ($gestor = opendir($dir)) {
			$g=0;
			 while (false !== ($archivo = readdir($gestor))) {
								   if ($archivo != "." && $archivo != "..") 
								   {		$g++;
								   }
				}
		}		
		return $g;
		
	}
	
	function creaMiniGaleriasPortada()
	{	
		$n=$this->numGalerias();
		echo "<div>";
		for($i=$n-2;$i<=$n;$i++)
		{	$id="g".$i;
			//echo $id;
			$this->mostrarGaleria($id,2);
		}
		echo "</div>";
	}
}
 

Listas Imagenes de un directorio filtrando por extension(es)

Obtener en un array una lista de todas las imagenes contenidas en un determinado directorio, junto con algunos datos relativos a dichas imagenes, se puede filtrar por extensiones mediante una mascara
 
 
imagenes_en_dir = listgal("fotos/", ".jpg$|.jpeg$|.png$|.gif$");
 
function listgal($dr, $mk)
{
	$fg = Array();
 
	if($hd = opendir($dr))
	{
		while (false !== ($fn = readdir($hd)))
		{
			if($fn == "." || $fn == "..") continue;
 
			if(is_file($dr."/".$fn))
			{
				if(eregi($mk, $fn))
				{
					$fz = filesize($dr. "/" . $fn);
					$iz = getimagesize($dr. "/". $fn);
					
					if($iz[0] && $iz[1] && $fz)
						$fg[] = array("name" => $fn, "width" => $iz[0],  "height" => $iz[1], "size" => $fz, "type" => $iz[2]);
				}
			}
		}
		closedir($hd);
       }
       return $fg;
}
 

Mueve el scroll de una capa al pasar el ratón

Ideal para hacer un carrusel del fotos en una capa de ancho limitado, y que estas se desplacen al pasar el ratón sobre la capa.

El alto de la capa se ajustará al máximo alto de las imágenes que contenga. Estas imágenes se situarán en línea (una detrás de otra) separadas por 5 pixels.

Al pasar el ratón por la derecha o por la izquierda de la capa, se desplazará el contenido de esta para acceder a las imágenes que no aparecen en ese momento.

Código CSS necesario:
 
.st {
	position: relative; /* obligatorio */
	width : 160px;  /* ajustable */
	overflow : hidden; /* obligatorio */
}
 
Código Javascript necesario:
 
<script type="text/javascript">
window.onload = f_init;
 
var oDiv  = null;
var hInt  = null;
var nDir  = 0;
 
function f_init() {
	var nCoordX = 0;
	var nMaxH   = 0;
	var nlDivs  = document.getElementsByTagName("div");
	for(i=0; i<nlDivs.length; i++) {
		var oDiv = nlDivs[i];
		if(oDiv.className=="st") {
			oDiv.onmouseover = f_mover;
			oDiv.onmousemove = f_mmove;
			oDiv.onmouseout  = f_mout;
			oDiv.move        = f_move;
			for(ii=0; ii<oDiv.childNodes.length; ii++) {
				var oImg = nlDivs[i].childNodes[ii];
				if(oImg.tagName=="IMG") {
					oImg.style.position = "absolute";
					oImg.style.left     = nCoordX+"px";
					nCoordX += oImg.width + 5;
					nMaxH    = Math.max(nMaxH, oImg.height);
				}
			}
			oDiv.scrollLeft   = 0;
			oDiv.maxScrollW   = oDiv.scrollWidth - oDiv.offsetWidth;
			oDiv.centerX      = (oDiv.offsetWidth / 2);
			oDiv.style.height = nMaxH+"px";
		}
	}
}
function f_mover() {
	if(hInt != null) window.clearInterval(hInt);
	oDiv  = this;
	hInt  = window.setInterval(f_move, 10);
}
function f_mmove(event) {
	if(event == null) event = window.event;
	var x  = event.clientX - this.offsetLeft;
	if(x < this.centerX && this.scrollLeft>0              ) nDir = -1;
	if(x > this.centerX && this.scrollLeft<this.maxScrollW) nDir = +1;
}
function f_mout() {
	window.clearInterval(hInt);
	hInt = null;
	oDiv = null;
}
function f_move() {
	oDiv.scrollLeft += nDir;
}
 
Y código HTML de ejemplo:

<div class="st">
	<img src="imagen1.jpg" title="thumb #1" />
	<img src="imagen2.jpg" title="thumb #2" />
	<img src="imagen3.jpg" title="thumb #3" />
	<img src="imagen4.jpg" title="thumb #4" />
</div>

Cambia una imagen por otra haciendo un fundido al fondo

Cambia una imagen por otra haciendo un fundido al fondo. Funciona con múltiples imágenes, al llegar a la última regresa a la primera.

<img class="ic" src="imagenes/imagen1.jpg" srcalt="imagen2.jpg;imagen3.jpg" alt="Pulsa sobre la imágen para cambiarla por otra" />
 
window.onload = f_init;
 
var isExplorer = (document.all ? true : false);
var hFade      = null;
var imgFade    = null;
var imgAlfa    = 10;
 
function f_init() {
	var nlImgs = document.getElementsByTagName("img");
	for(i=0; i<nlImgs.length; i++) {
		if(nlImgs[i].className=="ic") {
			var nSlash = 1 + nlImgs[i].src.lastIndexOf("/");
			var sURL   = nlImgs[i].src.substr(0, nSlash);
			nlImgs[i].onclick  = f_changeImg;
			nlImgs[i].step     = 0;
			nlImgs[i].cimg     = 0;
			nlImgs[i].srcalt   = nlImgs[i].getAttribute("srcalt").split(";");
			for(ii=0; ii<nlImgs[i].srcalt.length; ii++)
				nlImgs[i].srcalt[ii] = sURL + nlImgs[i].srcalt[ii];
			nlImgs[i].srcalt[ii] = nlImgs[i].src;
			if(isExplorer)
				nlImgs[i].runtimeStyle.filter = "progid:DXImageTransform.Microsoft.Alpha";
		}
	}
}
 
function f_changeImg() {
	window.clearInterval(hFade);
	if(this.className=="ic") imgFade = this;
	switch(imgFade.step) {
		case 0:
			imgFade.step = 1;
			f_startFadeOff();
			break;
		case 1:
			imgFade.step = 2;
			f_changeSrc();
			break;
		case 2:
			imgFade.step = 3;
			f_startFadeOn();
			break;
		case 3:
			imgFade.step = 0;
			imgFade.onclick = f_changeImg;
			break;
	}
}
 
function f_changeSrc() {
	imgFade.cimg++;
	if(imgFade.cimg == imgFade.srcalt.length) imgFade.cimg = 0;
	imgFade.src = imgFade.srcalt[imgFade.cimg];
	f_changeImg();
}
 
function f_startFadeOff() {
	imgFade.onclick = null;
	hFade   = window.setInterval(f_fadeOff, 100);
}
 
function f_fadeOff() {
	imgAlfa -= 1;
	imgFade.style.MozOpacity = (imgAlfa/10);
	if(isExplorer)
		imgFade.filters.item("DXImageTransform.Microsoft.Alpha").opacity = imgAlfa*10;
	if(imgAlfa==0) {
		f_changeImg();
	}
}
 
function f_startFadeOn() {
	imgFade.onclick = null;
	hFade   = window.setInterval(f_fadeOn,  100);
}
 
function f_fadeOn() {
	imgAlfa += 1;
	imgFade.style.MozOpacity = (imgAlfa/10);
	if(isExplorer)
		imgFade.filters.item("DXImageTransform.Microsoft.Alpha").opacity = imgAlfa*10;
	if(imgAlfa==10) {
		f_changeImg();
	}
}
 

Escala una imágen forzando un alto máximo

Escala una imágen forzando un alto máximo.
 
function f_resizeMaxHeight($file, $height) {
	$imSrc  = imagecreatefromjpeg($file);
	$w      = imagesx($imSrc);
	$h      = imagesy($imSrc);
	if($h>$height) {
		$width = ($w/$h)*$height;
		$imTrg  = imageCreateTrueColor($width, $height);
		imagecopyresized($imTrg, $imSrc, 0, 0, 0, 0, $width, $height, $w, $h);
		imagedestroy($imSrc);
		imagejpeg($imTrg, $file, 95);
		imagedestroy($imTrg);
	} else {
		imagedestroy($imSrc);
	}
}
 

Escalado de una imagen forzando ancho y alto sin deformarla

Escala una imágen al máximo ancho o al máximo alto, según sea su proporción y la proporción deseada, y coge la parte central del resultado garantizando la proporcion deseada.

Dicese, de una imagen de 1600 x 1200, si se solicita 350x300, la escalará a 400x300 y cogerá de 25,0 a 375,300 garantizando un escalado sin distorsión, y las medidas deseadas.

function clipImage($file, $width, $height) {
	$imSrc  = imagecreatefromjpeg($file);
	$w      = imagesx($imSrc);
	$h      = imagesy($imSrc);
	if($width/$height>$w/$h) {
		$nh = ($h/$w)*$width;
		$nw = $width;
	} else {
		$nw = ($w/$h)*$height;
		$nh = $height;
	}
	$dx = ($width/2)-($nw/2);
	$dy = ($height/2)-($nh/2);
	$imTrg  = imageCreateTrueColor($width, $height);
	imagecopyresized($imTrg, $imSrc, $dx, $dy, 0, 0, $nw, $nh, $w, $h);
	imagedestroy($imSrc);
	imagejpeg($imTrg, $file, 95);
	imagedestroy($imTrg);
}

Escala una imágen forzando un ancho máximo

Escala una imágen forzando un ancho máximo.

function f_resizeMaxWidth($file, $width) {
	$imSrc  = imagecreatefromjpeg($file);
	$w      = imagesx($imSrc);
	$h      = imagesy($imSrc);
	if($w>$width) {
		$height = ($h/$w)*$width;
		$imTrg  = imageCreateTrueColor($width, $height);
		imagecopyresized($imTrg, $imSrc, 0, 0, 0, 0, $width, $height, $w, $h);
		imagedestroy($imSrc);
		imagejpeg($imTrg, $file, 95);
		imagedestroy($imTrg);
	} else {
		imagedestroy($imSrc);
	}
}
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin