Thumbnail to larger image rollover

In GoLive CS, now that I've learned how to do a regular rollover, I'm trying to do a rollover where a larger image appear (possibly with a brief caption) over or near a thumbnail image. I've searched other threads here about this with suggestions for Lightbox, etc. which I'll consider. But can this simply be done with GL alone? I tried it using the Rollovers and Actions palate but the larger image that appears over the thumbnail is no larger. Does Layers have something to do with a solution (never worked in Layers)? Perhaps there's a tutorial for this?

In article <[email protected]>,<br /> Wayneswhirld <[email protected]> wrote:<br /><br />> It might work for me even though it seems to leave out the option of a <br />> caption in the larger image<br /><br />You can do that, too, by assigning another GL action to the trigger: <br />Text Swap (ID).<br /><br />First you need to assign an ID to the element - e.g. <p> or <div> - that <br />contains your text. Then add the action to the trigger link and in the <br />Inspector enter the name of the ID and the text you want displayed when <br />the action is triggered.<br /><br />I have two samples here, one on click the other on hover:<br /><a href=http://www.simnet.is/klipklap/golive/swaptext/><br /><a href=http://www.simnet.is/klipklap/golive/swaptext/sample.html><br /><br />-- <br />Cheers Martin

Similar Messages

Web Gallery - need file name on thumbnail and large image

I think I have tried all the CS3 templates, but haven't found what our client is requesting. Is there a template that shows the file name on both the thumbnail and large image, and will make large images of 600-800 pixels (long dimension)?
Thanks in advance,
Dan Clark

Thanks for your reply Nini. Yes, I had gone through all the presets and options. Was hoping I might have missed something, or that someone knew a trick/workaround. We've been using Table-Minimal for years, which is my overall favorite. I like to ability to make a large image, but it can't do what the client is requesting. They've made a list of selects from some very large galleries (200-300 shots each), and now want to jump directly to the shots they've previously chosen, in order to show their coworkers. I've also considered "Add Numeric Links", but I find that either confuses people, or they give me that number, instead of the file name/number, which makes a lot of extra work for us.

Thumbnail to larger Image preview

Hello,
I am trying to create a photo gallery/portfolio. I would like
to have thumbnails and when clicked a larger version of that images
shows. After that I would like to rollover the larger image to show
the before.
Any ideas on how to scrip this?

ugh! the question is a bit generic... where to begin? :)
there are plenty of approaches to build a thumbnail based photo
gallery in flash. however, try to find some tutorials about this
because it would be really hard (and long) to explain it from zero
step by step in this forum. so, follow some tutorial and if you
have specific questions you are always welcome! ;)
adam

HELP! How do I link small thumbnail to larger image on same page?

hello, everyone! I'm working in dreamweaver cs4 and am having no luck!
see below - I'm trying to link the small thumbnails to the larger image on the left. in other words, when a thumbnail is chosen it's corresponding image would open on the left. I have tried mouse-over effects and image swap behaviors but still no luck. either the larger image replaces the thumbnail or a brand new window opens up with the larger image.
I want all effects to stay on the same page. any help would be greatly appreciated!

Hi There:
Not sure how you have designed your page but here is a simple sample code on how you can do this with javascript and on mouseover event:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#left {
display:none;
</style>
<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<div id="left" style="float:left;width:200px;"><img src="left.jpg" width="180" height="273" alt="large" /></div>
<div id="right" style="float:right;width:200px;"><img src="thumbnail.jpg" alt="small" style="cursor:pointer;" width="57" height="228" onmouseover="showImage('left');" onmouseout="hideImage('left');"/></div>
</body>
</html>
By default the bigger image is initally not there so I have added a display:none style in the head.
The above code will show the bigger image on left when you do a mouseover on the smaller left thumbnail image. Vice-versa when you move out the mouse the image goes away (you may not need this part). So on each thumbnail image simlarly pass the id of the image you want to show via the javascript showImage function.
Note: You can use onclick or other event per your preference.
Regards,
Vinay

Help needed trying make thumbnails from large Image Files

