How do I make a hover object stay on screen?

I have a CSS image gallery, and am struggling to finish it off (I originally intended to find a js example but couldn't find what I wanted despite extensive trawling).
Hovering over the thumbs brings up the large image as required, but I need the image to then stay on screen until the user hovers over another thumb. I'm pretty sure this is possible, but can't work out how to do it.
Here's the link: http://www.stereosociety.com/lenegallery1979-2006.shtml
Any help would be much appreciated!

Start over with Fancybox. It's very simple to implement. See code below for a working example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
body {
    background: silver;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#wrapper {
    width: 90%;
    margin: 0 auto;
    background: #FFF;
    overflow: hidden;
/**left sidebar**/
aside {
    float: left;
    width: 25%;
    border-right: 1px dotted #999;
    min-height: 400px;
    padding: 2%
/**this styles image container**/
#thumbs {
    float: left;
    width: 75%
#thumbs li {
    list-style: none;
    float: left;
    width: 160px;
    margin: 10px 1% 0 1%; /**space between containers**/
/**recommend using same size images**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: ".";
    clear: left;
    font-size: 0px;
    line-height: 0;
    display: block;
    visibility: hidden;
</style>
</head>
<body>
<div id="wrapper">
<aside> Left Sidebar </aside>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Image Viewer</h1>

<ul id="thumbs">
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
</ul>

</div>


<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
</script>
</body>
</html>
That's all there is to it.
Nancy O.

Similar Messages

How do I make the weather Icon stay local

My weather icon is from another area - How do I make it local and stay local.

Settings > Privacy > Location Services > ON, Weather > ON

How can i make my google calendars stay on my computer so that i dont have to use google calendars anymore? i want to just use the cloud

How can i make my google calendars stay on my computer so that i dont have to use google calendars anymore? i want to just use the cloud

Welcome to Apple Support Communities
All iWork apps allow you to save your documents on your computer. You will be able to choose the destination when you want to save a document.
You can also disable iCloud for some apps. To do that, go to System Preferences -> iCloud, press "Options" next to "iCloud Drive" and disable the apps you want to.
If you have lost your old documents, you should have a backup that you made before upgrading to OS X Yosemite, so you only have to restore it.

How can I make a gray box or gray screen in Pages over a few lines of text?

How can I make a gray box or gray screen in Pages over a few lines of text?

Thanks. Almost what I was looking for.
While that makes for a gray over the lines, it still does not form a box.
Any other suggestions to form a solid rectangular gray box?

How do we make Facebook games (Cityville) show full screen on ipad?

How do we make Facebook games (CItyville) show full screen on ipad?

> Is there a way that I can change something to make the
window with the
> three
> business portraits open to full screen when you click on
the Gallery
> button?
No. Modern browsers are designed to protect users from that
kind of
manipulation. Typically, web users don't want their browsers
windows
manipulated.
Walt
"Bill Artman" <[email protected]> wrote in
message
news:gihqrl$gnq$[email protected]..
> I am using Dreamweaver MX 2004 with Windows XP.
>
> My question is a page from my homepage
www.artmanphoto.com > Portfolio >
> Business Portraits then click on the Gallery button.
When my web designer
> built my site there was only two business portraits and
when you clicked
> on the
> Gallery button the window was smaller and did not expand
to a full screen
> display. Tonight I added a third portrait and the window
is still smaller
> than
> the full screen display so you have to use the
horizontal scroll bar to
> view
> all three images or you can click on the Expand button
in the upper right
> corner of the screen to make the window display full
screen. I thought
> that
> when I added the third portrait the and it was displayed
on my website
> that the
> window would expand to show all three portraits but it
didn't.
>
> Is there a way that I can change something to make the
window with the
> three
> business portraits open to full screen when you click on
the Gallery
> button?
>
> Thanks very much for your help!
>
>
>

With the new iOS7 how can I make the picture on my lock screen smaller or is this a glitch with the new iOS7?

With the new iOS7 how can I make the picture on my lock screen smaller or is this a glitch with the new iOS7?
I got the 5s and everytime I try and change the picture on my lock screen the picture is 10x way to big. I try and resize it and make it smaller but it will nto get smaller.
How can I fix this?

See Empty/corrupt iTunes library after upgrade/crash.
tt2

The font in the URL address line is too small. How do I make it bigger? My computer screen is already set for maximum size.

# Question
Since Firefox last updated to a new version, the font in the URL address line is too small. How do I make it bigger? My computer screen is already set for maximum size.

See http://kb.mozillazine.org/Editing_configuration#How_to_edit_configuration_files
Add code to [http://kb.mozillazine.org/UserChrome.css userChrome.css] below the @namespace line.
<pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#urlbar .textbox-input-box {font-size:13pt !important;}
#searchbar .textbox-input-box {font-size:13pt !important;}
#FindToolbar .textbox-input-box {font-size:13pt !important;}
</nowiki></pre>

Make click box feedback stay on screen

How do I make the feedback for a clickbox stay on screen till the learner moves on? I see where I can designate a specific number of seconds for it to stay on screen, but I just want it to stay on the screen indefinitely till the learner moves on...so, for the rest of the slide, basically.

In that case you will need to add either a Text Caption or a Smart Shape with the feedback text you want and configure it as hidden. Then create an Advanced Action that will make it visible.
Cheers... Rick

How do I make PDFs OPEN and fit my screen?

Every time I open a PDF, the document opens larger than my screen. How do I make the document fit the screen I have?
This is absolutely NOT a zoom problem.
I have a 15 inch laptop. It has a screen that is about 12 inches wide x 7.5 inches high.
I open a PDF, and the document opens on my screen so that the entire document is more like 13 inches wide, and 10 inches high. The top menu bar, where I would grab to move, change zoom, enlarge, or, for that matter, CLOSE the document is like 2-2.5 inches OFF the TOP of my screen.
I can change zoom - it only changes the size of the contents in the window, never the actual window size, and the problem is the window size.
So the question is, why does PDF even open a window larger than my screen supports, and how do I stop it.
This is not new - this should by now be a known serious flaw with Adobe Reader and Acrobat and regularly happens with PDFs, and has for years. If I have a second monitor, I can drag the side of the window over onto my second monitor, and then shrink it. But, if I am traveling, so without my second monitor, it effectively means the only thing I can do with any PDF is right click on the bottom menu bar and "Close all windows"
Windows XP, Windows 7, Windows 8.

Try clicking the arrows top right corner of your Safari window or Control + Command + F on your keyboard.

How do I compensate for display objects jumping when screen scaling

I am building an application that is to run at 2 difference stage sizes. 960x640 and 1024x768 (for those paying attention, you may note that those are the high res settings for the iPhone and iPad2)
The app was designed and build to run on a stage of 960x640 and when running at this size, there are no problems.
When the app loads in the 1024x768 window, it "strechs" the stage to fill the window, but keeps the aspect ratio. Everything looks good and the application runs without any problems expect for one thing.
Sometimes, display objects on the stage "jitter" when moving or animating. I have discovered that this is because the stage is "scaling" the x and y values, and is not pixel snapping the objects on the screen, even though the x and y values of the display object are indeed whole numbers.
A prime example of this is I have 2 bitmapData images. bmData_s and bmData_h.
bmData_s is 192x388 in size.
bmData_h is created from a copy of bmData_s with a glow filter stroke on it, resulting in a image that is 198x394 (6 pixels bigger due to a 3 pixel stroke)
I place it on the screen using the following code:
(Background is a bitmap object that is 960x480 and places at 0,0)
(ObjOffset is a point in my app data to position the object, it's a point set to 53,195)
MyObj.x = Background.x + ObjOffset.x + (bmData_s.width/2);
MyObj.y = Background.y + ObjOffset.y + (bmData_s.height/2);
now, when the mouse rolls over the object, I have an event listener to change MyObj.bitmapData to bmData_h
MyObj.bitmapData = bmData_h;
MyObj.x = Background.x + ObjOffset.x + Math.floor(bmData_h.width/2);
MyObj.y = Background.y + ObjOffset.y + Math.floor(bmData_h.height/2);
and back to the _s image on mouse out.
Now, when the app runs on the iPhone which is a 960x640 screen size, or on the PC which is using a window of similiar size, the image doesn't appear to move at all... the "stroke" appears and disappears exactly as it is suppose to
However, when I run it in a window that is 1024x768, the _h image appears to "jump" one pixel up.
I have encountered many other similiar things that only occure when the stage is scaled. There is a spot in the app where I am animating a bitmap by manipulating it's scrollrect x and width (have it's do a wipe in from right to left like a peice of paper unrolling on a table) and due to the scaling, the right edge of the image jumps left and right 1 pixel... but on 960x640 screens, it looks perfect.
Does anyone know how I can compensate for this effect so that this jumping doesn't occur when the stage is stretched to fit the window it's running in?

Sounds like a x-browser rendering problem
my guess would be to scale down the inner div's so they add up to less than 100%.
If you floated div's and gave them a %, give one of the div's a smaller.
ie: 2 divs floated in a Header, give one 50% and the other 49.5%

Captivate 6.0 - I want to make a rollover shape stay on screen if user wants it to

I have used smart shapes as rollover popups. However, I'd like to give the user the option to select a shape or more to stay on screen, by probably clicking on it. The purpose is to give user the ability to compare the content of selected smart shapes, thus viewing both or more on the screen at the same time.
Any ideas or does anyone know of any widget that could do this, please?

Instead of using a rollover you could try adding a button which, when clicked shows the text box. You set this up by inserting a button (you can make it transparent if necessary). Under Action in the properties panel choose On Success: Show and then select the appropriate text box.

Want to play WOW-how do i make the browser windows fill whole screen??

Have been a pc user all my life and just got a MacBook Pro. When i used to connect to the internet the browser window would fill the whole screen. This may seem like a stupid question but how do i make this happen on the mac? And to do the same for things like iMovie maker etc. My son says world of warcraft needs to be played on the whole screen and not just in a small box.
Have tried adjusting the display etc but that makes things look distorted. Is there another way? Help!
Thanks to anyone who helps!

Press Cmd+M if you want to play it in full screen mode. If you want a bigger window for windowed mode just drag the little thngy at the bottom right of your WoW window and you will be able to resize it. Hope this helps

How do I make the DVD player play full screen in my external monitor instead of my laptop?

I just upgraded to Lion, and I have my laptop screen and my external monitor, and every time I tell my computer to play a DVD in full screen, it makes the full screen slide over from my giant external montior to my tiny laptop screen. How do I make it not do this? I would like to be able to watch my DVDs on the larger high-res monitor instead of my tiny laptop screen, but I can't seem to find the right preferences window or something.

With DVD player open, have you check the menu bar > Window > Show/Hide Controller?

How do you make a folder on my home screen? It doesn't seem to be liking the simply drag. Why?

I have tried to make a folder on my home screen the way everyone is saying I should but it just isn't working. I don't see what I am doing wrong. Is there a button I have to push to make it happen? Thanks so much.

Just hold down on one icon until they all start to wiggle, then drag two on top of each other. If the app you're trying to folderize doesn't work, try a different one. Some of them will not easily go into a folder on their own. (for example, if you want to tuck newsstand into a folder, you have to use two other app icons to make the folder then quickly drag newsstand into that folder)

How do I make multiple different objects look like they belong in another environment?

For example, photos of city buildings put onto a green field. The colors do not match and the lighting is all wrong, im sorry if this is a really basic question to ask but please help, thanks!

This is an example. I would like to make the color scheme a greenish post apocalyptic color. I'm not too sure how.

How do I make a hover object stay on screen?

Similar Messages

Maybe you are looking for