Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Como se utiliza la galeria de imagene galleriffic?

JavaScript - Como se utiliza la galeria de imagene galleriffic?

Volver
Nuevo Tema
<<>>
 
Vista:

Como se utiliza la galeria de imagene galleriffic?

Publicado por Manwann (3 intervenciones) el 03/04/2009 17:43:00
Buenas.

He estado navegando por la y me topé con una galería de imagenes hecha en JQuery, la cual me parecío muy interesante. Los enlaces de consulta son:

http://www.anieto2k.com/2008/09/17/galleriffic-plugin-jquery-para-crear-galerias-con-los-ojos-cerrados/

http://www.twospy.com/galleriffic/

El problema es que he intentado seguir los pasos que se indican en las dos paginas anteriores, sin embargo, por alguna razón no corre como debiera ser, es mas, no se acerca ni poquito.

A continuación pego mi archivo html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript">
document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
</script>
</head>

<body>
<div id="content">
<div id="controls"></div>
<div id="slideshow"></div>

<div class="embox">
<div id="download"><a id="download-link" class="download">Download Original</a></div>
<div id="image-title"></div>
<div id="image-desc"></div>
</div>
</div>
<div id="navigation">
<ul class="thumbs noscript">
<li>

<a class="thumb" href="imagenes/hoja.jpg" title="Title #0">
<img src="imagenes/hoja_p.jpg" alt="Title #0" />
</a>
<div class="caption">
<div class="download">
<a href="imagenes/hoja_g.jpg">Download Original</a>
</div>
<div class="image-title">Title #0</div>

<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="imagenes/hojamorada.jpg" title="Title #1">
<img src="imagenes/hojamorada_p.jpg" alt="Title #1" />
</a>
<div class="caption">

<div class="download">
<a href="imagenes/hojamorada_g.jpg">Download Original</a>
</div>
<div class="image-title">Title #1</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="imagenes/hojaverde.jpg" title="Title #2">
<img src="imagenes/hojaverde_p.jpg" alt="Title #2" />
</a>
<div class="caption">
<div class="download">
<a href="imagenes/hojaverde_g.jpg">Download Original</a>
</div>

<div class="image-title">Title #2</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="imagenes/cacao.jpg" title="Title #3">
<img src="imagenes/cacao_p.jpg" alt="Title #3" />

</a>
<div class="caption">
<div class="download">
<a href="imagenes/cacao_g.jpg">Download Original</a>
</div>
<div class="image-title">Title #3</div>
<div class="image-desc">Description</div>

</div>
</li>


</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
var gallery = $('#gallery').galleriffic('{thumbsContainerSel}', {
delay: 3000,
numThumbs: 20,
preloadAhead: 40, // Set to -1 to preload all images
enableTopPager: false,
enableBottomPager: true,
imageContainerSel: '',
controlsContainerSel: '',
captionContainerSel: '',
loadingContainerSel: '',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play',
pauseLinkText: 'Pause',
prevLinkText: 'Previous',
nextLinkText: 'Next',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
onChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
onTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onTransitionIn: undefined, // accepts a delegate like such: function() { ... }
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onPageTransitionIn: undefined // accepts a delegate like such: function() { ... }
});
});
</script>
</body>
</html>

Si alguien no ha trabajado en esta galeria pero sabe de JQuery, los invito a que indaguen ya que me parece muy util y de paso me ayudan, jejeje, los que ya la han probado, mas que mejor. . ..

Gracias d antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

RE:Como se utiliza la galeria de imagene galleriff

Publicado por ScriptShow (692 intervenciones) el 04/04/2009 20:53:59
Saludos,

aquí encontrarás bastantes galerías y otros Scripts.

http://www.dhteumeuleu.com/gallery-v6.php?tag=diapo

Se puede decir que es uno de los mejores sitios de la web en DHTML. Déjate de complejas y pesadas librerías; para conseguir efectos básicos, no es preciso tanta parafernalia.

Otros sitios:

http://www.btinternet.com/~st_rise/main/mainfram.htm?../imagery/imgnav.htm

http://slayeroffice.com/code/slide_show/

http://slayeroffice.com/code/slide_show2/

http://slayeroffice.com/code/slide_show3/

http://slayeroffice.com/code/slide_show4/

http://slayeroffice.com/code/slide_show5/

http://slayeroffice.com/code/slide_show6/

Etc... En fin, cientos y cientos.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Como se utiliza la galeria de imagene galleriff

Publicado por Manwann (3 intervenciones) el 05/04/2009 00:35:00
Hola, realmente creo que pueden llegar a ser muy utiles en algun momento, de verdad agradezco mucho tu respuesto.

Por otro lado, ya consegui la solución, simplemente utilice las indicaciones del autor e hice alguna investigacion en el codigo fuente, y me quedo esto. Espero tambien te sirva, lo unico que queda es modificar las fotos, la descripcion y los titulos y funciona.

Saludos

<html>
<head>
<title>Galleriffic | A jQuery plugin for rendering fast-performing photo galleries</title>

<link rel="stylesheet" href="css/galleriffic.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.min.js"></script>
<script type="text/javascript">
document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
</script>
</head>
<body>
<div id="contenido">


<h3>Demo - Advanced</h3>

<!-- Start Advanced Gallery Html Containers -->
<div id="gallery-adv" class="content">
<div id="controls-adv" class="controls"></div>
<div id="loading-adv" class="loader"></div>
<div id="slideshow-adv" class="slideshow"></div>
<div id="caption-adv" class="embox"></div>
</div>
<div id="thumbs-adv" class="navigation">
<ul class="thumbs noscript">
<li>

