Hi,
I built a custom layout form my webpage.
I have a flexible content with three layouts:
1. text block – Editor Wysiwyg
2. video block – oEmbed
3. slider block – repeater field
3.1 slide – image field
3.2 caption – text field
Everytime a create a slider, the user can open an overlay that shows all of the images in the slider.
Here’s my code
<?php
if( have_rows('content') ): $i = 0;
// loop through the rows of data
while ( have_rows('content') ) : the_row();
if( get_row_layout() == 'text' ):
$content = get_sub_field('text-block');
echo '<div class="text-block"> ' . $content . ' </div>';
elseif( get_row_layout() == 'video' ):
$video = get_sub_field('video-block');
echo '<div class="embed-video"> '. $video . ' </div>';
elseif( get_row_layout() == 'slider' ): $i++ ;
echo '<div class="bxslider" id="slider-' . $i . '">';
// check if the nested repeater field has rows of data
if( have_rows('slider-block') ):
// loop through the rows of data
while ( have_rows('slider-block') ) : the_row();
$image = get_sub_field('slide');
$caption = get_sub_field('caption');
echo '<div>';
if( get_field('caption') ):
echo '<div class="image-caption"> ' . $caption .' </div>';
endif;
echo '</div>';
endwhile;
echo '</div>';
echo '<div id="myNav" class="all-overlay">
[url=javascript:void(0)]×
<div class="overlay-content">';
while ( have_rows('slider-block') ) : the_row();
$image = get_sub_field('slide');
$caption = get_sub_field('caption');
echo '[url=#slider-]<div class="slider-thumbnail"></div>';
endwhile;
echo '</div>
</div>
<p class="view-all" style="cursor:pointer" onclick="openNav()">View</p>';
endif;
endif;
endwhile;
else :
// no layouts found
endif;
?>
I found a bug: when I display more than one slider, the images displayed in my overlay belong always to the first slider.
Any hint?
Thanks
Rowan