Erstellen Sie ein Popup-Bild mit der Share-Taste - Javascript, HTML5, Bild, CSS 3, Popup

Ich möchte die Popup-Bildergalerie mit Facebook- und Twitter-Share-Button erstellen, weiß aber nicht, wie ich das machen soll.

Hat jemand ein Referenz-Tutorial?

Danke im Voraus,

Grüße :)

Antworten:

Bitte überprüfen Sie dieses Tutorial. Es ist flexibel und einfach zu bedienen http://fancyapps.com/fancybox/

Dies ist mein Inline-Skript:

<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>

das ist mein 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>