I posted this to the Flex message bored, too. I didn't notice
the Actionscript 3.0 until after. Sorry. Anyway, I have some
ActionScript 3.0 code, created with Flex that will load a large
JPEG image (say 3000x2000 pixels) that I'm trying to create a 100
pixel thumbnail. I have the code working where I generate the
thumbnail, but it's not maintaining the aspect ratio of the
original image. It's making it square, filling in white for the
part that doesn't fit.
I've tried just setting the height or width of the new
image, but that doesnt render well, either.
To see what I'm talking about, I made a screen shot, showing
the before image, and the rendered as thumbnail image:
Image of demo
app at Flickr.
Now, there's a few things important to note. I'm saving the
thumbnail off as a JPEG. As you can see in my sample application,
the original renders fine with the proper aspect ratio, it's when
I'm copying the bytes off the bitmapdata object, where I need to
specify a width and height, that the trouble starts. I've also
tried using .contentHeight and .contentWidth and some division to
manually specify a new bitmapdatasize, but these values seem to
always have NaN.
private function makeThumbnail():void{
// create a thumbnail of 100x100 pixels of a large file
// What I want to create is a a thumbnail with the longest
size of the aspect
// ratio to be 100 pixels.
var img:Image = new Image();
//Add this event listener because we cant copy the
BitmapData from an
/// image until it is loaded.
img.addEventListener(FlexEvent.UPDATE_COMPLETE,
imageLoaded);
img.width=100;
img.height=100;
img.scaleContent=true;
img.visible = true;
// This is the image we want to make a thumbnail of.
img.load("file:///C:/T5.jpg");
img.id = "testImage";
this.addChildAt(img, 0);
private function imageLoaded(event:Event):void
// Grab the bitmap image from the Input Image and
var bmd:BitmapData =
getBitmapDataFromUIComponent(UIComponent(event.target));
//Render the new thumbnail in the UI to see what it looks
theImage.source = new Bitmap(bmd); //new Bitmap(bmd);
public static function
getBitmapDataFromUIComponent(component:UIComponent):BitmapData
var bmd:BitmapData = new
BitmapData(component.width,component.height );
bmd.draw(component);
return bmd;
}

Hi Tod,
Take a look at this post:
I'll have to say the smoothing of the thumb is not perfect, but maybe in combination with your code.. you get good results.
Post a solution if you acheive better smooth thumb results.
Link to forum post:http://forums.adobe.com/message/260127#260127
Greets, Jacob

CS3 How to style larger image window that thumbnail links to

Hi,
Can anyone advise on how to format the larger image a thumbnail links to? When I click on the link created from the thumbnail, the larger image just comes up tucked in the top left corner. I am creating this gallery manually because I don't have Fireworks, only CS3, which Fireworks didn't come with.
Any helpful suggestions would be greatly appreciated.

Acrobat Pro

Thumbs with Large Image and Text/Links

Hi,
I am running some script on the link below to try and get a look of when you click a thumbnail the large image and text that goes with it changes with each different thumb. I am able to do that right now, but not to the affect that I want.
Ideally I would like all the text to be on the right hand side of the image with spacing and links, but I seem to only be able to get the text to show itself on the bottom of the picture right now. I think I need to approach it in a different way then I am currently. Any help would be greatly appreciated.
This is the page I am working on - http://mnkr.com/womens_stylepages/bigsur_TEST
Please let me know if I can offer up any other info.
Kandace

Sorry to keep replying to my own post, but I am trying to work on this in the meantime.
I am currently trying to get this to work through this forum - http://forums.adobe.com/message/4001227?tstart=0
This is what I have done so far and I think I am on on the right track?.
http://mnkr.com/womens_stylepages/bigsur_TEST2

HTML hovering over thumbnail to bring up larger image on top of it. How?

I am new to site and first question. So hope not too silly. I wish to have lots of small thumbnails on page and when mouse hovers over each individual thumbnail it will enlarge into a larger image - on top of the thumbnail mouse is over. Thanks to Nancy O answering Bravats question on this, I found the following HTML from Nancy, however..... am darned if I am able to have the image hover exactly over the thumbnail. Not to left, not to right, etc etc, but over top of thumbnail. Can someone please tell me what to put in where to make this happen? Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Disjointed Image Rollovers</title>
<style type="text/css">
/**BEGIN DISJOINTED IMAGE ROLLOVERS**/
#rollover a {
border:none;
text-decoration:none;
padding: 0 0.5em 0 0.5em; /**space between small icons**/
/**remove this rule if all full size images are to share the same display area. **/
#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust location of full size images**/
left: 50%;
top: 50%;
/**optional full size image captions**/
font-size: 12px;
line-height: 1.2;
color:#666;
text-align: center;
/**optional full size image borders, padding**/
border: 5px solid orange;
padding: 5px;
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {visibility:visible;}
#rollover a:hover, #rollover a:focus
{visibility:visible;}
/**END DISJOINTED ROLLOVERS**/
</style>
</head>
<body>

<div id="rollover">
<p>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #1</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="some description" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
</p>
</div>

</body>
</html>

Here is my Demo. http://alt-web.com/DEMOS/CSS-Disjointed-Image-Rollover.shtml
First, #rollover a needs to have position:relative.
Second, you will need to tweak left & top values to suit your needs.
#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust positioning of full size images in px or %**/
left: 0px;
top: -140px;
For better answers, we need a link to your page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Displaying a larger image from a thumbnail [was: Question]

I would like to display a larger image from a thumbnail inserted on the web page. I inserted a rollover image, used the thumbnail as the original and a larger and different jpeg image as the rollover image. However, when the mouse rolled over the thumbnail, the new rollover image (different then the original) was the same size as the original. Is there an easier way to display a larger image from a thumbnail? What am I doing wrong? Thanks
[Subject line edited for clarity by moderator]

