首页 文章

将自定义类添加到wordpress中的图像库[关闭]

提问于
浏览 次
1

我是wordpress的新手，并且正在使用自定义主题（http://demo.richwp.com/showcasedark/） .

我想使用我自己的自定义灯箱脚本（每个图像都需要一个自定义类），但我很难尝试将该类应用于我的图片库 .

例如，每个图像默认为此HTML代码：

a href =“_ images / anim_reel001.jpg”（后面是img源码详情）

我希望它看起来像这样：

a href =“_ images / anim_reel001.jpg”class =“view”（后面是img源码详情）

看起来这样做的方法是在我的functions.php文件中创建一个自定义函数，但我对PHP脚本完全无能为力 . 此外，我不确定这是否适用于现有图像或仅适用于我上传的新图像/画廊 . 任何帮助，将不胜感激！

php wordpress lightbox

1 回答

  • 2

    如果jQuery是一个选项...你可以定位所有的画廊，并确保将该类添加到锚点 . 你可以在这里看到这个：

    演示

    在小提琴结果中查看占位符图像上的源代码，您可以看到，即使在标记中， <a> 现在也没有类 .

    这适用于3个代码块，以模仿WordPress库输出的内容 .

    HTML

    <div id="gallery-1" class="gallery">
  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

  <dl class="gallery-item">
    <dt class="gallery-icon">
      <a href="#">
        <img width="75" height="75" src="http://dummyimage.com/75x75/000/fff.jpg" class="attachment-thumbnail" />
      </a>
    </dt>
  </dl>

    CSS

    #gallery-1 {
  margin: auto;
}
#gallery-1 .gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 25%;            }
#gallery-1 img {
  border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
  margin-left: 0;
}

    jQuery

    $(document).ready(function(){
  $('div.gallery').each(function(i) {
    $('.attachment-thumbnail').parent().addClass('view');
  });
});

    好的东西发生在jQuery代码块中，因为你可以看到当文档准备就绪时我们通过 div.gallery 选择它们来浏览所有的库，然后我们循环遍历每个库以找到给出的 .attachment-thumbnail 类到了WordPress库的 <img> 拇指，我们的目标是 <img> 的父级，恰好是 <a> 标签，并添加了你想要的类叫 .view .

    值得注意的是，要使此解决方案适合您，您需要在文件中包含jQuery，否则这将无法正常工作 . 您可能已经包含了jQuery .

    回复于

相关问题