Home › Forums › Front-end Issues › Refresh custom gallery image without page reload using jQuery prevent default
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
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 🙂
The topic ‘Refresh custom gallery image without page reload using jQuery prevent default’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.