Slider de uno en uno

[gasuco]

Busco un slider como el de la siguiente plantilla http://livedemo00.template-help.com/...page_catalogue

Alguien sabe donde lo puedo conseguir?? O por privado si sabeis sacarlo del enlace...

Salu2

[cristian_cena]

Estan usando este plugin jquery.
Lo encontré con "ctrl + u", usa esto o un inspector de código como firebug o el de chrome que se abre presionando F12.

[gasuco]

Gracias por el aporte.. Lo estoy probando pero cuando le doy a los botones no se mueven las imagenes..

Lo estoy intentando incorporar a una plantilla HTML.. Segun dice en la pagina del plugin hay que insertar los botones:

Código HTML:

<button class="prev"> a </button>
            <button class="next"> b </button>
 

Supongo que eso es HTML5 y tal vez por eso no me lo coja... Puedo cambiar la etiqueta button?? O tengo que cambiar el codigo de la pagina a HTML5??

Gracias por el aporte.

Salu2

[Dradi7]

Bueno si revisas bien el codigo el esta usando solamente

FancyBox - jQuery Plugin

este es el codigo que obtuve al usar el inspector

Código HTML:

<div id="slider">
                        <div>
                            <ul>
                                <li><a href="images/slider_pic1_big.jpg"><span></span><img src="images/slider_pic1.jpg" width="383" height="383" alt=""><div>Invecto Nasea</div></a></li>
                                <li><a href="images/slider_pic2_big.jpg"><span></span><img src="images/slider_pic2.jpg" width="383" height="383" alt=""><div>Vareor Gerta</div></a></li>
                                <li><a href="images/slider_pic3_big.jpg"><span></span><img src="images/slider_pic3.jpg" width="383" height="383" alt=""><div>Devero Mias</div></a></li>
                                <li><a href="images/slider_pic4_big.jpg"><span></span><img src="images/slider_pic4.jpg" width="383" height="383" alt=""><div>Lorem Ipsum</div></a></li>
                                <li><a href="images/slider_pic5_big.jpg"><span></span><img src="images/slider_pic5.jpg" width="383" height="383" alt=""><div>Jertyad Vase</div></a></li>
                                <li><a href="images/slider_pic6_big.jpg"><span></span><img src="images/slider_pic6.jpg" width="383" height="383" alt=""><div>Sereve Beast</div></a></li>
                                <li><a href="images/slider_pic7_big.jpg"><span></span><img src="images/slider_pic7.jpg" width="383" height="383" alt=""><div>Lertys Ferode</div></a></li>
                                <li><a href="images/slider_pic8_big.jpg"><span></span><img src="images/slider_pic8.jpg" width="383" height="383" alt=""><div>Misear Keryas</div></a></li>
                            </ul>
                        </div>
                        <a id="prev" href=""></a>
                        <a id="next" href=""></a>
                    </div>
<!-- ESTO ES PARA MOSTRAR LAS IMAGENES EN PEQUEÑO -->
<div class="contentSlider">
                        <ul>
                            <li>
                                <img src="images/page2_pic1.jpg" width="150" height="105" alt="">
                                <h3>stricies phaleda</h3>
                                <p>anritma hasesera de <a href="#!/page_more"><span class="more"></span></a></p>
                            </li>
                            <li>
                                <img src="images/page2_pic2.jpg" width="150" height="105" alt="">
                                <h3>quia dolor sit</h3>
                                <p>anritma hasesera de <a href="#!/page_more"><span class="more"></span></a></p>
                            </li>
                        </ul>
                    </div>
 

El JavaScript

Código Javascript:

$("#slider > div").jCarouselLite({
        btnNext:'#next',
        btnPrev:'#prev',
        easing: 'easeOutSine',
        speed: 500,
        visible: 1,
    });
    
    $(".contentSlider").jCarouselLite({
        btnNext:'.next_slide',
        btnPrev:'.prev_slide',
        easing: 'easeOutSine',
        speed: 500,
        visible: 2,
    });
    
    $('#slider li a').each(function(){
        $(this).find('span').stop().animate({opacity:0}, 0);
        $(this).hover(function()
        {
            $(this).find('span').stop().animate({opacity:1}, aniButtonDuration,'easeOutCubic')                     
        }, function(){
            $(this).find('span').stop().animate({opacity:0}, aniButtonDuration,'easeInSine')                           
        })
    })
    
    $('#slider li a').fancybox({
        'overlayColor'  :   '#000',
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   500, 
        'speedOut'      :   300
     });
 

Eso es todo

[gasuco]

Mi codigo:

Dentro de HEAD:

Código HTML:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
                                            
<script type="text/javascript" src="js/easing.js"></script>
 

He comprobado que el nombre de los ficheros sea correcto...

Dentro de BODY:

Código HTML:

<button class="prev"> a </button>
            <button class="next"> b </button>
        
            <div class="anyClass">
                <ul>
                    <li><img src="images/slider1.jpg" alt="" width="383" height="383" ></li>
                    <li><img src="images/slider2.jpg" alt="" width="383" height="383" ></li>
                    <li><img src="images/slider3.jpg" alt="" width="383" height="383" ></li>
                    <li><img src="images/slider4.jpg" alt="" width="383" height="383" ></li>
                    <li><img src="images/slider5.jpg" alt="" width="383" height="383" ></li>
                </ul>
            </div>
 

Justo antes de BODY:

Código Javascript:

<script type="text/javascript">
$(function(){
    $(".anyClass").jCarouselLite({
        btnNext:".next",
        btnPrev:".prev",
        visible: 1
    });
});
</script>
 

Cuando cargo en el navegador si que me muestra solo una imagen pero las acciones de los botones no hacen nada.. Veis algo mal??

Salu2

[Dradi7]

pero no te faltara poner las demas opciones

Código Javascript:

btnNext:'#next',
        btnPrev:'#prev',
        easing: 'easeOutSine',
        speed: 500,
        visible: 1,
 

[reinerel]

Hola!... si te sirve aqui te dejo un link de 14 tipos de galerias talvez encuentres la que buscas:

http://pixelcoblog.com/14-hermosas-galerias-de-imagenes-implementadas-con-jquery/#.UEYbT7If7s4

[gasuco]

Iniciado por Dradi7

pero no te faltara poner las demas opciones

Código Javascript:

btnNext:'#next',
        btnPrev:'#prev',
        easing: 'easeOutSine',
        speed: 500,
        visible: 1,
 

Lo he probado por si acaso pero en la web del autor dice que con btnNext y btnPrev es suficiente.

Pagina del autor

[Dradi7]

has agregado por si acaso el jquery.fancybox.css

[gasuco]

No porque no tiene nada que ver.. En la pagina del autor del plugin no habla nada de eso..

[Dradi7]

yo lo he probado y no me salido error mira como lo he hecho

http://jsfiddle.net/ldiego/hZ4yk/1/

[gasuco]

Finalmente funciona!! El problema estaba en los ficheros .js.. Gracias por el interes y los aportes..

Salu2

[gasuco]

Ya he visto que el fancy box plugin es para que cuando pinche en la imagen salga el visor en grande.. Como puedo saber cual es el pluggin que hace que las cajas entren lateralmente y con movimiento??

Salu2