<a class="thumb" href="imagenes/hoja.jpg" title="Title #0">
<img src="imagenes/hoja_p.jpg" alt="Title #0" />
</a>
<div class="caption">
<div class="download">
<a href="imagenes/hoja_g.jpg">Download Original</a>
</div>
<div class="image-title">Title #0</div>

<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="imagenes/hojamorada.jpg" title="Title #1">
<img src="imagenes/hojamorada_p.jpg" alt="Title #1" />
</a>
<div class="caption">

<div class="download">
<a href="imagenes/hojamorada_g.jpg">Download Original</a>
</div>
<div class="image-title">Title #1</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="imagenes/hojaverde.jpg" title="Title #2">
<img src="imagenes/hojaverde_p.jpg" alt="Title #2" />
</a>
<div class="caption">
<div class="download">
<a href="imagenes/hojaverde_g.jpg">Download Original</a>
</div>

<div class="image-title">Title #2</div>
<div class="image-desc">Description</div>
</div>
</li>

<li>
<a class="thumb" href="imagenes/cacao.jpg" title="Title #3">
<img src="imagenes/cacao_p.jpg" alt="Title #3" />

</a>
<div class="caption">
<div class="download">
<a href="imagenes/cacao_g.jpg">Download Original</a>
</div>
<div class="image-title">Title #3</div>
<div class="image-desc">Description</div>

</div>
</li>


</ul>
</div>
<!-- End Advanced Gallery Html Containers -->
</div>

<script type="text/javascript">
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity)
.hover(
function () {
$(this).not('.selected').fadeTo('fast', 1.0);
},
function () {
$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
}
);

$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', {
delay: 5000,
numThumbs: 12,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
imageContainerSel: '#slideshow-adv',
controlsContainerSel: '#controls-adv',
captionContainerSel: '#caption-adv',
loadingContainerSel: '#loading-adv',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Reproducir',
pauseLinkText: 'Detener',
prevLinkText: '‹ Foto Anterior',
nextLinkText: 'Próxima Foto ›',
nextPageLinkText: 'Adelante ›',
prevPageLinkText: '‹ Atras',
enableHistory: true,
autoStart: false,
onChange: function(prevIndex, nextIndex) {
$('#thumbs-adv ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(callback) {
$('#slideshow-adv, #caption-adv').fadeOut('fast', callback);
},
onTransitionIn: function() {
$('#slideshow-adv, #caption-adv').fadeIn('fast');
},
onPageTransitionOut: function(callback) {
$('#thumbs-adv ul.thumbs').fadeOut('fast', callback);
},
onPageTransitionIn: function() {
$('#thumbs-adv ul.thumbs').fadeIn('fast');
}
});

});
</script>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

RE:Como se utiliza la galeria de imagene galleriff

Publicado por ScriptShow (692 intervenciones) el 05/04/2009 13:24:22
Muchas gracias por tu comentario, por el código y demás; tomo nota.

El el anterior post trataba de decirte que, después de varios años buscando, probando, desarrollando efectos, etc. he visto casi de todo y todavía me sorprendo con algunos Scripts. Hay verdaderos GURUS del DHTML. Esta técnica nos permite infinitas posibilidades, con el único límite de la imaginación. Pues bien, ahora toca elegir. En mi caso concreto, me quedo con tres o cuatro de esos Artistas del DHTML. Las razones son varias: Artesanía pura, creatividad, imaginación, y una depuradísima técnica; el resultado es, como no puede ser de otra forma, un Script casi prfecto. Además, y esto es muy importante, con muy pocos Kb. es decir, con menos de 10Kb. son capaces de hacer efectos elevados a la categoría de Arte. Luego están los otros, los que hacen cosas parecidas, pero con pesadas librerías de 50 - 200Kb. con resultados no tan eficaces.
Acostumbrados al derroche de medios, no nos paramos a pensar que, en el caso que nos ocupa, no es lo mismo que una página cargue en 10 segundos, en 20, o, incluso no cargue. Este es un punto ignorado con frecuencia, pero no por ello menos importante. Presumimos que todo el mundo tiene un equipo y una conexión fantástica, pero la realidad es bien distinta...

PD.: Pido disculpas si el comentario es improcedente, pero probando el script, he notado que no es muy ágil, etc... y basándome en lo anterior, diría que es posible hacer lo mismo con 2 o 4Kb. Es decir, con un 5 - 10% escaso de lo empleado en librerías y demás.

Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Como se utiliza la galeria de imagene galleriff

Publicado por Manwann (3 intervenciones) el 06/04/2009 06:17:36
Hola nuevamente.

Siempre se debe tender a que nuestros proyectos sean los mayor accesibles posible, ya que uno de los objetivos en la mayorias de las paginas web es tratar de llegar a la mayor contidad de personas posibles y para ello debemos tratar de evitar que dificultades técnicas se un obstaculo para el usuario final.

Tambien es necesario buscar un equilibrio tanto en el diseño, como en lo que el cliene desea, el usuario final y los estandares, esto es un tema dificil ya que cada uno tiende para su lado, por esto siempre se tiene que estar aprendiendo nuevas tecnicas que permitan ofrecer soluciones optimas. Soy de las personas que piensa que es bueno aprender de diferentes tendencias e ir adaptando dichas tendencias a las necesidades particulares de cada reto, ir probando y retroalimentandome de las experiencias..

Agradezco mucho tu consejo, talvez mas adelante me tome el tiempo y depure codigo (con mucha mas experticia en javascript, jeje) o busque otras alternativas, por lo pronto analizando las diferentes variables creo que esto es lo que me conviene.

Gracias tus aportes son muy buenos, hasta la próxima.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar