Refresh custom gallery image without page reload using jQuery prevent default

• ddogdani

• August 5, 2016 at 10:13 am

Sorry if I forgot to use the “code” block. Thanks for your quick response hopefully this will make the issue more visually accessible to all.

Live example here:
http://doubledogproductions.com/gresla-wp/menu-test/

Re. your suggestion to use jQuery’s preventDefault() function here’s my code:

<div  class="container-fluid nopadding" >
<a id="portfolio"></a>
		<div class="row">
      <div class="col-sm-12"> 
		<div class="container-fluid section-pad copy-dkGray">
       
  <div class="container-fluid header-black">    
<h2><?php the_field ( 'portfolio_headline_healthcare' ); ?></h2>
<br>
<div >
     <?php  if ( have_rows ( 'project_repeater_healthcare' ) ): $i = 0 ?>
         <ul id="content-slider" class="content-slider" >
             <?php while ( have_rows ( 'project_repeater_healthcare' ) ) : the_row();  $i++ ?> 
		 
	<?php // vars		
	$repeater= get_field('project_repeater_healthcare');
	$thumb = get_sub_field ( 'healthcare_thumb' );
	$hero = get_sub_field ( 'healthcare_hero' );
 	$title = get_sub_field ( 'healthcare_title' );
        $alt =  $title;
	$size = 'full'; // (thumbnail, medium, large, full or custom size)
	$row_ID = $i;	
	?>
    
    <?php
		
	if (isset($_GET[ 'image_ID' ]) && isset($_GET[ 'row_ID' ]) ) {
	$row_ID = $_GET[ 'row_ID' ];
	$mainImage = $_GET[ 'image_ID' ];
	$mainTitle =  $repeater [ $row_ID ] ['healthcare_title'];
	$mainExcerpt =  $repeater [ $row_ID ] ['healthcare_excerpt'];
	$mainCopy =  $repeater [ $row_ID ] ['healthcare_copy'];
	}
else {
	$mainImage =  $repeater [0]  ['healthcare_hero'];
	$mainTitle =  $repeater [0]  ['healthcare_title'];
	$mainExcerpt =  $repeater [0]  ['healthcare_excerpt'];
	$mainCopy =  $repeater [0]  ['healthcare_copy'];
}
		         
  // set other sub_fields if thumbnail is same as main image
       if ( $repeater [0]  ['healthcare_hero'] == $mainImage ) {
	  $thumb = get_sub_field ( 'healthcare_thumb' );
          $title = get_sub_field ( 'healthcare_title' );
	  $excerpt = get_sub_field ( 'healthcare_excerpt' );
	  $copy = get_sub_field ( 'healthcare_copy' );					
      }
?>               
            <li>
            <?php $row =  $i - 1;  ?> 

<?php // here is the thumbnail slider where the click event should occur ?>   
      <div><a href="?image_ID=<?php echo $hero; ?>&row_ID=<?php echo $row; ?>"><img  src="<?php echo $thumb; ?>" alt="<?php echo $title; ?>" style=" width:100%; height:100%; overflow:hidden; " /></a>
       </div>  
       <div class="port-thumb"><h5><?php echo $title; ?></h5></div></a> 
                                                         
          </li>
 <?php endwhile; ?>                
     </ul>
 <?php endif; ?>         
</div>
<br>

<?php if ( have_rows ( 'project_repeater_healthcare' ) ) : $i = 0; ?>
<?php while ( have_rows ( 'project_repeater_healthcare' ) ) : the_row(); $i++;  ?> 
     <?php // break loop to only show first row
		 if ( $i > 1  )
	     {
		break;
		   }	   	 
        	 ?>     	
 <?php  
//var 
$row = $i - 1;

if( $mainImage ) { ?>

    // div where main image is appended to using preventDefault() with id "#main-image"
 <div id="main-image" class="container-fluid nopadding">
<?php echo wp_get_attachment_image( $mainImage, $size ); ?>
  </div>

<?php } ?>
 
// associated data that will change with onClick
        <h4><?php echo $mainTitle; ?></h4>
		<?php echo $mainExcerpt; ?>
		<div id="showhide-copy">
		<?php echo $mainCopy; ?><br>
		</div>        
		<a id="clickme" class="link-pos-health" role="button">READ MORE</a>
		<br><br><br><br>                                

        <?php endwhile;	 
		endif; ?>
        
		</div>

       </div>
       
     </div>
     
   </div>
   
</div>

Here is where I wp-enqueue preventDefault.js file containing jquery function call in functions.php:
wp_enqueue_script( 'preventDefault', get_template_directory_uri() . '/js/preventDefault.js', '', '', true );

Here is the jQuery preventDefault() script:

$( "#thumbclick" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append("<?php echo wp_get_attachment_image( $mainImage, $size ); ?>")
    .appendTo( "#main-image" );
});

This looks to be the simplest solution but it doesn’t work. First, I’m not sure what to call with “append()”. This section will actually be part of a longer scrolling page.

Excuse my “newbie-ness” and thanks so much for your help! ~D

• James

• August 5, 2016 at 2:15 pm

Hi @ddogdani

I believe the preventDefault() function doesn’t work because the target is not correct. Could you please try this one instead:

$( ".lslide a, .clone a" ).click(function( event ) {
  event.preventDefault();
});

The append part should be replaced with JS code that can replace the main image with the right one. If you use AJAX to get the image, then you need to execute the function here. If you use a slider plugin, please ask the plugin author about it.

I hope this helps 🙂