Jquery: Screenshot Preview (Url bağlantısında site görünümü gösterme)

Sistemlerimizde yer alan linkler linklerin açıklamalarını yazı şeklinde yapabildiğimiz gibi Screenshot (Ekran Resmi) şeklindede yapabiliriz. Bu sayede kullanıcıların daha iyi bilgilendirilmesini sağlayabiliriz.Örneğimizde jquery ile screenshot önizlemesi yapıyoruz.


index.html kodlarımız


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Screenshot Önizleme</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}

h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
</head>
<body>
<h1>jQuery Screenshot Önizleme</h1>
<p>Aykut Dilmen'in Kişisel Sitesi <a href="http://www.dilmen.net" target="_blank" rel="cssg_screenshot2.jpg" title="Aykut Dilmen">Dilmen.Net</a></p>

<p>Atilla Akoğlu'nun Kişisel Sitesi <a href="http://www.cssglobe.com" target="_blank" rel="cssg_screenshot1.jpg">Serpito.Com</a> </p>
<p>Mülsüm Gümüşlüoğlu'nun Kişisel Sitesi <a href="http://www.gumusluoglu.com" target="_blank" rel="cssg_screenshot.jpg" title="Müslüm Gümüşlüoğlu">Gumusluoglu.Com</a></p>
</body>
</html>

 

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

3 thoughts on “Jquery: Screenshot Preview (Url bağlantısında site görünümü gösterme)

  • abim gerçekten ajax konusunu senin sayende kavradım çok teşekkür ederim..

  • demo sorunları gumusluoglu.com adresinin kapanmasından kaynaklanıyor. Müslüm en kısa zamanda konuyla ilgilenecektir. teşekkürler

Bir Cevap Yazın

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