Magntic Popup-为图片添加标题

时间:2015-02-16 作者:JoaMika

我的主题使用放大弹出窗口,如下所示theme.js

  /* add lightbox for blog galleries */
  $(".gallery a[href$=\'.jpg\'],.gallery a[href$=\'.jpeg\'],.featured-item a[href$=\'.jpeg\'],.featured-item a[href$=\'.gif\'],.featured-item a[href$=\'.jpg\'], .page-featured-item .slider a[href$=\'.jpg\'], .page-featured-item a[href$=\'.jpg\'],.page-featured-item .slider a[href$=\'.jpeg\'], .page-featured-item a[href$=\'.jpeg\'], .gallery a[href$=\'.png\'], .gallery a[href$=\'.jpeg\'], .gallery a[href$=\'.gif\']").parent().magnificPopup({
    delegate: \'a\',
    type: \'image\',
    tLoading: \'<div class="loading dark"><i></i><i></i><i></i><i></i></div>\',
    mainClass: \'my-mfp-zoom-in\',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: \'<a href="%url%">The image #%curr%</a> could not be loaded.\',
      verticalFit: false
    }
  }); 
我想修改它,在Wordpress图库中添加每个图像的标题。我知道我应该使用选择器。

image: {
            titleSrc: 
}
此外,我不想直接编辑此代码,因为它是主题的一部分。我可以使用函数或页脚来附加更改吗?

2 个回复
SO网友:cristian.raiber

您必须添加title 属性到<a href> 正在应用放大弹出效果的图像周围的代码。

新代码应如下所示:

$thumb_img = get_post( get_post_thumbnail_id() ); // Get post by ID
$excerpt = $thumb_img->post_excerpt; // Display Caption
<a href="{current_url_here}" title="<?php echo $excerpt; ?>" />
如果您可以在问题中粘贴一些示例代码,我将更容易帮助您:)

希望这有帮助。

SO网友:kosinix

假设您在媒体库的标题字段中输入了一些文本,您可以使用自定义回调titleSrc:

titleSrc: function(item) {
    return item.el.parents(\'.gallery-item\').find(\'.gallery-caption\').text();
}
在这里,它与您提供的代码集成:

/* add lightbox for blog galleries */
$(".gallery a[href$=\'.jpg\'],.gallery a[href$=\'.jpeg\'],.featured-item a[href$=\'.jpeg\'],.featured-item a[href$=\'.gif\'],.featured-item a[href$=\'.jpg\'], .page-featured-item .slider a[href$=\'.jpg\'], .page-featured-item a[href$=\'.jpg\'],.page-featured-item .slider a[href$=\'.jpeg\'], .page-featured-item a[href$=\'.jpeg\'], .gallery a[href$=\'.png\'], .gallery a[href$=\'.jpeg\'], .gallery a[href$=\'.gif\']").parent().magnificPopup({
    delegate: \'a\',
    type: \'image\',
    tLoading: \'<div class="loading dark"><i></i><i></i><i></i><i></i></div>\',
    mainClass: \'my-mfp-zoom-in\',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
        tError: \'<a href="%url%">The image #%curr%</a> could not be loaded.\',
        verticalFit: false,
        titleSrc: function(item) {
            return item.el.parents(\'.gallery-item\').find(\'.gallery-caption\').text();
        }
    }
});
此外,我不想直接编辑此代码,因为它是主题的一部分。我可以使用函数或页脚来附加更改吗?

可以将子主题与自己的主题一起使用。替代主题主题的js。js。看见https://codex.wordpress.org/Child_Themes

结束

相关推荐

Responsive Admin Themes

我在看这个管理主题的示例(http://themepixels.com/main/themes/demo/webpage/shamcey/dashboard.html). 至于标签为“Navigation”的左侧管理栏,有没有一种方法可以在不使用插件的情况下实现这种类型的左侧仪表板管理菜单?我想用css、js或Jquery来实现这一点,任何处理编码的东西都可以。