Carousel / slider implementation

• hburke

• October 16, 2013 at 7:29 am

I installed the Gallery add-on, and created/populated a new gallery field in ACF. When I add the ‘create carousel/slider’ code shown in the documentation to my template file, the output is just the full-size and thumbnail-size images, unformatted as a list. Do I need a flex slider plugin installed first, in order to render the gallery as a carousel? Or does the gallery add-on also require the Repeater Field add-on?

http://agilemedia.org/tss/vehicles/2013-arctic-cat-mud-pro-700-green-metallic/

• [email protected]

• October 16, 2013 at 7:52 am

I have the same question. I have spent over 2 hours trying to figure out how to get the slider to work. The coded used in your video on the http://www.advancedcustomfields.com/add-ons/gallery-field/ page does not match with the files in the add-on.

Where is the flexslider.js and flexslider.css files? Do I have to go to their site and get them? Your documentation is very unclear about this.

Also, it would be nice if you had the code for what files need to be included in your documentation, such as, <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/flexslider.css" type="text/css">
Only seen this code in the tutorial video.

• [email protected]

• October 16, 2013 at 8:38 am

I spent even more time trying to get this to work myself, as I’m on a tight deadline for this project.

I downloaded flexslider myself and added the files to my theme. Still not working correctly after doing this.

• [email protected]

• October 16, 2013 at 9:59 am

I have this slider working now. Would have been a lot easier if there was clear documentation on how to do it. You have to go to http://flexslider.woothemes.com/ and get the files for the flexslider and put them in the appropriate spots in your theme.

I will paste my code below for you all that have the same question:

<!-- Start Photo Slider -->
<?php
/*
*  Create the Markup for a slider
*  This example will create the Markup for Flexslider (http://www.woothemes.com/flexslider/)
*/
$property_images = get_field('property_gallery');
if( $property_images ) { ?>
<div id="slider" class="flexslider">
	<ul class="slides">
		<?php foreach( $property_images as $property_image ): ?>
			<li>
				<img src="<?php echo $property_image['url']; ?>" alt="<?php echo $property_image['alt']; ?>" />
			</li>
		<?php endforeach; ?>
	</ul>
</div>
<?php

/*
*  The following code creates the thumbnail navigation
*/

?>
<div id="carousel" class="flexslider">
	<ul class="slides">
		<?php foreach( $property_images as $property_image ): ?>
			<li>
				<img src="<?php echo $property_image['sizes']['thumbnail']; ?>" alt="<?php echo $property_image['alt']; ?>" />
			</li>
		<?php endforeach; ?>
	</ul>
</div>
<?php
}else{
?><div id="single-gallery-image">
	<?php the_post_thumbnail('full'); ?>
</div><?php

?>
<?php } ?>
<!-- End Photo Slider -->

</div>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
	var $f = jQuery.noConflict(true);
		$f(window).load(function() {
		  // The slider being synced must be initialized first
		  $f('#carousel').flexslider({
			animation: "slide",
			controlNav: false,
			animationLoop: false,
			slideshow: false,
			itemWidth: 75,
			itemMargin: 5,
			asNavFor: '#slider'
		  });
		   
		  $f('#slider').flexslider({
			animation: "slide",
			controlNav: false,
			animationLoop: false,
			slideshow: false,
			sync: "#carousel"
		  });
		});
</script> 

I’m loading this with a jQuery.noConflict since I have another jQuery library loading on the site.

• hburke

• October 16, 2013 at 10:08 am

Thanks, yes got mine working as well. I’ll need to tweak the CSS, but otherwise up and running.

• vestmar

• November 14, 2013 at 12:10 am

Brad (or anybody else who knows the answer) 🙂

What do you mean by “You have to go to http://flexslider.woothemes.com/ and get the files for the flexslider and put them in the appropriate spots in your theme.”

I already got the files but they are not a regular wp plugin SO how do I “put them in the appropriate spots in my theme” ?

Thank you,

Puiu D.

• vestmar

• November 14, 2013 at 11:22 pm

Got it! …just in case anybody else wants to know how to implement the flexslider in wordpress:

So:

1) create a folder named “css” inside your theme folder
2) create (or use if you already have it) a folder named “js”
3) download flexslider from the links mentioned above (on woothemes site)
4) unzip de flexslider archive on your computer
5) copy the flexslider.css file to the “css” folder you created above
5) copy the jquery.flexslider-min.js file to the “js” folder you created above
6) in your template, use the code provided above by Brad.

Hope it helps 😉

Puiu D.

• jadejd

• February 14, 2014 at 12:42 am

Im not sure if i have done this right or not its on the following page surposed to be in the side bar http://dev.rgbdesignuk.com/memorial/test-test/

but its not showing up please help

<!--slider starts-->
             <!-- Start Photo Slider -->
