Implementar galerìa Galleriffic

Lachi · #1 (**permalink**) 29/03/2009, 01:20

Hola a todos, quiero insertar en mi web esta galerìa que esta en jquery, que se llama Galleriffic.
Nunca tuve problemas con este tipo de còdigo para implementarlos en una web, pero en este caso no logro insertarlo.

La web de la galeria es: http://www.twospy.com/galleriffic/

Me ayudarìa mucho que alguien pueda orientarme en el còdigo que debo poner para insertarla. Al menos que me ayuden a saber en que parte debo colocar los siguientes còdigos.

Código:

<ul class="thumbs noscript">
    <li>
        <a class="thumb" href="{imageSlideUrl}" title="{imageTitle}">
            <img src="{imageThumbUrl}" alt="{imageTitle (again for graceful degradation)}" />
        </a>
        <div class="caption">
            (Any html can go here)
        </div>
    </li>
    ... (repeat for every image in the gallery)
</ul>

y

Código:

$(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 &rsaquo;',
        prevPageLinkText:       '&lsaquo; 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() { ... }
    });
});

Muchas Gracias!!

manwann · #2 (**permalink**) 03/04/2009, 14:13

Hola Lachi.

Aunque yo tambien tengo problemas para implementar este galeria, quiero comentarte lo que he hecho para que depronto con tu ayuda podamos lograrlo.

Aqui esta el archivo html de como pienso deberia quedar

<html>
<head>
<title>Galeria Galleriffic</title>
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.min.js"></script>
</head>
<body>
<div id="gallery">
<div id="controles"></div>
<div id="carga"></div>
<div id="imagen"></div>
<div id="descripcion"></div>
<div id="miniatura"> 
<ul class="thumbs noscript">
<li>
<a class="thumb" href="Enlace de imagen miniatura">
<img src="Enlace de imagen tamaño normal" alt="Hoja Verde" />
</a>
<div class="caption">
Esta es una hoja verde.
</div>
</li>

</ul>
</div> 
</div>
<script type="text/javascript">
$(document).ready(function() {
var gallery = $('#gallery').galleriffic('#miniatura', {
delay: 3000,
numThumbs: 20,
preloadAhead: 40, // Set to -1 to preload all images
enableTopPager: false,
enableBottomPager: true,
imageContainerSel: '#imagen',
controlsContainerSel: '#controles',
captionContainerSel: '#descripcion',
loadingContainerSel: '#carga',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play',
pauseLinkText: 'Pause',
prevLinkText: 'Atras',
nextLinkText: 'Adelante',
nextPageLinkText: 'Adelante &rsaquo;',
prevPageLinkText: '&lsaquo; Atras',
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>

Como puedes apreciar en la cabecera deben ir la referencia al los archivos .js de jquery y gallerific que se pueden descargar de la pagina. En la funcion de inicializacion se colocan los nombres de los selectores que nosotros hemos usado.

Sin embargo, aun no arranca

, espero tu respuesta

Bloy · #3 (**permalink**) 03/10/2011, 16:43

Hola chicos han podido instalar esta galería, yo estoy buscando información. Ya que también tengo problemas para iniciar su instalación :(
Saludos