Repeaters/Lightboxes: Dynamically alternating variables

• yulichka

• November 21, 2013 at 2:43 am

I’m having a terribly hard time wrapping my brain around how to do this, so please forgive my garbled thought process :/

I am trying to do something very similar to this previous support post. Except, it seems like it would be cleaner to dynamically load the content of a field into the lightbox instead of creating an inline box for each repeater field.

Here’s a very simplistic version of my set-up so far (I have 4 types of content and 4 boxes that open depending on the type of content and I’m using Magnific Popup by Dim Semenov):

<?php if(get_field('media')): ?>
					
	<!-- LINKS TO LIGHTBOXES -->
	<ul>
		<?php while(has_sub_field('media')): ?>
							
			<?php $file_type = get_sub_field('file_type'); ?>
							
			<?php if( $file_type === 'audio' ) {?>
				<li><a href="#audio-popup" class="popup">AUDIO</a></li>
			<?php } elseif ( $file_type === 'video' ) {?>
				<li><a href="#video-popup" class="popup">VIDEO</a></li>
			<?php } elseif ( $file_type === 'document' ) {?>
				<li><a href="#document-popup" class="popup">DOCUMENT</a></li>
			<?php } else {?>
				<li><a href="#image-popup" class="popup">IMAGE</a></li>
			<?php } ?>
		
		<?php endwhile; ?>
	</ul>
					
					
	<!-- INLINE LIGHTBOXES -->
	<div id="audio-popup" class="audio popup-container mfp-hide">
		<p class="title"><span>Audio Popup</span></p>
		<?php the_sub_field('file'); ?>
	</div><!--/#still-popup-->
						
	<div id="video-popup" class="video popup-container mfp-hide">
		<p class="title"><span>Video Popup</span></p>
		<?php the_sub_field('file'); ?>
	</div><!--/#still-popup-->
						
	<div id="document-popup" class="document popup-container mfp-hide">
		<p class="title"><span>Document Popup</span></p>
		<?php the_sub_field('file'); ?>
	</div><!--/#still-popup-->
						
	<div id="image-popup" class="image popup-container mfp-hide">
		<p class="title"><span>Image Popup</span></p>
		<?php the_sub_field('file'); ?>
	</div><!--/#still-popup-->
					
<?php endif; ?>

What do you think? What does it require to dynamically load a variable depending on the link clicked? Or is it OK to just create a separate inline lightbox for each element in the list?

Thank you so much in advance for any and all help or hints! You guys are wizards.

• Elliot

• November 22, 2013 at 1:49 pm

Hi @yulichka

There are 2 ways to achieve the above.

The 1st option is more efficient, but will require more code. This is to use an AJAX call to find the HTML instead of creating the inline content. You would need to create a PHP function in your function.php file and attach it to a WP AJAX action. You would then need to write some jQuery on the front end to post through the post_id, row_number and sub_field_name values for the PHP function to then load the flexibel content field and return the data needed.

Your other option is to do what you already have but make some important changes.
your code shows 2 issues:
1. All your inline content is OUTSIDE the loop, so no data will load
2. Your links and inline content id attributes do not contain a row identifier, so your javascript plugin won’t know which one to load.

I think if you added a counter variable for the row number like so, it owuld all work:

<?php if(get_field('media')): $i = 0; ?>
					
	<!-- LINKS TO LIGHTBOXES -->
	<ul>
		<?php while(has_sub_field('media')): $i++; ?>
							
			<?php $file_type = get_sub_field('file_type'); ?>
							
			<?php if( $file_type === 'audio' ) {?>
				<li>
					<a href="#audio-popup-<?php echo $i; ?>" class="popup">AUDIO</a>
					
					<!-- INLINE LIGHTBOXES -->
					<div id="audio-popup-<?php echo $i; ?>" class="audio popup-container mfp-hide">
						<p class="title"><span>Audio Popup</span></p>
						<?php the_sub_field('file'); ?>
					</div><!--/#still-popup-->
					
				</li>
			<?php } ?>
		
		<?php endwhile; ?>
	</ul>
										
<?php endif; ?>

Please note I have removed some code to clarify the solution

Thanks
E