<?php
/*
*  Create the Markup for a slider
*  This example will create the Markup for Flexslider (http://www.woothemes.com/flexslider/)
*/
$property_images = get_field('gallery');
if( $property_images ) { ?>
<div id="slider" class="flexslider">
  <ul class="slides">
    <?php foreach( $property_images as $property_image ): ?>
      <li>
        <img src="<?php echo $gallery_image['url']; ?>" alt="<?php echo $gallery_image['alt']; ?>" />
      </li>
    <?php endforeach; ?>
  </ul>
</div>
<?php

/*
*  The following code creates the thumbnail navigation
*/

?>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <?php foreach( $gallery_images as $gallery_image ): ?>
      <li>
        <img src="<?php echo $gallery_image['sizes']['thumbnail']; ?>" alt="<?php echo $gallery_image['alt']; ?>" />
      </li>
    <?php endforeach; ?>
  </ul>
</div>
<?php
}else{
?><div id="single-gallery-image">
  <?php the_post_thumbnail('full'); ?>
</div><?php

?>
<?php } ?>
<!-- End Photo Slider -->

</div>

<link rel="stylesheet" href="http://dev.rgbdesignuk.com/wp-content/themes/canvas-child/memorials/css/flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://dev.rgbdesignuk.com/wp-content/themes/canvas-child/memorials/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
  var $f = jQuery.noConflict(true);
    $f(window).load(function() {
      // The slider being synced must be initialized first
      $f('#carousel').flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      itemWidth: 75,
      itemMargin: 5,
      asNavFor: '#slider'
      });
       
      $f('#slider').flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      sync: "#carousel"
      });
    });
</script> 
             <!--slider ends-->

• [email protected]

• February 14, 2014 at 3:12 am

Hello jadejd,

My best guess is you’re probable not using the correct name for your gallery field.

$property_images = get_field('gallery');

‘gallery’ is what I named the field in ACF, but you may have named it something different.

Hope this helps.

• jadejd

• February 14, 2014 at 3:41 am

I’ve tried that but had no luck the filed should just be gallery I believe,
this is the other gallery that shows up on the page http://dev.rgbdesignuk.com/memorial/test-test/

 <h2>Gallery</h2>
                            
                            <?php if(get_field('gallery')):?>
                                <?php foreach (get_field('gallery') as $gal ):?>
                                    <a class="fancybox" rel="gallery1" href="<?php echo $gal['url']?>" title="<?php echo $gal['caption'] ?>"><img src="<?php echo $gal['sizes']['thumbnail']?>" alt="" /></a>
                                <?php endforeach ?>
                            <?php endif; ?>   
                            
                            <?php if( $the_galquery->have_posts() ): ?>
                      
                              <?php while ( $the_galquery->have_posts() ) : $the_galquery->the_post(); ?>
                              <a class="fancybox" rel="gallery1" href="<?php echo wp_get_attachment_url( get_the_ID()); ?>" ><?php echo wp_get_attachment_image( get_the_ID(), 'thumbnail'); ?></a>
                              <?php endwhile; ?>
                            <?php endif; ?>

                            <?php if ( !(get_field('gallery')) && !($the_galquery->have_posts() ) ):?>
                            <p>No Gallery added</p>
                          <?php endif ?>
                             <?php if ( is_user_logged_in() ): ?> 
                                <form  style='clear:both' id="file-form" enctype="multipart/form-data" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="POST">
                                  <p>Add image to gallery</p>
                                  <p id="async-upload-wrap"><label for="async-upload">upload</label>
                                  <input type="file" id="async-upload" name="async-upload"> <input type="submit" value="Upload" name="html-upload"></p>

                                  <p><input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id ?>" />
                                  <?php wp_nonce_field('client-file-upload'); ?>
                                  <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" /></p>

                                  <p><input type="submit" value="Save all changes" name="save" style="display: none;"></p>
                                </form>
                                
                                <form  style='clear:both' id="embed-form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="POST">
                                  <p>Add video to gallery</p>
                                  
                                  <label for="embed">You tube / vim url:</label>
                                  <textarea name="embed"></textarea>
                                  <input name='submit_video' type="submit" value="submit">
                                  <p>
                                    <input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id ?>" />
                                  <?php wp_nonce_field('embed-form'); ?>
                                  <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" /></p>
                                </form>
                              <?php endif?>
                            </div>

• [email protected]

• February 14, 2014 at 4:57 am

If you want, email me the template and I’ll take a look.

• jadejd

• February 14, 2014 at 4:59 am

ok thanks it will come from jade.stewart

• xoomserve

• August 13, 2017 at 11:47 am

Thank you guys. This solved my issue too.
The documents are VERY poor.

Would you please help me to understand how to make all images have max-heights?

I can see the array on this link:
https://www.advancedcustomfields.com/resources/gallery/

But again, poor explanation.

I love the plugin and when I say poor, I mean less info (for experts) and I’m just beginner.

Thank you,
T

• Johnny B Goode

• October 31, 2017 at 5:12 am

This flexslider works fine but what would really be great is if it showed the image bigger (90/100% of the screen size) when clicked. maybe someone who understands JavaScript can attempt it?

EDIT: I realized that what i’m describing is called a lightbox, gonna have to look elsewhere for this functionality.

• caroline

• December 2, 2020 at 8:17 am

It works thanks!

But how can I implement further functions to this code? I want the flexslider to show the next image in the thumbnail navigation if I click on the full scaled image, and not just if I click on the thumbnails.

Any idea?