Support

Account

Home Forums Add-ons Repeater Field Gallery with main picture and thumbnails

Solving

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?

  • 
    <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.

    • Wish

    • 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'); ?>" />

    • Wish

    • 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>
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.