0

データベース クエリを使用して動的に入力される画像ギャラリーがあります。ここから、画像をクリックすると画像が読み込まれ、次/前をクリックして画像を処理できるように、カラーボックスが機能するようになりました-かなり標準的なものです。

次に、カラーボックスに pinterest ボタンを追加して、カラーボックスがロードされたときに、ユーザーが見ている画像をピン留めするオプションを使用できるようにしました。

$(document).ready(function(){
    $(".gallery").colorbox({
        rel:'group1',
        height: '415px',
        onOpen:function(){  
          $('#colorbox').addClass('cbox-alt');

          // variables used to build pinterest URL
          var baseurl = 'http://www.baseurl.co.uk';
          var imgsrc = $(this).children('img').attr('src'); 
          var desc = $(this).children('img').attr('alt');

          $('#cboxContent').append(
            "<div id='pinterest'><a data-pin-config='none' href='//pinterest.com/pin/create/button/?url=" + baseurl + "&media=" + imgsrc + "&description=" + desc + "' data-pin-do='buttonPin'><img src='http://www.baseurl.co.uk/images/pin_it_button.png' alt='Pin it' /></a></div>"
          );        
        },
      });
    });

上記のコードから、カラーボックスを開き、開いたときにスタイルを設定するためだけにクラスを追加しています。その後、情報を使用して pinterest に設定された URL を作成するのに役立ついくつかの変数を設定しています。

各画像を個別にクリックすると、これはうまく機能します。ただし、次/前のボタンをクリックするとすぐに、ユーザーが見ている現在の画像の画像名と説明で URL を更新したいと考えています。

どんな助けでも素晴らしいでしょう！

4

1 に答える 1

1

onCompleteコールバックを使用して、アンカー要素のhref属性を更新します。

于 2013-03-05T15:34:46.407 に答える