Gallery and Flexslider

• 

  • bentley

  • September 26, 2015 at 8:33 am

  I’ve been trying to piece this together, hopefully someone can help a bit. I’m trying to set up the flexslider inside a gallery field, using the code provided in the gallery example, I’ve used this in my template, where my field name is “slider”

  <?php
  
  $images = get_field('slider');
  
  if( $images ): ?>
      <div id="slider" class="flexslider">
          <ul class="slides">
              <?php foreach( $images as $image ): ?>
                  <li>
                      <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                      <p><?php echo $image['caption']; ?></p>
                  </li>
              <?php endforeach; ?>
          </ul>
      </div>
  	
  <?php endif; 
  
  ?>

  I’ve included the flexslider js and css files in my child theme js/css folders, with the styles/scripts registered in the parent theme functions file, looks like this

  function flexslider_files() {
     wp_enqueue_style( 'flexslider-css', get_stylesheet_directory_uri() . '/css/flexslider.css' ); 
  	  wp_enqueue_script( 'flexslider-js', get_stylesheet_directory_uri() .'/js/jquery.flexslider-min.js', array('jquery'), false, true );
  	  wp_enqueue_script( 'flexslider-init', get_stylesheet_directory_uri() .'/js/flex-init.js', array('flexslider-js'), false, true );
  }
  
  add_action( 'wp_enqueue_scripts', 'flexslider_files' );

  I’ve registered other plugins this way and seemed to work ok. I’ve played around with the flex-init.js file a bit to try and get it working with no luck so far, and it currently looks like this

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

  So my problem is when I comment out the whole plugin registration, as well as just the flexslider.css file the images appear on the page, unstyled and not working of course, but when I uncomment the flexslider.css registration the images disappear and its just an empty page.

  I’m sure there’s something I’m overlooking here or some of my code is wrong, if anyone has set this up successfully and could help, I’d appreciate it.
• 

  

  • mediawerk

  • October 26, 2015 at 10:27 pm

  i have a working flexslider with acf-gallery.

  I dont know if it make a big difference,(because your code looks not that different than mine.) but i hope it works when you do it this way (like i do)

  register scripts inside functions.php

  <?php
  add_action('wp_enqueue_scripts', 'register_content_scripts');   
  function register_content_scripts(){
  wp_register_style( 'flexslider-custom-css', get_stylesheet_directory_uri() . '/css/flexslider/flexslider.css' );
  wp_register_script( 'acf-flexslider-scripts',  get_stylesheet_directory_uri() . '/js/jquery.flexslider-min.js',  array( 'jquery' ), 1, 1 );
  wp_register_script( 'flexslider-init',  get_stylesheet_directory_uri() . '/js/flex-init.js',  array( 'jquery' ), 1, 1 );
  }
  ?>

  inside gallery-template enqueue them

  <?php
  $images = get_field('slider');
  if( $images ):
  wp_enqueue_style( 'flexslider-custom-css' );
  wp_enqueue_script( 'acf-flexslider-scripts' );
  wp_enqueue_script( 'flexslider-init' );
  ?>
  <div id="slider" class="flexslider">
          <ul class="slides">
              <?php foreach( $images as $image ): ?>
                  <li>
                      <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                      <p><?php echo $image['caption']; ?></p>
                  </li>
              <?php endforeach; ?>
          </ul>
      </div>
  <?php endif; 
  ?>
  

  use this inside flex-init.js

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

  try it and say if it works