0

我有一个画廊页面，其中有一个主页和小拇指，当他们单击小拇指时，它将显示在主图像部分，但是我的 google+ 按钮只会反映页面加载时的第一个图像以及图像更改时不更新新图像。

任何帮助都会很棒谢谢。

我的代码

它在字符串生成器中

<div id='divGPlusone' class='g-plusone' data-size='medium' data-annotation='inline' data-width='300' data-href='http://" & siteURL & "'></div>

js

<script type="text/javascript">
    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>
4

1 回答 1

1

听起来您希望能够为主页 +1 并为动态加载的独特图像 +1。您在问题中的 +1 按钮代码足以用于主页 +1。

每次您的用户单击图像时，您都希望为图像动态创建一个新的 +1 按钮或更改data-href现有按钮的参数。您选择哪个选项可能会决定您的页面设计。我将为这两种方法提供示例：

为图像动态插入一个新的 +1 按钮：

<script type="text/javascript">
  // Assuming you have an existing method that is swapping the images.
  function loadImage() {
    // Existing image swap code runs

    // Assume you have a URL that can be externally referenced and points directly
    // to the unique image rather than to the main page, otherwise, doesn't make a 
    // lot of sense to +1 it.
    var uniqueImagePage = 'http://example.com/gallery/image005.html';

    // Dynamically render a new +1 button
    // First insert a node to attach the button to.
    var div = document.createElement('div');
    div.id = 'image005';

    // Assume you have a container element that your image also goes into
    var container = document.getElementById('imgContainer');

    // Append the new +1 button into that container
    container.appendChild(div);

    var plusOneOptions = {
      'href' : uniqueImagePage,
      'width' : '300'
      // Any other params
    };
    gapi.plusone.render('image005',plusOneOptions);
  }
</script>

动态更改现有 +1 按钮的 URL

我们假设您现有的 +1 按钮具有与其 DIV 关联的 ID：

<div
  id="imagePlusOneButton"
  class="g-plusone"
  data-href="http://example.com/oldurl.html">
</div>

然后，当您在图库中交换图像时，您将更改 URL：

<script type="text/javascript">
  // Assuming you have an existing method that is swapping the images.
  function loadImage() {
    // Run existing image swap code.

    // Change the +1 button URL
    var plusDiv = document.getElementById('imagePlusOneButton');

    // Change URLs associated with the current button
    plusDiv.setAttribute('data-href','http://example.com/newUrl.html');

  }
</script>

如果您不想为每个图像注入新的 +1 按钮，而是为主页添加一个按钮，为当前显示的图像添加一个按钮，则此方法也可以与第一种方法一起使用。

该gapi.plusone.render()方法是您需要使用 +1 按钮执行任何动态操作的方法。有时您还需要将全局配置参数设置parseTags为explicit取决于您希望何时呈现标签。

于 2013-04-29T00:47:58.547 回答