我设置了一个自定义帖子类型“女性”。有56个帖子,其中包括肖像和传记。然后,我设置了一个Gallery页面,该页面从每个帖子中获取缩略图并将其显示在Gallery中。单击缩略图可使用Magnific Popup打开带有全尺寸图像的模态。我陷入困境的地方是试图弄清楚如何在图像标题和女性单页之间添加永久链接?在此代码段中,永久链接链接回到当前页面,而不是后父链接。我可以获取一些格式化titleSrc的方法吗?谢谢。
<ul class="popup-gallery scroll-effect">
<?php
$args = array('post_type' => 'women','orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => 100);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$image = get_field('portrait');
$post_id = get_field('url', false, false);
if( !empty($image) ):
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$size = 'medium';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
?>
<li>
<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
<img class="icon" src="<?php echo get_template_directory_uri(); ?>/i/icon-image-expand.png">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
</a>
</li>
<?php endif; ?>
<?php endwhile; wp_reset_query();?>
</ul>
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + ' • <a href="<?php echo get_the_permalink(); ?>">Her Story</a>';
}
}
});
javascript参考方案
PHP部分
在<a>
标记中,将href
设置为单个帖子的永久链接,并将data-mfp-src
设置为图像URL($url
):
<li>
<a href="<?php the_permalink(); ?>" data-mfp-src="<?php echo $url; ?>" title="<?php echo $title; ?>">...</a>
</li>
JS部分
然后,在titleSrc
回调中,可以使用item.el.attr('href')
获得单个帖子的永久链接:
titleSrc: function(item){
return item.el.attr('title') + ' • <a href="' + item.el.attr('href') + '">Her Story</a>';
}
我在CodePen上放置了demo,有关data-mfp-src
属性的更多详细信息,请参见documentation。
昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意,将javascript代码重写为c#这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=…
如果复选框切换复选框已选中,则在切换div中输入必填字段 - javascript我使用脚本用JavaScript切换了一些div。如果要选中复选框以显示toogle div,我想在toogle div中设置一些“必填”输入字段。有人能弄清楚吗?那是工作吗?function show(id) { if(document.getElementById) { var mydiv = document.getElementById(id); m…
在laravel中应用ajax - javascript我想在laravel 4.2中应用ajax。我想重定向到页面而不重新加载它。我已经尝试过使用window.loaction.href和window.loaction.assign了,但是它不起作用。这是我的文件Route.php //login+logout+auth Route::get('login','authentica…
从其他文件夹访问母版页 - javascript我认为这应该很容易但不确定如何解决。我在主文件夹中有一个名为01.aspx的页面01.aspx页应该继承products.master项目根目录存在于products.master中像下面的照片:我使用波纹管代码,但没有任何工作的JavaScript,图像和...01.aspx<%@ Page Title="" Language=&…
打印二维阵列 - javascript我正在尝试打印子元素。在this example之后。怎么做?。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…