mouse over magnifying glass

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Is there any css code for a mouse over magnifying glass,all the old threads are 4 to 5 years old and really no conclusion was arrived at then.
I have one for my shopping cart from ecwid now I want to do the same for my picture gallery on my yola home page
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes

Posted 3 years ago

  • 1
Photo of abettercommunity

abettercommunity

  • 9 Posts
  • 3 Reply Likes
:hover works on most elements.  Try something like this....

class.a:hover { cursor: -moz-zoom-in; cursor:-webkit-zoom-in; pointer: -moz-zoom-in; pointer: -webkit-zoom-in; }

Replace class with the name of your class in html and the a (a link) can be replaced with other tags (span, p, div, etc.).  Make sure the css matches with the html.  The purpose there is four options for cursor/pointer is cross-browser compatibility.

so...

CSS....
myHover.span:hover { cursor: -moz-zoom-in; cursor:-webkit-zoom-in; pointer: -moz-zoom-in; pointer: -webkit-zoom-in; }

HTML....
<span class="myHover">My Magnifying Glass Content</span>

Hope this helps
Photo of abettercommunity

abettercommunity

  • 9 Posts
  • 3 Reply Likes
Also, you can get a better magnifying glass on a website such as iconfinder.com, upload it to Yola, and you can use an image as your pointer...

CSS....
myHover.span:hover { cursor: url(/images/myCursor.png), auto; }
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Peter,

A very smart Magnifying glass for images

HTML

<div class="magnify">

<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>

<!-- This is the small image -->
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg"; width="200"/>

</div>

<!-- Load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js"; type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->

<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"; type="text/javascript"></script>



CSS

/*Some CSS*/* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}

/*Lets create the magnifying glass*/
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;


/*Multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
0 0 7px 7px rgba(0, 0, 0, 0.25), 
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

/*Lets load up the large image first*/
background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;

/*hide the glass by default*/
display: none;
}

/*To solve overlap bug at the edges during magnification*/
.small { display: block; }



.js

$(document).ready(function(){
var native_width = 0;
var native_height = 0;

//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will 
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the 
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");

//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before 
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the 
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;

//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the 
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";

//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the 
//mouse coordinates to place it with its center at the mouse coordinates

//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
The current script opens an external url from the main menu
Photo of abettercommunity

abettercommunity

  • 9 Posts
  • 3 Reply Likes
Is this a link you have access to the html of?  To open a link in a separate window...

<a href="myLinkUrl.com" target="_blank">Vancover Art</a> or is it in the above javascript and I overlooked it?

The... target="_blank" ... is what would tell a link to open in a separate window.
Photo of abettercommunity

abettercommunity

  • 9 Posts
  • 3 Reply Likes
And on an unrelated note, some will say having a link open in a separate window in anyway you write the code to do it is bad for Search Engine Optimization.  Perhaps the best way is to tell your visitors to open in separate window hold control plus click...

<a href="myLinkUrl.com" title="Hold control while clicking to open in separate window">Vancover Art</a>
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
This is the code I was given to redirect a main menu external link.
Here's what you need to do:
1.    Create a new page with the name of the site you want to link to.
2.    Drag and drop a HTML Widget onto your page.
3.    Copy and paste the code below, into the HTML Editor:

<script type='text/javascript'>if(!window.top.Yola){window.location='http://www.petesartshack.com'};</script>;
Have tried inserting target="_blank" but it does not work
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
You are right I have read that also. Maybe I will create a link back from the site I am directing them to as a back up, or create a text link where I can set it to open in a separate window.
Thanks for your help, it is really appreciated.
Peter
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Thank you so much that works perfectly.
Peter