[Gelöst] Galeria imagenes

[Author]

Artikel

[Rafael Corts]

Hola Nigel, no se muy bien com hacer una galería de imagenes en la que aya una imagen principal (en grande)i las demás estén debajo en pequeño. En el momento que seleccione el usuario una de las pequeñas aparecerá en lugar de la grande y así podrá ir viendo todas las imagenes del carrusel.
Entiendo que primero en un Post Type se debe crear un Custom Fields de un campo de imagen que se pueda permitir multiples instancias.
Pero después a la hora de implantarlo en el Template no se como orientarlo.
Haber si me das un poco de luz.
Saludos.
Rafa Corts

[Nigel]

Hola Rafa

Creo que es este a que refieres: versteckter Link

He explicado los pasos para implementar este aquí: https://toolset.com/forums/topic/how-to-display-the-pics-i-uploaded-as-a-slider/#post-518295

¿Puedes seguir estos pasos y decirme si tienes problemas?

[Rafael Corts]

Hola Nigel, he aplicado el código y funciona bien, lo único que este FlexSlider es el básico y me gustaría implementar los thumbnails de las imagenes en la parte de abajo. he cogido el código que se genera y lo he modificado para que se pudiera hacer el bucle. pero hay alguna cosa que no acaba de funcionar. te muestro el código:

//Esta es la parte de código de las imagenes en grande
<div class="rc_galeria">
  [wpv-post-body view_template="None"]
<h2>Galeria fotos centre</h2>
<div class="flexslider">
    <ul class="slides">
        [wpv-for-each field="wpcf-galeria-imatges"]
        <li>
            [types field='galeria-imatges' alt='%%ALT%%' title='%%TITLE%%' size='large' align='none' resize='proportional' separator=', '][/types]
        </li>
        [/wpv-for-each]
    </ul>
</div>
 

Esta es la parte de los thumbnails que he modificado no se si puedes ver algún error.

 <div class="flexslider carousel" id="f2" style="direction:rtl">
  <ul class="slides">
        [wpv-for-each field="wpcf-galeria-imatges"]
        <li>
            [types field='galeria-imatges' alt='%%ALT%%' title='%%TITLE%%' size='thumbnail' align='none' resize='proportional' separator=', '][/types]
        </li>
        [/wpv-for-each]
    </ul>
</div>
</div>

El código JS con los thumbnail indica que ponga este nuevo codigo

// Can also be used with $(document).ready()
$(window).load(function(){
  $('#f1').flexslider({
    animation: "slide",
    rtl: true,
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
 $('#f2').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    pausePlay: true,
    mousewheel: true,
    rtl: true,
    asNavFor:'.flexslider'
  });
});

Lo que no se si he de mantener el código que te muestro a bajo:

( function( $ ) {
    $( document ).ready( function(){
 
      $('.flexslider').flexslider({
        animation: "slide"
      });
    });
})( jQuery );

Te dejo una dirección para que veas como se está mostrando.
versteckter Link
Haver si puedes mirar si es un tema del bucle de los thumbnails.
Saludos.
Rafa Corts

[Rafael Corts]

Un servicio técnico muy bueno y profesional.
Saludos.
Rafa Corts