Advanced Custom Fields Demo

See what you can build with ACF

This text appears in the right side of the header. To change this text for a specific page, edit the page and change the content in the Header Right Content field below the main content editor.

  • Home
  • Custom Home Page-EC
    • Code for Custom Home Page
  • ACF Galleries
    • ACF Gallery Slider
      • Gallery Slider Page Template Code
    • Page with Magnific Popup Gallery
  • Flexible Content Layouts
    • Flexible Content Full-Width Page
    • Checkerboard Page
  • Create a Post
    • Front-End Posting and Editing
  • Blog
You are here: Home / Gallery Slider Page Template Code

Gallery Slider Page Template Code

Remember to download and install the FlexSlider plugin.

Next, add the following to your functions.php file. (The code assumes that all of your FlexSlider files are in a directory called ‘flexslider’. If you put yours somewhere else, update the file path accordingly.


/* Enqueue FlexSlider
function srg_add_flexslider() {
  wp_enqueue_script(
    'flexslider',
    get_stylesheet_directory_uri() . '/flexslider/jquery.flexslider.js',
    array('jquery')
  );
  wp_enqueue_script(
    'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
  wp_register_style(
    'flexslider-style',
    get_stylesheet_directory_uri() . '/flexslider/flexslider.css'
  );
  wp_enqueue_style( 'flexslider-style' );
}    
add_action('wp_enqueue_scripts', 'srg_add_flexslider');

Then create a page template (I called mine page_flexslider.php) with the following code. (Don’t forget the initial php tag–it doesn’t want to display properly here.)


 /*
Template Name: Page with Flexslider
*/

add_action('genesis_entry_content', 'acf_slider_loop', 8);
function acf_slider_loop() {
$images = get_field('image_gallery');
  if( $images ): 
      echo '<div id="slider" class="flexslider">';
          echo '<ul class="slides">';
              foreach( $images as $image ):
                  echo '<li>';
                      echo '<img src="'.$image['url'].'" alt="'.$image['alt'].'" />';
                      echo '<p>'.$image['caption'].'</p>';
                  echo '</li>';
              endforeach;
          echo '</ul>';
      echo '</div>';
  endif;
}

Finally, to make the script run on the page, add the following to the ‘scripts’ metabox. Make sure you use the no-conflict “jQuery” instead of “$”.


<script type="text/javascript" charset="utf-8">
  jQuery(window).load(function() {
    jQuery('.flexslider').flexslider();
     slideshowSpeed: 8000
  });
</script>

genesis();

Search

Copyright © 2023 · Genesis Sample Theme on Genesis Framework · WordPress · Log in