2013-04-26 69 views
0

我有一个画廊页面,其中有一个主页和小拇指,当他们点击小拇指时,它会显示在主图像部分,但我的谷歌+按钮将只反映第一页上的图像加载和图像更改时不会更新新图像。谷歌加按钮图片更新

任何帮助将是伟大的谢谢你。

我的代码

它在一个字符串生成器

<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> 

回答

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按钮的网址动态

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

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

然后,当你在你的画廊交换图片,你会改变的网址:

<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() method是您需要用+1按钮进行任何动作的人。有时,您还需要将全局配置参数parseTags设置为explicit,具体取决于您希望标记呈现的时间。