S&J Gallery
Este proyecto apenas lleva unas 20 horas desde que lo empece a desarrollar gracias a la idea que me dio un amigo que muchos conocerán en el foro como Siquillote en un tema relacionado con JavaScript.
Como ya sabrán, este lenguaje (JavaScript) prácticamente me emociona y me encanta de como va todo incluyendo su uso tan importante en el desarrollo de una pagina web.
Sin mas nada que decir, daré una explicación referente a esta aplicación.
S&J Gallery es una galería de imágenes creada en CSS3 + jQuery. Esta mostrara cada "X" imágenes por pagina (Se puede editar el numero de imágenes por paginas) y las ordenara según sea colocado en el array ubicado al comienzo de todo.
Esta es mi primera aplicación desarrollada en una netbook. A pesar de esto, considero que quedo genial para lo que el cliente necesita, eso sin mencionar que no use ninguna imagen en el diseño, todo esta en CSS3.
Instalación: Sube el archivo a tu sitio web y edita la variable "
porpagina" (Numero de imágenes a mostrar por pagina)
Previa: http://angelsamuel.es/galeria.html
<html>
<head>
<title>S&J Gallery By SoyJoaquin.</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
/*!
* S&J Gallery - jQuery & CSS3
*
* Copyright 2011, SoyJoaquin. (-Null-)
* Todos los derechos reservados.
* http://phperos.net
*
* Contacto:
* Email: hgcproductions@hotmail.com
* Skype: SoyJoaquin.
*
*/
var imgs = Array('http://angelsamuel.es/miRotador/imagenes/1.jpg','http://angelsamuel.es/miRotador/imagenes/2.jpg','http://angelsamuel.es/miRotador/imagenes/3.jpg','http://angelsamuel.es/miRotador/imagenes/4.jpg','http://angelsamuel.es/miRotador/imagenes/5.jpg','http://angelsamuel.es/miRotador/imagenes/6.jpg','http://angelsamuel.es/miRotador/imagenes/7.jpg','http://angelsamuel.es/miRotador/imagenes/8.jpg','http://angelsamuel.es/miRotador/imagenes/9.jpg','http://angelsamuel.es/miRotador/imagenes/10.jpg','http://angelsamuel.es/miRotador/imagenes/11.jpg','http://angelsamuel.es/miRotador/imagenes/12.jpg','http://angelsamuel.es/miRotador/imagenes/13.jpg','http://angelsamuel.es/miRotador/imagenes/14.jpg','http://angelsamuel.es/miRotador/imagenes/15.jpg','http://angelsamuel.es/miRotador/imagenes/16.jpg','http://angelsamuel.es/miRotador/imagenes/17.jpg','http://angelsamuel.es/miRotador/imagenes/18.jpg');
var porpagina = 5;
var quieropag = 1;
$(document).ready(function(){
$('#grande').attr('src', imgs[0]);
crearimgs(1);
});
function crearimgs(pag) {
limite = pag * porpagina;
emp = limite-porpagina;
$('#imagenes').fadeOut(200, function() {
$('#imagenes').html('');
$('#imagenes').fadeIn(200);
for(i=emp;i<limite;i++){
if(i<imgs.length){
$('#imagenes').append('<img id="img-'+i+'" class="giro" onClick="cambgrande('+i+')" src="'+imgs[i]+'" />');
}
}
});
}
function cambiarpag(acc) {
if(acc==0 && quieropag > 1){
quieropag-=1;
}else if(acc==1 && (quieropag*porpagina)< imgs.length){
quieropag+=1;
}
crearimgs(quieropag);
}
function cambgrande(id) {
$('#grande').attr('src', imgs[id]);
$('#grande').attr('alt', imgs[id]);
$('#grande').attr('title', imgs[id]);
}
</script>
<style>
body {
margin:0;
background-color: #444;
background-image: -webkit-linear-gradient(0, transparent 50%, #333 50%);
background-size: 40px;
}
#imagenes img.giro {
width:90px;
height:90px;
opacity: 0.8;
display: inline-block;
border: solid 0 #fff;
cursor:pointer;
overflow: hidden;
margin:3px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(rgba(0,0,0,0.1)));
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
#imagenes img.giro:hover {
width:100px;
height:100px;
margin-top:-10px;
opacity:1;
-webkit-box-shadow: 0px 0px 30px rgba(255,255,255,0.5);
-moz-box-shadow: 0px 0px 30px rgba(255,255,255,0.5);
box-shadow: 0px 0px 30px rgba(255,255,255,0.5);
}
#imagenes img.giro:nth-child(even):hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
#imagenes img.giro:nth-child(odd):hover {
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
div.cont_img {
height:120px;
width:100%;
top:100%;
padding-top:10px;
margin-top:-160px;
position:fixed;
background-Color:#222;
text-align:center;
background: -webkit-linear-gradient(#555, #444);
}
div.titulo{
width:100%;
height:20px;
width:100%-20px;
padding:15px;
background-Color:#222;
font: 20px Helvetica, Arial, Sans-Serif; letter-spacing: -1px;
color: #777;
text-shadow: 0px 3px 6px #222;
background: -webkit-linear-gradient(#555, #444);
z-index:1;
position:fixed;
}
div.somb {
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .6);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, .6);
box-shadow: 0 0 30px rgba(0, 0, 0, .6);
}
div#izq {
height:43px;
width:70px;
top:40px;
position:absolute;
z-index:2;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
div#der {
height:43px;
width:70px;
top:40px;
left:100%;
margin-left:-70px;
position:absolute;
z-index:2;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
div#der,div#izq {
cursor:pointer;
-webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, .3);
-moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, .3);
box-shadow: 2px 2px 15px rgba(0, 0, 0, .3);
padding-top:7px;
background: -webkit-linear-gradient(#666, #555);
font: 30px Helvetica, Arial, Sans-Serif; letter-spacing: 2px;
color: #444;
text-shadow: 0px 2px 7px #333;
}
div#der:hover,div#izq:hover {
color: #555;
background: -webkit-linear-gradient(#777, #666);
}
div.c_imagen {
width:600px;
background-Color:#eee;
margin: 0 auto;
padding:60px 10px 10px 10px;
text-align:center;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
</style>
</head>
<body>
<div class="titulo somb">
S&J Gallery
</div>
<div class="c_imagen somb">
<img id="grande" src="" title="S&G Gallery" alt="S&G Gallery"/>
</div>
<div class="cont_img somb">
<div id="imagenes"></div>
<div id="izq" onClick="cambiarpag(0);">
<<
</div>
<div id="der" onClick="cambiarpag(1);">
>>
</div>
</div>
</body>
</html>Saludos.
