Support

Account

Register Login

Forum Replies Created

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

  • 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.

  • 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.

  • 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.

  • 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.

Viewing 5 posts - 1 through 5 (of 5 total)