About the example:
When a user hovers over a link, sneak preview of the link pops up. And when user hovers over a thumbnail, original size image pops up.
Link preview has been implemented through Ajax.load() function, where data for the link is loaded from one of the older posts. To know more about Ajax.load() function checkout
jQuery: By examples - Load data through Ajax
Demo:
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE> Preview Link </TITLE>
</HEAD>
<BODY>
<div id="preview_container">
<a id="preview_link" href="#" onclick="return false;">Preview Post - Introduction</a>
<a id="preview_image" href="#" onclick="return false;"><img class='preview_slice' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31rTCmKOFK8ZWN3TJXlcTZbS5QxUoxUowShvmxxW6Vn8qFFragyKT64oCshBTsk0HoWHGlbzfj9YHroREaEDy-uL3NuHqsEHf_wIHIzheqiVBIPjWE_mPP1n1viDMbQXLOZjMKSo3SxQ/s200/P1080602.JPG" ></a>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#preview_sub_container{
position: absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #bfbfbf;
height: 100px;
width: 500px;
}
#preview_container a img{
border: none;
}
#preview_hover_image{
position: absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #bfbfbf;
}
.preview_slice{
height: 50px;
width: 50px;
}
</style>
<script type="text/javascript">
$(function(){
var page_offset = 20;
$("#preview_container a#preview_link").hover(function(event){
$('<div id="preview_sub_container" />').load('http://myerrorslog.blogspot.com/2006/12/introduction.html div[class="post-body entry-content"]',
function(){
$(this)
.css('top', event.pageY + page_offset)
.css('left', event.pageX + page_offset)
.appendTo("#preview_container")
})
},
function(){
$("#preview_sub_container").remove()
});
$("#preview_container a#preview_image").hover(function(event){
var href = $(this).children('img').attr('src');
$('<img id="preview_hover_image" src="'+ href +'" />')
.css('top', event.pageY + page_offset)
.css('left', event.pageX + page_offset)
.appendTo("#preview_container")
},
function(){
$("#preview_hover_image").remove()
});
$("#preview_container a").mousemove(function(event){
var object = "#preview_hover_image";
if($(this).attr('id') == "preview_link"){
object = "#preview_sub_container"
}
$(object)
.css('top', event.pageY + page_offset)
.css('left', event.pageX + page_offset)
});
});
</script>
</BODY>
</HTML>
Posts
No comments:
Post a Comment