After The above curly bracket is where the problem appears
you had second else
statement, the first else
without if
statement is near this is where initial load begins
you missed the logic.
I cleaned up your code a bit and corrected the error, in the future pay attention to not repeat your code. In each statement you had opening div with the same class name, I moved them before the conditions.
<?php
while ( have_posts() ) : the_post();
$initialCardLoad = 5;
$loopLazyLoad = 0;
$galleryType = get_field( 'gallery_type' ); ?>
<section class="grid-content">
<div class="gridGallery <?php the_title_attribute(); ?>">
<?php
// check if the repeater field has rows of data
if ( have_rows( 'card' ) ) {
// loop through the rows of data
while ( have_rows( 'card' ) ) :
the_row();
$loopLazyLoad ++; // iterate on loop each time you loop through
// display a sub field value inside a card
//VARIABLES//
$title = get_sub_field( 'card_title' );
$childImage = get_sub_field( 'card_picture' );
$file = get_sub_field( 'card_video' );
$video = $file['url'];
$videoTitle = get_sub_field( 'card_video_title' );
$cardLink = get_sub_field( 'card_link' );
$cardEmbed = get_sub_field( 'card_embed' );
if ( $loopLazyLoad > $initialCardLoad ) {
?> <div class="grid-item"> <?php
if ( $cardEmbed ) { ?>
<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/"
href="javascript:;">
<img class="lazy" data-src="<?php echo $childImage['sizes']['medium']; ?>">
</a>
<!-- end of iframe If statement --> <?php
} else if ( $childImage ) { ?>
<a data-fancybox="gallery" data-caption="<?php echo $title ?>"
href="<?php echo $childImage['sizes']['large'];//big one here ?>">
<img class="lazy" data-src="<?php echo $childImage['sizes']['medium']; ?>">
</a>
<!-- End of image if statement --> <?php
} else if ( $video ) { ?>
<a data-fancybox data-src="#<?php echo $videoTitle ?>" href="javascript:;">
<video class="gallery-video lazy" loop autoplay muted>
<source src="<?php echo $video; ?>" type="video/mp4">
</video>
</a>
<video style="display: none;" class="gallery-video lazy" loop autoplay muted
id="<?php echo $videoTitle ?>">
<source src="<?php echo $video; ?>" type="video/mp4">
</video>
<!-- end of Video If statement --> <?php
} ?>
</div> <?php //end of grid item div
// End of if lazy load iter check
// this is where initial load begins
// HERE PUT YOUR LOGIC
} else if (true) {
?> <div class="grid-item"> <?php
if ( $cardEmbed ) { ?>
<a data-fancybox data-type="iframe"
data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
<img class="" data-src="<?php echo $childImage['sizes']['medium']; ?>">
</a>
<!-- end of iframe If statement --> <?php
} else if ( $childImage ){ ?>
<a data-fancybox="gallery" data-caption="<?php echo $title ?>"
href="<?php echo $childImage['sizes']['large'];//big one here
?>">
<img class="" src="<?php echo $childImage['sizes']['medium']; ?>">
</a>
<!--end of Image IF statement --> <?php
} else if ( $video ){ ?>
<a data-fancybox data-src="#<?php echo $videoTitle ?>" href="javascript:;">
<video class="gallery-video" loop autoplay muted>
<source src="<?php echo $video; ?>" type="video/mp4">
</video>
</a>
<video style="display: none;" class="gallery-video lazy" loop autoplay muted
id="<?php echo $videoTitle ?>">
<source src="<?php echo $video; ?>" type="video/mp4">
</video>
<!-- end of Video If statement --> <?php
} ?>
</div> <!-- end of grid item div -->
<!--end of initial card load of loop--> <?php
//end of else for the initial load
} else {
?> <p>no rows found</p> <?php
} //end of else
endwhile; ////end of while statement that loops for as long as rows have data
///
} //end of top level if statement that checks if rows have data ?>
</div>
</section>
<script>
domReady( function () {
var macy_instance = Macy.init( {
container: '.<?php the_title_attribute(); ?>',
trueOrder: false,
waitForImages: true,
debug: false,
margin: 0,
columns: 5,
breakAt: {
1200: 4,
940: 3,
520: 1
}
} );
macy_instance.runOnImageLoad( function () {
macy_instance.recalculate( true );
}, true );
} );
</script>
<?php endwhile; ?>