303 usuarios y 202 recortes de código
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>"; } }
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; }
.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>
<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(); } }
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); } }
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); }
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); } }
RSS