2013-04-26 95 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,具體取決於您希望標記呈現的時間。