?
Solved

Static thumbnail popup on mouseover

Posted on 2012-08-23
7
Medium Priority
?
653 Views
Last Modified: 2012-08-23
Hi Experts,

I have a page of thumbnail images generally 8 x 5 (sometimes more) and I wish to see a larger version of the image when I put the cursor over the thumbnail (mouseover).

Quite a simple task in itself which I have achieved, however there are a couple of conditions that I still wish to be applied to the the popped up image and these are as follows:-

1. Popped up image to be static - currently as the mouse is moves the popped up image moves with it.

2. Page awareness - if the thumbnail is on the far right currently the thumbnail pops up  to the right of the mouse cursor and is lost off the page, ideally wish this top popup to the other of the mouse when too close to a page edge.

3. Not a light box - I know I could preview the image using a light-box but in this instance it isn't what I'm trying to achieve. I wish to move my mouse over the many thumbnails and if I hold the mouse over the thumbnail a larger preview of the image pops up in the vicinity of the thumbnail and when i move my mouse off the thumbnail it disappears.

I appreciate any help or suggestions of a jquery code/plugin, css, or php solution to this little problem.

Regards
Steve
0
Comment
Question by:fusioninternet
  • 3
  • 3
7 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 38324703
Just use mathemathics.

Now you surely place your image on the mouse position, that you detects on the onMouseOver event.

What you can do is to use the thumbnail position to show the image, this way you get independence from the mouse movement and your large image won't move.

If your thumbnail image x position + it's with + your large image width > your page width then
you'll want to position your image on the left side of the thumbnail and if your thumbnail image x position - your large image width < 0 then you'll want to position your image on the right side of your thumbnail.

The same calculation can be made for top / bottom positioning.

With few mathematical calculation you can determine the exact point where you want the large image to load and make it load always inside the screen.
0
 
LVL 1

Author Comment

by:fusioninternet
ID: 38324825
Hi Bardobrave,

Yes i agree I could use maths in the ways you have suggested, but I have got to admit I'm looking for a more ready made solution such as a nice jQuery plugin, css option or javascript.

cheers
Steve
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38324941
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 1

Author Comment

by:fusioninternet
ID: 38325146
Yes, JulianH pretty much like that.

I noticed if I make the page width smaller the images on the edges run off the edge, but in the short term this wouldn't matter.
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38325338
That is a pure css solution - so it will have issues near the page boundary if the container extends that far.

To do what you want would require adding some javascript - but the essence of that is as follows.
Just add four images 1.jpg, ,2.jpg, ,3.jpg, 4.jpg into an images/gallery folder and then open this file.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#select').keypress(function() {
    $.post('http://mrcp4/test2.asp', {term: $('#select').val()}, function(data) {
      $('#result').html(data);
    }, 'json');
  });
});
</script>
<style type="text/css">
div.gallery 
{
  position: relative; 
  margin: 20px 0 0 20px;
  z-index: 100;
}
div.gallery-image
{
  display: inline;
  float: left;
  margin: 10px;  
  width: 130px;
  height: 100px;
}
div.gallery-image img
{
  padding: 5px;
  border: 1px solid white;
  z-index: 110;  
}
div.gallery-image a:hover img
{
  position: absolute;
  margin-top: -48px;
  margin-left: -65px;
  width: 250px;
  padding: 5px;
  background: #000;
  border: 2px solid #a9a7ac;
  display: inline;
  z-index: 120;
}
</style>
</head>
<body>
<div class="gallery">
  <div class="gallery-image">
    <a href="images/gallery/1.jpg"><img width="120" src="images/gallery/1.jpg" /></a>
  </div>
  <div class="gallery-image">
    <a href="images/gallery/2.jpg"><img width="120" src="images/gallery/2.jpg" /></a>
  </div>
  <div class="gallery-image">
    <a href="images/gallery/3.jpg"><img width="120" src="images/gallery/3.jpg" /></a>
  </div>
  <div class="gallery-image">
    <a href="images/gallery/4.jpg"><img width="120" src="images/gallery/4.jpg" /></a>
  </div>
</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:fusioninternet
ID: 38325558
Thanks JulianH

That seems to be doing the business.

Just one last quick question, I think I'm right in that what the CSS is doing is enlarging the image when it is mouse is hovering on the img. If this is the case is there an easy way that I could add a heading/title to the image that only displays when in its enlarged state?

Cheers
Steve
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38325866
I suppose it is possible. You could make the solution work with div's instead of images and put the title in the div which is hidden under normal conditions and visible when the mouse hovers over it.

Have not tried it but I think it is doable
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question