Jquery- Sürükle & Paylaş (Drag Share) Uygulaması

Website içeriklerini facebook ,delicious ,twitter gibi sosyal içerik sitelerinde paylaşmak site adını ve içerisinin kısa süre içerisinde yayılmasını ve daha geniş kitlelere ulaşmasını sağlar. Bu örneğimizde bir biyografi sayfasını facebook ,delicious ,twitter gibi sosyal içerik sistemlerinde paylaşmayı ögrenecegiz.

Javascript kodlarımız


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {

//cache selector
var images = $("#content img"),
title = $("title").text() || document.title;

//make images draggable
images.draggable({
//create draggable helper
helper: function() {
return $("<div>").attr("id", "helper").html("<span>" + title + "</span><img id='thumb' src='" + $(this).attr("src") + "'>").appendTo("body");
},
cursor: "pointer",
cursorAt: { left: -10, top: 20 },
zIndex: 99999,
//show overlay and targets
start: function() {
$("<div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
$("#tip").remove();
$(this).unbind("mouseenter");
$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
},
//remove targets and overlay
stop: function() {
$("#targets").slideUp();
$(".share", "#targets").remove();
$("#overlay").remove();
$(this).bind("mouseenter", createTip);
}
});

//make targets droppable
$("#targets li").droppable({
tolerance: "pointer",
//show info when over target
over: function() {
$(".share", "#targets").remove();
$("<span>").addClass("share").text("Share on " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
},
drop: function() {
var id = $(this).attr("id"),
currentUrl = window.location.href,
baseUrl = $(this).find("a").attr("href");

if (id.indexOf("twitter") != -1) {
window.location.href = baseUrl + "/home?status=" + title + ": " + currentUrl;
} else if (id.indexOf("delicious") != -1) {
window.location.href = baseUrl + "/save?url=" + currentUrl + "&amp;amp;amp;amp;title=" + title;
} else if (id.indexOf("facebook") != -1) {
window.location.href = baseUrl + "/sharer.php?u=" + currentUrl + "&amp;amp;amp;amp;t=" + title;
}
}
});

var createTip = function(e) {
//create tool tip if it doesn't exist
($("#tip").length === 0) ? $("<div>").html("<span>Sürükle ve paylaş<\/span><span class='arrow'><\/span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
};

images.bind("mouseenter", createTip);

images.mousemove(function(e) {

//move tooltip
$("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
});

images.mouseleave(function() {

//remove tooltip
$("#tip").remove();
});
});
</script>

HTML kodlarımız


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Drag to Share Example</title>
<link rel="stylesheet" type="text/css" href="dragToShare.css">
</head>
<body>
<div id="content">
<img src="rover.png" alt="Ömer Hayyam">
HAYYAM (Ebul Feth Ömer bin İbrahim; Ömer Hayyam da denir), İranlı şair ve bilgin (Nişapur 1044.ay.y 1123/1136). Hayatı, gençlik yılları kesinlikle bilinmiyor. Elde bulunan eserlerinden, hayatıyla ilgili olayları anlatan bazı kitaplardan, mantık, felsefe, matematik ve astronomi konularında çalıştığı, bu alanlarda düzenli bir öğrenim gördüğü anlaşılmaktadır. Hayyam ("Çadırcı") takma adını, atalarının çadırcılık yapmaları yüzünden aldığı söylenir.

Ömer Hayyam, zamanında daha çok bilgin olarak ün kazandı. İran'ın, Selçuklular yönetiminde olduğu bir çağda yetişen Hayyam, Horasan ülkesindeki büyük şehirleri, Belh, Buhara ve Merv gibi bilim merkezlerini gezdi, birara Bağdat'a da gitti. Zamanının hükümdarlarından, özellikle selçuklu sultanı Melikşak ve Karahanlılardan Şemsülmülk'ten büyük yakınlık gördü. Saraylarında, meclislerinde bulundu. Reşidüddin'in "Cami-üt-Tevarih" adlı eserinde anlattığına göre Nizamülmülk ve Hasan Sabbah, Ömer Hayyam ile okul arkadaşıydılar.
Gerek Hayyam'ın zamanında, gerek sonarki çağlarda yazılan kaynaklarda çağının bütün bilgilerini edindiği, o alanlarda derin tartışmalara girdiği, fıkıh, ilahiyat, kıraat, edebiyat, tarih, fizik ve astronomi okuttuğu yazılıdır. Ebu'l Hasan Ali El-Beyhaki onun çok bilgili bir kimse olduğunu, fakat müderrislik hayatının pek başarılı olmadığını bildirir. Ayrıca Zemahşeri ile uzun boylu tartışmalara giriştiğini, onun derslerine bile devam ettiğini, Zemahşeri'yi, bilgi bakımından beğendiğini yazar.</P>
<ul id="targets">
<li id="twitter"><a href="http://twitter.com"><!-- --></a></li>
<li id="delicious"><a href="http://delicious.com"><!-- --></a></li>
<li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li>
</ul>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {

//cache selector
var images = $("#content img"),
title = $("title").text() || document.title;

//make images draggable
images.draggable({
//create draggable helper
helper: function() {
return $("<div>").attr("id", "helper").html("<span>" + title + "</span><img id='thumb' src='" + $(this).attr("src") + "'>").appendTo("body");
},
cursor: "pointer",
cursorAt: { left: -10, top: 20 },
zIndex: 99999,
//show overlay and targets
start: function() {
$("<div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
$("#tip").remove();
$(this).unbind("mouseenter");
$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
},
//remove targets and overlay
stop: function() {
$("#targets").slideUp();
$(".share", "#targets").remove();
$("#overlay").remove();
$(this).bind("mouseenter", createTip);
}
});

//make targets droppable
$("#targets li").droppable({
tolerance: "pointer",
//show info when over target
over: function() {
$(".share", "#targets").remove();
$("<span>").addClass("share").text("Share on " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
},
drop: function() {
var id = $(this).attr("id"),
currentUrl = window.location.href,
baseUrl = $(this).find("a").attr("href");

if (id.indexOf("twitter") != -1) {
window.location.href = baseUrl + "/home?status=" + title + ": " + currentUrl;
} else if (id.indexOf("delicious") != -1) {
window.location.href = baseUrl + "/save?url=" + currentUrl + "&amp;amp;amp;amp;title=" + title;
} else if (id.indexOf("facebook") != -1) {
window.location.href = baseUrl + "/sharer.php?u=" + currentUrl + "&amp;amp;amp;amp;t=" + title;
}
}
});

var createTip = function(e) {
//create tool tip if it doesn't exist
($("#tip").length === 0) ? $("<div>").html("<span>Drag this image to share the page<\/span><span class='arrow'><\/span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
};

images.bind("mouseenter", createTip);

images.mousemove(function(e) {

//move tooltip
$("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
});

images.mouseleave(function() {

//remove tooltip
$("#tip").remove();
});
});
</script>
</body>
</html>

 

Uygulama dosyalarını arşiv halinde indirmek için tıklayınız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir