As you might have noticed, nowadays, pinterest Pin count button can be found in most design websites, they also released a bookmarklet that scan a webpage for images and allow you to pin it easily.

Your users will be able to pin any images posted when using the bbc tag in your forum posts. I will show you how to pin your bbc tagged images straight away in the below tutorial.

Demo: Pin it to Pinterest

In your theme's CSS folder, create a file called jquery.pinit.css and add the following:

Code Select Expand


.pinit {
position:relative;
display:inline-block;

}

.pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:auto;
z-index:200;
display:none;
background: rgba(255, 255, 255, 0.75);
text-align:center;
}

.pinit .pinit-overlay a {
position:relative;
top:50%;
left:50%;
margin:-10px 0 0 -21px;
display:block;
width:43px;
height:20px;
background:transparent url(../images/pinit-button.png) no-repeat 0 0;
text-indent:-9999em;
}

.pinit .pinit-overlay a:hover {
background-position: 0 -21px;
}

.pinit .pinit-overlay a:active {
background-position: 0 -42px;
}


Save the pinterest button as pinit-button.png and load it to your theme's image folder.


In your theme's JS folder, create a file called jquery.pinit.js and add the following:

Code Select Expand


/*
* jQuery Pinit for Pinterest
* Author: Kevin Liew
* Website: queness.com
* License: http://redactorjs.com/license/
* Usage: $('img').pinit();
*/

(function($){

    //Attach this new method to jQuery
    $.fn.extend({
         
        pinit: function(options) {

var defaults = {
wrap: '<span class="pinit"/>',
pageURL: document.URL
}

var options = $.extend(defaults, options);
var o = options;

            //Iterate over the current set of matched elements
            return this.each(function() {

              var e = $(this),
              pi_media = e.data('media') ? e.data('media') : e[0].src,
              pi_url = o.pageURL,
              pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
              pi_isvideo = 'false';
              bookmark = '[url=http://pinterest.com/pin/create/bookmarklet/?media=']Pinterest[/url] + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);

var eHeight = e.outerHeight();
              e.wrap(o.wrap);
              e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');

$('.pinit .pinit-button').on('click', function () {
window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
return false;
});     

$('.pinit').mouseenter(function () {
$(this).children('.pinit-overlay').fadeIn(200);
}).mouseleave(function () {
$(this).children('.pinit-overlay').fadeOut(200);
});


            });
     
        }
       
    });

})(jQuery);


Open your /index.template.php and find:

Code Select Expand

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '


Add after:

Code Select Expand

       
        <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/jquery.pinit.css" />


Find:

Code Select Expand


</body></html>';
}


Add before:

Code Select Expand


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/js/jquery.pinit.js">
<script type="text/javascript">
                $(function () {
$(".bbc_img").pinit();

     });
</script>


Credits: Queness - Design Inspirations, jQuery Tutorials and Web Design & Development Community

As you might have noticed, nowadays, pinterest Pin count button can be found in most design websites, they also released a bookmarklet that scan a webpage for images and allow you to pin it easily.

Your users will be able to pin any images posted when using the bbc tag in your forum posts. I will show you how to pin your bbc tagged images straight away in the below tutorial.

Demo: Pin it to Pinterest

In your theme's CSS folder, create a file called jquery.pinit.css and add the following:

Code Select Expand


.pinit {
position:relative;
display:inline-block;

}

.pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:auto;
z-index:200;
display:none;
background: rgba(255, 255, 255, 0.75);
text-align:center;
}

.pinit .pinit-overlay a {
position:relative;
top:50%;
left:50%;
margin:-10px 0 0 -21px;
display:block;
width:43px;
height:20px;
background:transparent url(../images/pinit-button.png) no-repeat 0 0;
text-indent:-9999em;
}

.pinit .pinit-overlay a:hover {
background-position: 0 -21px;
}

.pinit .pinit-overlay a:active {
background-position: 0 -42px;
}


Save the pinterest button as pinit-button.png and load it to your theme's image folder.


In your theme's JS folder, create a file called jquery.pinit.js and add the following:

Code Select Expand


/*
* jQuery Pinit for Pinterest
* Author: Kevin Liew
* Website: queness.com
* License: http://redactorjs.com/license/
* Usage: $('img').pinit();
*/

(function($){

    //Attach this new method to jQuery
    $.fn.extend({
         
        pinit: function(options) {

var defaults = {
wrap: '<span class="pinit"/>',
pageURL: document.URL
}

var options = $.extend(defaults, options);
var o = options;

            //Iterate over the current set of matched elements
            return this.each(function() {

              var e = $(this),
              pi_media = e.data('media') ? e.data('media') : e[0].src,
              pi_url = o.pageURL,
              pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
              pi_isvideo = 'false';
              bookmark = '[url=http://pinterest.com/pin/create/bookmarklet/?media=']Pinterest[/url] + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);

var eHeight = e.outerHeight();
              e.wrap(o.wrap);
              e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');

$('.pinit .pinit-button').on('click', function () {
window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
return false;
});     

$('.pinit').mouseenter(function () {
$(this).children('.pinit-overlay').fadeIn(200);
}).mouseleave(function () {
$(this).children('.pinit-overlay').fadeOut(200);
});


            });
     
        }
       
    });

})(jQuery);


Open your /index.template.php and find:

Code Select Expand

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '


Add after:

Code Select Expand

       
        <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/jquery.pinit.css" />


Find:

Code Select Expand


</body></html>';
}


Add before:

Code Select Expand


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/js/jquery.pinit.js">
<script type="text/javascript">
                $(function () {
$(".bbc_img").pinit();

     });
</script>


Credits: Queness - Design Inspirations, jQuery Tutorials and Web Design & Development Community

How to center images...

jQuery Slider

Add images to the menu

SMF News end of page slideout w/ jQuery

Create a simple carousel with jQuery