CODEWITHSUNDEEP
jquerycsspinterest
digitale
digitale

Reputation: 41

Pinterest hover buttons

How to make "pinterest-like" buttons which only show up on hover, but are positioned inside the picture?

I'm using jQuery of course.

Upvotes: 0

Views: 5162

Answers (3)

Josh Koberstein
Josh Koberstein

Reputation: 176

I believe this is exactly what you are looking for:

http://joshkoberstein.com/blog/2012/09/jquery-pinterest-hover-button

(function($){
     $(window).load(function(){

        //the URL to be shared
        $PinItURL = $(location).attr('href');

        //for each img tag with 'pinit' class
        $('.pinit').each(function(){

            //the media to be shared - full image url
            $media = $(this).prop('src');
            //the description of media - use the image title
            $description = $(this).attr("title");

            //place 'pin it' button after the image in the DOM
            $(this).after(getButtonHTML($media, $description));

            //define the hover target as the image
            $target = $(this);
            //define pinit as the button we just placed after the image
            $pinit = $(this).next(".pinit-wrapper");

            //calculate the left position for the pinit button
            $targetX = $(this).position().left + parseInt($target.css("padding-left")) + parseInt($target.css("margin-left"));
            //calculate the top position for the pinit button
            $targetY = $(this).position().top + parseInt($target.css("padding-top")) + parseInt($target.css("margin-top"));

            //place the pinit button as an overlay on top of image
            $pinit.css({"top":$targetY+20,"left":$targetX+20});

        });

        //loadin the pinterest js to render the actual button iframe
        $.ajax({    url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true}).done(function(){

            //load complete... bind the handlers...

            //on image mouseenter, show the pinit button
            $('.pinit').bind('mouseenter', function(){
                $(this).next('.pinit-wrapper').stop().fadeTo(200, 1.0, function(){ $(this).show(); });
            });
            //on image mouseleave, hide the pinit button
            $('.pinit').bind('mouseleave', function(){
                $(this).next('.pinit-wrapper').stop().fadeTo(200, 0.0, function(){ $(this).hide(); });
            });

            //on pinit button mouseenter, do not fade out
            $('.pinit-wrapper').bind('mouseenter', function(){
                $(this).stop().stop().fadeTo(200, 1.0, function(){ $(this).show(); });
            });

        });

    });
})(jQuery);

//returns pinit link wrapped in a hidden div
function getButtonHTML($media, $description){
    $HTML = '<div class="pinit-wrapper" style="position:absolute;display:none;z-index:9999;cursor:pointer;"><a href="http://pinterest.com/pin/create/button/?url='+$PinItURL+'&media='+$media+'&description='+$description+'" class="pin-it-button" count-layout="none">Pin It</a></div>';
    return $HTML;
}

Upvotes: 3

Paulo R.
Paulo R.

Reputation: 15609

Edit: Spruced up the fiddle. Looks more pinterest like.

Here's ma fiddle (a tinker actually) -> http://tinkerbin.com/Tr7ZZTsx

No jquery, javascript or whatever needed.

The fiddle is much more impressive but here's all you need to achieve the functionality.

HTML:

<div class="box">

    <ul class="btn-list">
        <li><button>Button 1</button></li>
        <li><button>Button 2</button></li>
        <li><button>Button 3</button></li>
    </ul>

    ... 

</div>​

CSS:

.box {
    width: 200px;
    height: 300px;
}

.btn-list {
    display: none;
}

.box:hover .btn-list {
    display: block
}

Upvotes: 2

LOLapalooza
LOLapalooza

Reputation: 2082

I'd place the button inside the container div, and hide it by default. Then, when you hover over the container, show the button inside.

The container needs to have a position of relative, and the button needs to be absolute to have the floating effect. Depending on what you have in the container, you may need to add a z-index property to div.button

It'd be something like this (obviously include jQuery): 

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    $('div.container').on({
        hover: 
          function() {
            var buttonDiv = $(this).children('div.button');
            buttonDiv.toggle();
          }
    });
});
</script>

<style>
div.container {
    position: relative;
    width: 500px;
    height: 200px;
    border: 1px solid #000;
}
div.button {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 20px;
    height: 10px;
    display: none;
    border: 1px solid #000;
}
</style>
</head>

<body>
<div class="container">
    <div class="button">button text</div>
</div>
</body>
</html>

Here ya go, threw it in a jsfiddle: http://jsfiddle.net/5txv4/1/

Upvotes: 2

Related Questions