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
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
0
