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.)
Related
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/
I need to move image that is being created when I hover on thumb while moving mouse over that thumb. How can I do this?
I have function like this (it is working):
var body = $('body'),
slike = $('.oglas_slika');
function image_hover(url){
var image = '<img class="oglas_slika_velika" src="' + url +'">';
return image;
}
slike.hover(
function(e){
body.append( image_hover( $(this).data('url') ) );
$(".oglas_slika_velika")
.css("top", (e.pageY) + "px")
.css("left", (e.pageX) + "px")
.fadeIn("slow");
},
function(){
body.find('.oglas_slika_velika').remove();
}
);
I tried this one but I am getting flickering (image is appearing at random places on the page while moving mouse ):
var body = $('body'),
slike = $('.oglas_slika');
function image_hover(url){
var image = '<img class="oglas_slika_velika" src="' + url +'">';
return image;
}
slike.hover(
function(){
body.append( image_hover( $(this).data('url') ) );
$(this).on('mousemove', function(e){
$(".oglas_slika_velika")
.css("top", (e.pageY) + "px")
.css("left", (e.pageX) + "px")
.fadeIn("slow");
return false;
});
},
function(){
body.find('.oglas_slika_velika').remove();
}
);
jsFiddle Demo
The flickering is a result of the element created causing the mouseout section of hover to be called. This is removing the image element, and once the element is removed, the mouseover section of hover is called, and the image is recreated, along with the call to fadeIn. The animation queue is overloaded in the process and eventually throws an error (Uncaught RangeError: Maximum call stack size exceeded) which will cause extremely inconsistent results.
The remedy this, you should keep track of where the mouseover area is with an object:
var sp = {};
sp.top = slike.position().top;
sp.left = slike.position().left;
sp.right = sp.left + slike.width();
sp.bottom = sp.top + slike.height();
and also keep track of the image sizes:
var w;
var h;
which could be filled once appended
body.append( image_hover( ) );
w = $(".oglas_slika_velika").width();
h = $(".oglas_slika_velika").height();
Next would be to ensure that the mouse cursor was truly mousing out of the hover region by checking the collision between the created image and the cursor
if( e.pageY + h > sp.bottom || e.pageY - h < sp.top){
body.find('.oglas_slika_velika').remove();
}else{
if( e.pageX + w > sp.right || e.pageX - w < sp.left ){
body.find('.oglas_slika_velika').remove();
}
}
Although this takes slightly more work, it is also a lot more precise and less prone to error. It will allow the image to directly track the mouse instead of being pushed to an offset.
If it is not important to have the image directly at the place of the mouse, then
#Luigi De Rosa's answer will work very well and require less effort.
Try to add 10px of "margin" in this way
.css("top", (e.pageY)+10 + "px")
.css("left", (e.pageX)+10 + "px")
The problem is that if you go with the mouse to bottom right, your mouse goes on .oglas_slika_velika and it trigger out .oglas_slika (so the remove function)
I hope that it makes a sense for you
jsFiddle here: http://jsfiddle.net/bzGTQ/
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.
Can anyone tell me why this wouldn't work on Safari?
// Set the height of the iFrame
var avail = document.parentWindow.screen.availHeight;
var screenTop = document.parentWindow.screenTop;
var divHeight = $('.header').css('height').replace('px','');
var divTop = $('.header').position().top;
alert('avail: ' + avail + '\nscreenTop: ' + screenTop + '\ndivHeight: ' + divHeight + '\ndivTop: ' + divTop);
$('#viewerFrame').css('height', (avail - screenTop - divTop - divHeight - 94) + 'px');
In IE, it works exactly as I want (which means it sizes the iFrame to take up all of the screen that's left after I take into account the size of the window, the header, and so forth...). Why doesn't it work in Safari?
document.parentWindow is IE-only.
You may use top or parent instead
I have a popup system that shows a image when you hover over a link. Instead I need the popup to be activated when you hover over <label>
popup.js
/*
* Url preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 130;
yOffset = 60;
// 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='image loading...' />"+ 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();
});
Here is the html that activate the popup
HTML:
<a style="" class="screenshot" rel="images/0.jpg" title="blablabla">blablabla</a>
I tried:
<label for="0" class="screenshot" rel="images/0.jpg" title="blablabla">blablabla</label>and changed to this in the js $("label.screenshot").hover, but I only get image loading and no image..
The issue you are having, is that since this.rel is accessing the dom property rel which is a properly of a a tag but not a property of a label.
Change your code to $(this).attr('rel'), so it will pickup the attribute.
$("body").append("<p id='screenshot'><img src='"+ $(this).attr('rel') ...