我在试图检索类别缩略图并将其用作我从JSFiddle. 它将占位符图像作为默认图像，并在类别列表的悬停位置显示类别图像。
我还无法获得要显示的占位符或类别图像。
我尝试了wp\\u get\\u attachment\\u url、get\\u term\\u thumbnail和get\\u term\\u meta来尝试检索缩略图，但我甚至不确定这些是否有效，因为我不确定如何将生成的变量“$image”合并到代码中。
$args = array(
\'taxonomy\' => \'product_cat\',
\'title_li\' => \'\',
\'hide_empty\' => 0,
\'echo\' => 0,
\'show_count\' => 0,
\'style\' => \'\',
\'parent\' => 0
);
$get_cats = get_terms( $args );
foreach ( $get_cats as $cat ) {
$image = get_term_meta( $cat->term_id, \'thumbnail_bid\', true );
?>
<div class="design">
<div class="menu">
<ul class="hoverimage">
<?php
echo \'<ul class="menu-item" data-image="$image"><a href="\' . get_term_link( $cat ) . \'">\' . $cat->name . \'</a></ul>\';
?>
</ul>
</div>
<div class="zoom-preview">
<div class="img_container">
</div>
</div>
<div class="clear"></div>
</div>
<?php
}
?>
<script>
$(function(){
var imageContainer = \'.img_container\',
imageList = \'.hoverimage\',
maxWidth = \'parent\', // parent or specific css width/
defImage = \'/wp-content/uploads/2019/06/Logo-02-02.jpg\';
var $imageContainer = $(imageContainer).eq(0);
var $imageList = $(imageList).eq(0);
if (maxWidth === \'parent\') { maxWidth = $imageContainer.width() + \'px\'; }
//Load images and set hover::
$imageList.find(\'li\').each(function(index){
if (typeof $(this).data(\'image\') === \'string\') {
$imageContainer.append(
"<img id=\'imageToggle"+index+
"\' src=\'"+$(this).data(\'image\')+
"\' style=\'max-width: "+maxWidth+"; display:none;\' />"
);
$(this).data("image","imageToggle"+index);
$(this).hover(
function(){ loadImage($(this).data(\'image\')); },
function(){ loadImage(\'imageToggleDef\'); }
);
}
});
//Load default:
$imageContainer.append(
"<img id=\'imageToggleDef"+
"\' src=\'"+defImage+
"\' style=\'max-width: "+maxWidth+"\' />"
);
//Toggle images:
function loadImage(imageId) {
$imageContainer.stop(true).fadeOut(\'fast\', function(){
$(this).find(\'img\').hide();
$(this).find(\'img#\'+imageId).show();
$(this).fadeIn(\'fast\');
});
}
});
</script>
最合适的回答,由SO网友:Orbital 整理而成
您的代码中有“taxonomy”=>“product\\u cat”，因此很可能您有Woocommerce，我们需要从中获取类别图片。尝试此代码
<?php $args = array(
\'taxonomy\' => \'product_cat\',
\'title_li\' => \'\',
\'hide_empty\' => 0,
\'echo\' => 0,
\'show_count\' => 0,
\'style\' => \'\',
\'parent\' => 0
);
$get_cats = get_terms( $args );
?>
<div class="design">
<div class="menu">
3 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
<ul class="hoverimage">
<?php
foreach ( $get_cats as $cat ) {
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, \'thumbnail_id\', true );
$image = wp_get_attachment_url( $thumbnail_id );
if($image == "") {
$image = get_bloginfo(\'url\') . \'/wp-content/uploads/2019/06/Logo-02-02.jpg\';
}
?>
<li class="menu-item" data-image="<?php echo $image; ?>"><a href="<?php echo get_term_link( $cat ); ?>"><?php echo $cat->name; ?></a></li>
<?php
}
?>
</ul>
</div>
<div class="zoom-preview">
image will appear here when we hover at each link at the left. each link it\'s own image.
Also there must be a default image here when we do not hover at any link at the left.
<div class=\'img_conatainer\'>
</div>
</div>
<div class="clear"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function(){
var imageContainer = \'.img_conatainer\',
imageList = \'.hoverimage\',
maxWidth = \'parent\', // parent or specific css width/
defImage = \'http://cdn.instructables.com/FEB/Q2RO/H9G190RM/FEBQ2ROH9G190RM.LARGE.jpg\';
var $imageContainer = $(imageContainer).eq(0);
var $imageList = $(imageList).eq(0);
if (maxWidth === \'parent\') { maxWidth = $imageContainer.width() + \'px\'; }
//Load images and set hover::
$imageList.find(\'li\').each(function(index){
if (typeof $(this).data(\'image\') === \'string\') {
$imageContainer.append(
"<img id=\'imageToggle"+index+
"\' src=\'"+$(this).data(\'image\')+
"\' style=\'max-width: "+maxWidth+"; display:none;\' />"
);
$(this).data("image","imageToggle"+index);
$(this).hover(
function(){ loadImage($(this).data(\'image\')); },
function(){ loadImage(\'imageToggleDef\'); }
);
}
});
//Load default:
$imageContainer.append(
"<img id=\'imageToggleDef"+
"\' src=\'"+defImage+
"\' style=\'max-width: "+maxWidth+"\' />"
);
//Toggle images:
function loadImage(imageId) {
$imageContainer.stop(true).fadeOut(\'fast\', function(){
$(this).find(\'img\').hide();
$(this).find(\'img#\'+imageId).show();
$(this).fadeIn(\'fast\');
});
}
});
</script>
