CODEWITHSUNDEEP
javascriptjquerycolorboxpinterest
user1402068
user1402068

Reputation:

Colorbox and pinterest button URL updating

I've got an image gallery which is dynamically populated using a database query. From here I've got colorbox working so that when you click the image it loads the image and allows you to click next/prev to work your way through the images - pretty standard stuff.

What I've then done is add a pinterest button to the colorbox so when the colorbox loads the user has the option to pin the image they're looking at.

$(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>"
          );        
        },
      });
    });

Now from the code above I'm opening the colorbox and adding a class purely for styling purpose when it opens. After that I'm setting a few variables which will help me build the URL which is set to pinterest with the information.

This works fine if I'm clicking each image individually. However as soon as I click the next/prev buttons I want it to update the URL with the image name and description of the current image the user is looking at.

Any help would be great!

Upvotes: 0

Views: 549

Answers (1)

Jack
Jack

Reputation: 9548

Use the onComplete callback to update the href attribute of your anchor element.

Upvotes: 1

Related Questions