Could you also provide a CSS solution to opening a non _self page that is the same size as the image displayed on the page.
Not possible with pure CSS. Sorry. Your best option is to use one of the jQuery Lightbox scripts mentioned below.
http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Trying to link a thumbnail in one frame to a larger image in another frame GOLIVE 9...

Hi.
I am using Adobe Golive 9.
I found a tutorial on the internet that allows you to create an image gallery with clickable thumbnails
http://www.tutorialhero.com/click-48179-create_an_image_gallery_with_clickable_thumbnails. php
However, the tutorial is designed for a page without frames.
I want to be able to do this using frames.
I want to link a thumbnail on a page in one frame to a larger image on another page, so that when your mouse is over the thumbnail,
the larger version appears in the other frame.
This is what my frames look like so you get an idea of what I'm trying to do
And here is a picture of the thumbnail in the lower frame and the larger image in the frame above it.
Could someone please give me STEP BY STEP instructions on how to do this? I'm new to Golive, using version GOLIVE 9, and I know this can be accomplished using "Set Image URL" but have no idea how to do it.
Thank you for your help all.
Chris.

A link in one frame is designed to call another page into some other frame, not an image. You can't use SetImageUrl across different pages. You'd probably have to put each of your large images on a page, and call each page each time. I'm not sure why you're so set on using frames, they have many disadvantages.

Creating thumbnail "tables" of artwork next to the larger image

I'm trying to figure out how this person created their site in iweb. Below is the link to their website.
http://www.adrianmills.co.uk/Illustrations.html
I'm new to the program, but would really appreciate any advice on how to achieve this look with the thumbnail images to the right of the larger images.
Thanks in advance.

It's a flash based slideshow. You can create a nearly identical one from iPhoto with the Flash Album Exporter plugin for iPhoto. The layout you would want to use is SimpleView. You can find it at VersionTracker.com.
OT

Thumbnail image links to larger image - how?

Mac OX 10.4.11 - GoLive CS(1) I want to create a series of thumbnail images that would act as link to a single large image area (see example http://www.markvelasquez.com/gallery.php?cid=1&pid=5 but ignore the dubious images). 10 or so different thumbnail images would show singularly in the large image area only, and only when activated by a click on a thumbnail.
I have used slide show (SlideShow.action) in the past but this does not allow for user randon choice, is there an action for this in GoLive.

Hi...
You didn't mention whether you wanted a free or commercial Action so have a look at CyberGallery 6.1 for GoLive at http://www.actionscafe.com/Features_Folder/CyberGallery/cgfeatures.html. The GoLive version doesn't have some of the later Dreamweaver features but will let you set up a thumbnails that expand into full size display images when they are clicked.

In iPhoto, my thumbnails show but larger images do not, why?

I am having trouble with some of my larger images not showing up in iPhoto. I click on "Faces" and go into pictures of my mom that I have tagged. I see all the thumbnail images of her, but when I click to view the images larger, it doesn't show the picture. It shouws a triangle with a !
I am running iPhoto '11 (version 9.2.1)
Please help me.
Thanks.

The ! turns up when iPhoto loses the connection between the thumbnail in the iPhoto Window and the file it represents.
Option 1
Back Up and try rebuild the library: hold down the command and option (or alt) keys while launching iPhoto. Use the resulting dialogue to rebuild. Choose to Rebuild iPhoto Library Database from automatic backup.
If that fails:
Option 2
Download iPhoto Library Manager and use its rebuild function. This will create a new library based on data in the albumdata.xml file. Not everything will be brought over - no slideshows, books or calendars, for instance - but it should get all your albums and keywords back.
Because this process creates an entirely new library and leaves your old one untouched, it is non-destructive, and if you're not happy with the results you can simply return to your old one. .
Regards
TD

RoboHelp 8 HTML WebHelp How to display a larger image of a thumbnail by clicking on or rolling over the thumbnail?

How would you display a larger image of a thumbnail by clicking or rolling over the thumbnail?

Hi there
For a mouseover you would have to add some custom developed JavaScript. You could probably find some pre-made on the web if you poked around.
Generally speaking, any way you slice it you will be using two images. One for the thumbnail and one for the full sized image. You could employ the popup functionalty to pop up the larger image.
I used to simply create DHTML drop-downs and insert the large images in the drop-down area.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

When I click on thumbnails to open photos in iPhoto, the larger image suddenly disappears.

When I click on thumbnails to open photos in iPhoto, the larger image suddenly disappears. How to fixed it?

what version of iPhtoo ? Of the OS? what recently changed?
Back up your iPhoto library, Depress and hold the option (alt) and command keys and launch iPhoto - repair permissioons
LN

Thumbnail to larger image rollover

Similar Messages

Maybe you are looking for