Problem with nested repeater

• design image

• May 26, 2017 at 2:07 am

I have a series of repeaters nested inside a parent which show images. The markup for this is a tab based system which shows ones large image and a repeating series of smaller ones. The issue I have is that when I upload any images, they do not behave as expected. Images usually always display in the first nested repeater loop, and randomly seem to appear in other nested loops. I have no idea what is wrong with my logic, here here my code:

<section id="our-range">
<div class="container">
	<div id="tabs">
		<div class="col-md-4">
			<ul class="menu-side">

				<?php
				// check for rows (parent repeater)
				if( have_rows('our_range') ): 
				while( have_rows('our_range') ): the_row();
				// OPENING LOOP
			    if( have_rows('categories') ): 
				while( have_rows('categories') ): the_row();
				// OPENING CATEGORY
				$category = get_sub_field('category');
				$catlink = str_replace(' ', '', $category);
				$description = get_sub_field('description');
				?>
				<li><a href="#<?php echo $catlink ?>" class="tab-link no-scroll left-menu"><?php echo $category ?></a></li>
			  
			</ul>
		</div>
		<div class="col-md-8">
			<div id="<?php echo $catlink ?>">
			<!-- START TAB -->
				<div class="title-range">
				<img src="<?php echo get_template_directory_uri(); ?>/images/house.png" alt="House Icon">
				<h2><?php echo $category; ?></h2>
				<div class="line"></div>
				</div>
        		<?php
				$imagelarge = get_sub_field('gallery_large_image');
				$imagelargeurl = $imagelarge['original_image']['url'];

				$fpimagelarge = get_sub_field('floor_plan_large_image');
				$fpimagelargeurl = $fpimagelarge['original_image']['url'];

				$evimagelarge = get_sub_field('elevations_large_image');
				$evimagelargeurl = $evimagelarge['original_image']['url'];

				?>
				<!-- START SUB MENU -->
				<div class="col-md-12 text-center">
				<ul class="nav nav-pills center-pills">
					<li><a class="galleryview"><img src="<?php echo get_template_directory_uri(); ?>/images/camera.png" alt="Camera Icon"> <span>Gallery</span></a></li>
					<li><a class="floorplan"><img src="<?php echo get_template_directory_uri(); ?>/images/floor-plan.png" alt="Floor Plan Icon"> <span>Floor Plan</span></a></li>
					<li><a class="elevations"><img src="<?php echo get_template_directory_uri(); ?>/images/elevation.png" alt="Elevations Icon"> <span>Elevations</span></a></li>
				</ul>
				</div>
				<!-- END  SUB MENU -->
				<div class="range-gallery">
				<!-- START RANG GALLERY -->
				<!-- LARGE IMAGE -->
				<div class="row">
				  <div class="col-md-12  no-pad">
				  <a href="<?php echo $imagelargeurl;  ?>" target="_blank" class="fancybox"><img src="<?php echo $imagelarge['url'];?>" /></a>
				  </div>
				</div>
				<!-- END LARGE IMAGE -->
                <p class="no-pad"><?php the_sub_field('gallery_text'); ?></p>
				<!-- SMALL IMAGE GRID -->
                <div class="gallery-row">
							<div class="row">
								<?php 
                                if( have_rows('small_gallery_images') ):
								while( have_rows('small_gallery_images') ): the_row();
								$imagesmall = get_sub_field('small_image');
								$imagesmallurl = $imagesmall['original_image']['url'];
								?>
								<div class="col-md-4"><a href="<?php echo $imagesmallurl; ?>" target="_blank" class="fancybox"><img src="<?php echo $imagesmall['url']; ?>" /></a></div>
								<?php endwhile; // END ('small_gallery_images') LOOP ?>
								<?php endif; // if( get_field('small_gallery_images') ): ?>
							</div>
				</div>
     			<!-- END SMALL IMAGE GRID -->
                <!-- END RANGE GALLERY -->
				</div>
				<div class="range-floorplan" style="display: none">
                <!-- START RANG FLOORPLAN -->
				<!-- LARGE IMAGE -->
				<div class="row">
				  <div class="col-md-12  no-pad">
				  <a href="<?php echo $fpimagelargeurl;  ?>" target="_blank" class="fancybox"><img src="<?php echo $fpimagelarge['url'];?>" /></a>
				  </div>
				</div>
				<!-- END LARGE IMAGE -->
                <p class="no-pad"><?php the_sub_field('floor_plan_text'); ?></p>
				<!-- SMALL IMAGE GRID -->
                <div class="gallery-row">
                FLOOR
							<div class="row">
								<?php 
                                if( have_rows('small_floor_plan_images') ):
								while( have_rows('small_floor_plan_images') ): the_row();
								$fpimagesmall = get_sub_field('small_floor_plan_image');
								$fpimagesmallurl = $fpimagesmall['original_image']['url'];

								?>
								<div class="col-md-4"><a href="<?php echo $fpimagesmallurl; ?>" target="_blank" class="fancybox"><img src="<?php echo 
								$fpimagesmall['url']; ?>" /></a></div>
								<?php endwhile; // END ('small_floor_plan_images') LOOP ?>
								<?php endif; // if( get_field('small_floor_plan_images') ): ?>
							</div>
				</div>
     			<!-- END SMALL IMAGE GRID -->
                <!-- END RANGE FLOORPLAN -->
				</div>
				<div class="range-elevations" style="display: none">
                <!-- START RANGE ELEVATIONS -->
				<!-- LARGE IMAGE -->
				<div class="row">
				  <div class="col-md-12  no-pad">
				  <a href="<?php echo $evimagelargeurl;  ?>" target="_blank" class="fancybox"><img src="<?php echo $evimagelarge['url'];?>" /></a>
				  </div>
				</div>
				<!-- END LARGE IMAGE -->
                <p class="no-pad"><?php the_sub_field('elevations_text'); ?></p>
				<!-- SMALL IMAGE GRID -->
                <div class="gallery-row">
							<div class="row">
								<?php 
                                if( have_rows('elevations_small_images') ): 
								while( have_rows('elevations_small_images') ): the_row();
								$evimagesmall = get_sub_field('elevation_small_image');
								$evimagesmallurl = $evimagesmall['original_image']['url'];
								?>
								<div class="col-md-4"><a href="<?php echo $evimagesmallurl; ?>" target="_blank" class="fancybox"><img src="<?php echo $evimagesmall['url']; ?>" /></a></div>
								<?php endwhile; // END ('elevations_small_images') LOOP ?>
								<?php endif; // if( get_field('elevations_small_images') ): ?>
							</div>
				</div>
     			<!-- END SMALL IMAGE GRID -->
                <!-- END RANGE ELEVATIONS -->
				</div>
            <!-- END TAB -->
			</div>
		</div>
		<?php endwhile; // END ('categories') LOOP ?>
		<?php endif; // if( get_field('categories') ): ?>
		
	    <?php endwhile; // end of the loop. ?>
	    <?php endif; // if( get_field('our_range') ): ?>
	</div>
</div>
</div>
</section>