Criar imagem pop-up com botão de compartilhamento - javascript, html5, imagem, css3, pop-up

Quero fazer a galeria de imagens pop-up com o botão de compartilhamento do facebook e twitter, mas não sei como fazê-lo.

Alguém tem um tutorial de referência?

Desde já, obrigado,

Saudações :)

Respostas:

Por favor, verifique este tutorial. É flexível e fácil de usar http://fancyapps.com/fancybox/

este meu script embutido:

<script>
$(".fancybox")
.attr("rel", "gallery")
.fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += "<br />";

this.title += "<p> Vote : 0 </p>"

// Add vote button
this.title += "<button class="btn-oi custom-vote"><span>Vote</span></button> ";

// Add share fb button
this.title += "<button class="btn-oi custom-fb icon-fb"><span>Share</span></button>";

// Add share tweet button
this.title += "<button class="btn-oi custom-twit icon-twit"><span>Share</span></button>";


}
},
helpers : {
title : {
type: "inside"
}
}
});

</script>

este meu html:

<div id="member-gallery" class="col-xs-12 col-md-7">
<div class="title-template gallery-left"> Member Gallery </div>

<div class="row">

<div class="col-xs-12 col-md-4 item gallery">
<a title="Ramanda Chairina" class="fancybox" href="img/logo-1.jpg">
<img src="/images/img/logo-1.jpg" alt=""/> <!-- size original w: 320px h: 260px -->
</a>
</div>

</div>
</div>
</div>