Develop Reference

Image preview on hover direction aware?

I need some help :)
Working on a portfolio website with an image preview when you hover over a portfolio title. Whenever I hover over de last few titles at the bottom of the page, there are some ugly glitches/bounces: the image escapes the bounds of the webpage. Is there a way to make it direction aware, so that when you hover over the last few titles the image preview shows up above the title instead of below?
The HTML:
<ul class="project-list">
<li>
Title Here
</li>
</ul>
The CSS:
#preview {
position: absolute;
display: none;
max-width: 50rem;
height: auto;
}
The JS:
$(document).ready(function(){
imagePreview();
});
// Configuration of the x and y offsets
this.imagePreview = function(){
xOffset = -30;
yOffset = 40;
var imgHeight = 0;
var distFromTop = 0;
var mainImgTop = $(".preview").position();
$(".preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img style='display:block;' src='"+ this.rel +"' alt='Image prev' />");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$(".preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Here is a JSFiddle: https://jsfiddle.net/spacebot/b7h46cfh/

If you just want to show the image above the last X amount of titles, you can use :nth-last-child(-n+X) (where X is the amount of titles).
Check if the title is one of the last titles and run another animation to show the image above.
//If link is one of the last 3 childs, open above
if($(this).is(':nth-last-child(-n+3)')){
openAbove();
}
JSFiddle example:
https://jsfiddle.net/447pjobL/8/

image preview on icon mouseover

I'm attempting to use Jquery and Javascript so when a client mouseovers a generic icon used on a PageGridView it will display the thumbnail image slightly offset from the icon.
I'm borrowing the code I found on Techrepublic.
CSS Being used:
<style type="text/css">
#Fullimg{position:absolute;display:none;z-index:-1}
#preview{
position:absolute;
border:3px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
}
pre{
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-weight:normal;
padding:7px;
border:3px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
</style>
Javascript:
<script type="text/javascript" language="javascript">
// Kick off the jQuery with the document ready function on page load
$(document).ready(function(){
imagePreview();
});
// Configuration of the x and y offsets
this.imagePreview = function(){
xOffset = -20;
yOffset = 40;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.link +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
</script>
Icon:
<asp:Image ID="imgThumbnail" runat="server" ImageURL="~/Images/imgHover.png" ImageAlign="AbsMiddle" ClientIDMode="Static" CssClass="preview" link='<%# String.Format("~/ConvertImage.ashx?FleetID=" + m_oUserInfo.CurrentFleetID + "&VehicleID={0}&picID={1}&picType=PictureThumb&extention={2}", Eval("VehicleID"), Eval("StoredPictureID"), Eval("PictureExtension"))%>'/>
The code does absolutely nothing oddly, despite even trying to make it work in a fiddle. I've been beating my head against the wall on this for almost a week and the boss is starting to get annoyed that I can't get it working.
Any help or a more code efficient means of doing this would be greatly appreciated.

I corrected some basic part in the code. Here is the link:http://fiddle.jshell.net/bpVUk/2/
You can modify now as per your needs.
Code:
// Kick off the jQuery with the document ready function on page load
$(document).ready(function () {
var xOffset = -20;
var yOffset = 40;
$('.preview').on('mouseover', function (e) {
var img = $(this);
img.t = img.title;
img.title = "";
var c = (img.t != "") ? "<br/>" + img.t : "";
$("body").append("<p id='preview'><img src='" + img.attr('link') + "' alt='Image preview' />" + c + "</p>");
$("#preview").css({
"top": (e.pageY - xOffset) + "px",
"left": (e.pageX + yOffset) + "px",
'display': 'block',
});
});
$('.preview').on('mouseleave', function (e) {
$('#preview').remove();
})
});

Cropping an image with a preview using jcrop

I'm using jcrop and trying to make a "live" preview of the cropped area on an image.
The movement of the selected area works perfectly if the "Crop Selection" area is the same height and width as the destination preview div.
Check out the issue here: http://jsfiddle.net/fbaAW/
function showCoords(c)
{
var $this = this.ui.holder;
var original = $this.prev();
var preview = original.parent().find(".image");
var oH = original.height();
var oW = original.width();
var pH = preview.height();
var pW = preview.width();
var sH = c.h;
var sW = c.w;
var differenceH = pH - sH;
var differenceW = pW - sW;
//preview.css('width', c.w);
//preview.css('height', c.h);
//preview.css("background-size", Math.round(oW + differenceW) + "px" + " " + Math.round(oH + differenceH) + "px");
preview.css("background-position", Math.round(c.x) * -1 + "px" + " " + Math.round(c.y) * -1 + "px");
}
As you can see, I've commented out a few of my tests and attempts at getting this code to work properly but I just can't wrap my head around the relationship between the position and the size background properties in order to get this effect to work correctly.

Calculate the horizontal and vertical ratios between the selection size and the preview area size:
var rW = pW / c.w;
var rH = pH / c.h;
Then apply them to the background-size and background-position:
preview.css("background-size", (oW*rW) + "px" + " " + (oH*rH) + "px");
preview.css("background-position", rW * Math.round(c.x) * -1 + "px" + " " + rH * Math.round(c.y) * -1 + "px");
http://jsfiddle.net/fbaAW/1/
So, if the preview size is, say, 3 times the size of your jCrop selection area, it means you have scale the original image by 3, and compensate for the scaling when defining the background position.

Tooltip viewport validation

Want the code to validate if the popup is actually in the viewport or not.
somethinglike if (screenshotWidth + screenshotX > window.innerWidth) { // do stuff } and then same for height, but that's as far as i know.
thanks.
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});

Jquery Image preview plugin

I`m using this "plugin" found on web to preview some images in a php/linux website.
<script type="text/javascript">
function pimg()
{
this.xOffset = 5;
this.yOffset = 50;
$("a.pimg").hover(function (e)
{
this.img_title = this.title;
this.title = "";
var img_src = $(this).attr('img_src');
var desc = (this.img_title != "") ? "<h3>" + this.img_title + "</h3>" : "";
var image = (img_src) ? img_src : this.src;
$("body").append("<div id='pimg'><img src='" + image + "' alt='Image preview' />" + desc + "</div>");
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
$("#pimg").fadeIn(700);
}, function ()
{
this.title = this.img_title;
$("#pimg").remove();
});
$("a.pimg").mousemove(function (e)
{
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});
};
$(document).ready(function($){
pimg();
})
</script>
<div class="images">
View Testimonial
</div>
What I want is to make the image preview to appear inside the visible browser window and not create new space for it ( in cases like the link is in the right bottom of the browser window ). I know I have to play with the positioning, but how can do it dinamically so that the image will appear only in the current viewable content of the browser window.
Thanks!

Your code is fine. You just need to add this to your CSS styles (DEMO)
#pimg{position:absolute;display:none;}
Aside from that, you'll just need to modify this code to the correct x/y coordinates you desire.
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");

Take a look at this updated fiddle: http://jsfiddle.net/Wp6bG/1/
In the example (modifed based on Dutchie432's original fiddle), if you resize the width of the screen, the preview will switch from right to left if the preview goes offscreen. You can modify the code to handle all other screen edges (top/left/bottom.)