[英]Using ACF image field in JavaScript
I have used some JavaScript on a previous site and would like to re-use the effect - the effect being a background image on a div changes when hovering over various links.我在以前的站点上使用了一些 JavaScript,并希望重新使用该效果 - 将鼠标悬停在各种链接上时,div 上的背景图像效果会发生变化。
However this time, I want the images to be ACF fields.但是这一次,我希望图像是 ACF 字段。 I have read through the JavaScript API documentation and other posts but I can't get it to work.
我已经通读了 JavaScript API 文档和其他帖子,但我无法让它工作。
This is what I have.这就是我所拥有的。 I think maybe I have correctly fetched the field but need to add the action of showing it on hover.
我想也许我已经正确地获取了该字段,但需要添加在悬停时显示它的操作。
Each table cell on the left is an ACF field that consists of a title, description, link and image.左侧的每个表格单元格都是一个 ACF 字段,由标题、描述、链接和图像组成。 I want the large image on the right to change to the ACF image applied to each cell when each one is hovered over.
我希望右侧的大图像在每个单元格悬停时更改为应用于每个单元格的 ACF 图像。
I have included my attempts, though I have very limited php/js knowledge so it's likely not even close.我已经包括了我的尝试,尽管我的 php/js 知识非常有限,所以它甚至可能还不是很接近。 I am also new to ACF.
我也是 ACF 的新手。
Attempt 1尝试 1
const defaultImg = "/wp-content/default-image.jpg";
const newImg = acf.getField('featured_item_one_image');
const newImgb = acf.getField('featured_item_two_image');
$('.feat-block-1')
.on('mouseover', function() {
$('.main-image').css('background-image', "url(" + newImg + ")");
})
$('.feat-block-2')
.on('mouseover', function() {
$('.main-image').css('background-image', "url(" + newImgb + ")");
})
Attempt 2尝试 2
const newImg = acf.getField('field_5de5a95617941');
const newImgb = acf.getField('field_5de5abd20cb3f');
$('.feat-block-1')
.on('mouseover', function() {
$('.main-image').css('background-image', "url(" + newImg + ")");
})
$('.feat-block-2')
.on('mouseover', function() {
$('.main-image').css('background-image', "url(" + newImgb + ")");
})
And Also this without any of the 'const' values at the top而且这在顶部没有任何“const”值
$('.feat-block-1')
.on('mouseover', function() {
$('.main-image').css('background-image', "acf.getField('field_5de5abd20cb3f')");
})
$('.feat-block-2')
.on('mouseover', function() {
$('.main-image').css('background-image', "acf.getField('field_5de5abd20cb3f')"); })
Any help would be much appreciated任何帮助将非常感激
I have done this before but in different way see below code:我以前做过这个,但以不同的方式见下面的代码:
1) I have used Advance Custom field Repeater plugin pluginlike i have installed that and make custom fields with that see here ( https://prnt.sc/q6yohq ) 1)我使用了高级自定义字段中继器插件插件,就像我已经安装了它并使用这里看到的自定义字段( https://prnt.sc/q6yohq )
2) insert the value in page from admin eg i want this value "stackoverflowpage" page(i have made template )so from admin i will insert the value see here( https://prnt.sc/q6yqak ) 2)从管理员的页面中插入值,例如我想要这个值“stackoverflowpage”页面(我已经制作了模板)所以从管理员我会插入值在这里看到( https://prnt.sc/q6yqak )
3) In template file (.php) i have inserted below code I have take image value in input type hidden in bg-image by id so i can use later in jquery to show image on hover 3)在模板文件(.php)中,我在下面的代码中插入了我在输入类型中通过id隐藏在bg-image中的图像值,所以我可以稍后在jquery中使用以在悬停时显示图像
<?php
if( have_rows('allfields') ): ?>
<?php
$i=1;
while( have_rows('allfields') ): the_row();
// vars
$image = get_sub_field('image');
$title = get_sub_field('title');
$content = get_sub_field('description');
$link = get_sub_field('link');
?>
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr>
<td >
<div id="slides_<?php echo $i ?>" class="divcommonclass">
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr>
<td style="width: 100%" class="home-featured-heading">
<h4>
<a href="<?php echo $link ?>" target="_blank"><?php echo $title; ?> </a>
</h4>
</td>
</tr>
<tr>
<td style="width: 100%" class="home-featured-heading">
<?php echo $content; ?>
</td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" id="bg-image" value="<?php echo $image['url']; ?>">
</td>
</tr>
</tbody>
</table>
<?php $i++;
endwhile; ?>
<?php endif; ?>
<div class="imageshow"></div>
4) give style to div where we want to show image 4)给我们想要显示图像的div样式
<style>
.imageshow {
background-repeat: no-repeat;
background-image: url('http://localhost/stackoverflow/wp-content/uploads/2019/12/person_2.jpg');
width: 100%;
height: 100%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
</style>
5) add this script to show image when hover on block 5)添加此脚本以在将鼠标悬停在块上时显示图像
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
</script>
<script>
$(document).ready(function(){
$('.divcommonclass')
.on('mouseover', function() {
var id = $(this).attr('id');
var imagpath = $('#'+id+ "+ #bg-image").val();
$('.imageshow').css('background-image', "url(" + imagpath + ")");
});
});
</script>
I did not use of javascript to get image value of acf javascript and show in div for that i have just used inut type hidden and add value there and in javascript i have just get that image value by its id我没有使用 javascript 来获取 acf javascript 的图像值并在 div 中显示,因为我刚刚使用了隐藏的 inut 类型并在那里添加了值,在 javascript 中我刚刚通过其 id 获得了该图像值
Output : please download and check video( https://drive.google.com/file/d/1xTmSBlxn9NW0Klc4l-uOdA_l---oHuV7/view )输出:请下载并检查视频( https://drive.google.com/file/d/1xTmSBlxn9NW0Klc4l-uOdA_l---oHuV7/view )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.