Gallery with main picture and thumbnails

• aseret

• November 26, 2019 at 8:44 am

Hello,

I have a problem with gallery which I found in google. xZoom Gallery
The gallery has been sent by my client and I have to use it, but the main problem is to get an information about picture to main image, but from the beggining.

I created custom post types and custom fields for my client. I created a single product page where I have to use gallery sent by her. It is xzoom gallery. I add images to gallery from repeater field. Gallery has the main image, which is the biggest nad you can make zoom on it and below are thumbnails. Thumbnails are in loop and it is fine. unfortunately I cannot add main image to the loop, because it has to be only one. the problem is, that I cannot get the image value from the repeater field, because I do not know where to defince it outside the loop.

<div class="col-left">

<img class="xzoom" src="<?php echo get_sub_field('product_image'); ?>" xoriginal="<?php echo get_sub_field('product_image'); ?>" /> // main image. I need to get values from thumbnails here after clicking on the thumbnail.

<?php
if( have_rows('product_gallery') ):
    while ( have_rows('product_gallery') ) : the_row();
?> 
	<div class="xzoom-thumbs"> // thumbnails
	  <a href="<?php the_sub_field('product_image') ?>">
	    <img class="xzoom-gallery" width="80" src="<?php the_sub_field('product_image'); ?>"  xpreview="<?php the_sub_field('product_image'); ?>">
	  </a>
	</div>
  <?php
endwhile;
else : ?>
<? endif;
?>

What should I do, to get values from the loop to the main image?

• John Huebner

• November 26, 2019 at 11:38 pm

<div class="col-left">

<?php
if( have_rows('product_gallery') ):
    while ( have_rows('product_gallery') ) : the_row();

    if (get_row_index() == 1) {
      // currently showing the first row
      ?>
        <img class="xzoom" src="<?php echo get_sub_field('product_image'); ?>" xoriginal="<?php echo get_sub_field('product_image'); ?>" /> // main image. I need to get values from thumbnails here after clicking on the thumbnail.
      <?php 
    }
?> 
	<div class="xzoom-thumbs"> // thumbnails
	  <a href="<?php the_sub_field('product_image') ?>">
	    <img class="xzoom-gallery" width="80" src="<?php the_sub_field('product_image'); ?>"  xpreview="<?php the_sub_field('product_image'); ?>">
	  </a>
	</div>
  <?php
endwhile;
else : ?>
<? endif;
?>

• aseret

• November 26, 2019 at 11:54 pm

Dear John,

Thank you. It is close, but when I click on the thumbnail it just opens as an image. It doesn’t show in the div.

• VSherji

• November 27, 2019 at 3:57 pm

Hey,
You can add a single image field to get the first preview image and then add the repeater field to get all images.
See below.

<div class="col-left">
<img class="xzoom" src="<?php the_field('preview_image'); ?>" xoriginal="<?php echo the_field('preview_image'); ?>" /> 
<?php
if( have_rows('main_gallery') ):
    while ( have_rows('main_gallery') ) : the_row();
	<div class="xzoom-thumbs">
	  <a href="<?php the_sub_field('image_preview') ?>">
	    <img class="xzoom-gallery" width="80" src="<?php the_sub_field('image_thumb'); ?>"  xpreview="<?php the_sub_field('image_preview'); ?>">
	  </a>
	</div>
  <?php
endwhile;
endif;
?>
</div>

• aseret

• November 27, 2019 at 8:36 pm

I tried your solution, but unfortunately there is still the same problem. When I click on the thumb it opens as new image. It should here <img class="xzoom" src="<?php the_field('preview_image'); ?>" xoriginal="<?php echo the_field('preview_image'); ?>" />

• VSherji

• December 2, 2019 at 3:47 pm

Try removing the <div class="xzoom-thumbs"> from the loop.

<div class="col-left">
<div class="xzoom-thumbs">
<img class="xzoom" src="<?php the_field('preview_image'); ?>" xoriginal="<?php echo the_field('preview_image'); ?>" /> 
<?php
if( have_rows('main_gallery') ):
    while ( have_rows('main_gallery') ) : the_row();
	  <a href="<?php the_sub_field('image_preview') ?>">
	    <img class="xzoom-gallery" width="80" src="<?php the_sub_field('image_thumb'); ?>"  xpreview="<?php the_sub_field('image_preview'); ?>">
	  </a>
  <?php
endwhile;
endif;
?>
</div>
</div>