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.

Similar Messages

Small iMage pop up larger image then close

Hi All
First off I am not a coder :)
I am building a website and would like to take an image on
the page, be able to click on image to create larger image (pop up
on same page) and then be able to close larger image back to
original image.
I am using CS4
Thanks in advance
Jay
pcb4u at verizon dot net

Do I replace the
seelarger.php?im=<?php echo urlencode($image); ?> code
you gave me before
with
seelarger.php?im=<?php echo urlencode($image);
?>&title=<?php echo
urlencode($title); ?>
and can you confirm what code I need on the seelarger.php
page.
as I replaced the seelarger.php?im=<?php echo
urlencode($image); ?> code
with the new one you gave and nothing happened.
Thanks
Matt
"David Powers" <[email protected]> wrote in message
news:ej84c4$283$[email protected]..
> matt wrote:
>> Excellent.... worked perfectly thankyou.... now how
do I do the same with
>> the title.... on the image page I have it as
<?=$title?>
>>
>> And on the seelarger.php I have it as echo
>> "<title>{$_GET[title]}</title>";
>
> You need to pass the variable from one page to the next.
It doesn't just
> appear by magic.
>
> seelarger.php?im=<?php echo urlencode($image);
?>&title=<?php echo
> urlencode($title); ?>
>
> --
> David Powers
> Adobe Community Expert
> Author, "Foundation PHP for Dreamweaver 8" (friends of
ED)
>
http://foundationphp.com/

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

Creating Thumbnails for web page links to larger images.

I want to create thumbnail images for linking to web page linking to enlargements. I'm using PhotoShop Elements 2.0 on a Dell 2400, XP Home Edition with 512mb RAM and 35gb storage available.
The language I read in help sections doesn't addressed the issue I want help with. I believe it addresses saving thumbnails for Windows and Mac using .tiff or .psd format, not the .jpg or .gif I need. It seemed like there should be a way to change the thumbnail format. Any suggestions would be appreciated.

Hi Ted,
You can use the ' Web Photo gallery ' as Jodi suggested for a large
number of images or,
Open your image, click the bar at the top of the displayed image &
reset the size to what you want, then 'File', 'Save for Web' & save as
.jpg or .gif. .jpg gives more options for reducing file size so that
is what I use. Close the image without saving
HTH,
Alex,

Gallery - Link from large image

Having started with the spry image gallery, I am having
trouble adding a link using the large image. Anyone know how to
extract the image ID and make it a link for the large image to go
to a detail page.

Hi Henry,
Here's a way how to do that:
1. Add a js function that sets a new url for the image
onclick everytime the source of the image changes. Add it in the
head of the page (right after the XMLDataSets declarations):
// this function is called every time the source for the main
image is changed
function SetMainImageLink(curRow) {
var img = document.getElementById("mainImage");
if (!img)
return;
var path = 'product_detail.cfm?ID=' + curRow["@path"];
img.onclick = function() {
window.location.href=path;
2. open gallery.js file and locate this function: "function
ShowCurrentImage()"
3. call SetMainImageLink from within ShowCurrentImage. Here's
the full source for the modified function ShowCurrentImage()):
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
SetMainImageLink(curRow);
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
4. (optional) you can edit the img tag and add a style on it,
so it display a hand cursor when you mouse over it.
<img id="mainImage" alt="main image"
style="cursor: hand; cursor: pointer;"/>
Hope this helps you,
best regards,
Dragos

Muse, thumbnails, click creates a larger images ???

muse, how to create a thumbnail and when I click on it or do a roll over it opens up a larger image of the thumbnail, need help. Wolf

Please check out: http://tv.adobe.com/watch/learn-muse/creating-a-lightbox-slideshow-in-muse/
Cheers,
Vikas

Thumbnail or link to (iPhoto) images

I'm working on a project in Pages with the notes template. It's really useful to pagebreak > specify the subject and > add notes. I want to include lots of images but it's too much effort to insert and resize them. I don't want to waste time on the layout and have them inconveniently jump or push around. I just want them to be there along with the notes.
A small thumbnail would be great, maybe have it expand if you hover over or click it. Else IMG_1892, IMG_1903 etc would be the alternative, though more of a pain to look back. I import most of my research to iPhoto, it'd be great to drag 'n drop it into pages in the aforementioned format. Is this possible?

Get acquainted with Format ▸ Advanced ▸ Define as Media Placeholder.
The following is a new document based on the Notes template in Pages v5.2.2 (what was handy). I inserted a random image from the toolbar media icon, selected the Arrange tab, and set Wrap to None, so that I could move the image around. While in that Arrange tab, I proportionately reduced the size of the image to what you see below. This was followed by the first sentence. I then duplicated the first image and positioned it. The duplication process retains the Media Placeholder setting. You can now drag/drop images into these existing images and they will automatically adjust to fit in the available view. One can also right-click on one of these Media Placeholder images, and choose Replace Image… from the contextual menu.
Once you have this configured to taste, you can then first save it as a Pages document, and then Save as Template. You now have your own custom Notes template with thumbnail image support.

Next / previous image swap WITH larger image popup

Very simply what I need to do is almost identical to what you
see here:
http://www.java-scripts.net/javascripts/Slide-Show-Script.phtml
(scroll down to the animal pictures)
When you click "next" and "previous" the images swap through
a series
called "img1.gif" "img2.gif" and "img3.gif"
So far so good. However let us assume there is also a set of
images called
"img1_lrg.gif" "img2_lrg.gif" and "img3_lrg.gif" which are
larger
versions of those little thumbnails. I need for the
appropriate associated
large image to popup in its own window when the thumb is
clicked.
Has anyone a lead on something like that?
Thanks very much.

On Thu, 28 Sep 2006 17:59:37 +0000 (UTC), [email protected]
(Clay)
wrote:
>Very simply what I need to do is almost identical to what
you see here:
>
>
http://www.java-scripts.net/javascripts/Slide-Show-Script.phtml
>
>(scroll down to the animal pictures)
>
>When you click "next" and "previous" the images swap
through a series
>called "img1.gif" "img2.gif" and "img3.gif"
>
>So far so good. However let us assume there is also a set
of images called
>
>"img1_lrg.gif" "img2_lrg.gif" and "img3_lrg.gif" which
are larger
>versions of those little thumbnails. I need for the
appropriate associated
>large image to popup in its own window when the thumb is
clicked.
>
>Has anyone a lead on something like that?
>
>Thanks very much.
That sounds simple, where are you stuck? Do you not know how
to open a
popup? BTW, the JustSo Picture Window extension would be
perfect for
the popups.

Open Dialog box: disable image preview (For large images, it's SLOOOWWWW)

Open Dialog box in column view:
Can I disable image preview?
For large images, it's SLOOOWWWW !!!!!
( I often work with 8000 x 3500 panoramic images )

William
Mostly this is a problem in PhotoshopOK, my Photoshop is still a Classic version. I was looking at one or two others, like GraphicConverter, but the only pref there seems to be to generate a Preview if one doesn't exist.
I'll look some more—it's irritating me now

In Design CS 5.5, Can I link to large image files ??

Dear friends,
We are creating a 111 page file that links to about 120 large picture files. Each picture file is about 40MB. Doing this seems like it will slow down my computer's ability to quickly edit the file, because it will be so large.
QUESTION: What are some ways around this?
What is recommended?
Shall I place the files, and then somehow TURN DOWN the "display performance" ?
Or should I make SMALLER versions of all 120 files, then replace them with the large files when I am about to print to PDF? (That sounds like a LOT of work)

I'm not sure you are using the term "embedding" properly here.
You want to link the images by using File > Place... That includes a pointer to the entire file and a preview inthe ID file, but not the actual image data. In order to embed (which saves a complete copy of the image data inside the ID file and will make it HUGE), you must slect the link in the Links panel and choose Embed from the panel flyout menu.
It's also possible to copy and paste vector drawings into ID and the will not show in the links panel at all. I recommend against this in favor of Placing them as well. Complex pasted vector objects can cause significant slowdown whenver the screen has to be redrawn.

Click on Thumbnail Image to get larger Image

Hey Guys
So I basically have a horizontal list with images loaded onto it. This is dynamically generated via XML input from a PHP file.
How can I add a click event on it or a rollover mouse event, so that when a person click/rollover mouse on it, the image is displayed on another image component bigger with other details.Do I call some function or something else??
please help here
Thanks

Solved it myself.. thanks everybody

Extract an image from a larger image

I snap an 24bit RGB color image size: 748 x 566 and I would like to remove the border and extract a smaller (still need color) image 10 pixels smaller from each side. result size ~ 728 x 546. How do I tell the extract VI or Resample VI to do this.
Start from the left corner go in 10 pixel x direction and 10 pixels y direction...

Your answer is correct, I'd like to have more speed.
I have Vision toolkit, Sony DXC-390 PAL and PCI-1409.
I use the BNC Connector(NOT the other connector).
To Snap image:
1. IMAQ Init, stillcolor Mode, channel 0, Color Repre
2. IMAQ Create (RGB, border=2)
3. To define my image size.
I use the CIN from IMAQ rectToCoor.VI.
(new image, x res=748; y res=566; output:image)
4. call IMAQ Getpixel ptr (input:image, map pixel ptr,
outputixel ptr out, linewidth)
I assume this is a pointer in memory for snapping
5. call low level ImgSnap area(in: image,sessionID,
buffer= pixel ptr out,top, left, bottom, right,
rowbytes = linewidth)
'output assuming image is in memory area
6. ColorimagetoArra
y
7. Flatten pixmap
8. Draw flatten pixmap
9. IMAQ write jpg file.
Please comment on my step, I take about two seconds per image, that is slooow.

Can I disable the feature which gives an image in an image map a 1 pixel blue border, thus displacing all the image links on the image map by 1 pixel and revealing gaps between all the images making up the image map?

i. e. can I remove the blue outline glow in focus in the browser?

i. e. can I remove the blue outline glow in focus in the browser?

How to allow the image tab to work properly for changing to larger images.

I am very new in using Adobe creative cloud, and have had my shre of issues, mostly with preference setting, and I am having a issue with going to the image tab, and trying to take an image from a smaller image to a large image and it will take the computer a considerable link of time to reaat to this, sometimes up to five to ten minutes,
Last week I had a siamialr problem with under adjsutaments and curvesd and exposure, and when hitting tthe preview, it would njot come u so technicain had me go to the preference and change some of the settings and this fixed this problem,. any help would be greatly appreciated. thank you

Actually, I try to modify this example.
http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=L iveDocs_Parts&file=00000649.html
I can change initializingLabel, it does work. But whatever i
set backgroundColor or backgroundImage, it doesn't show any change.
I think maybe i did wrong to define the value.

Roll over to view larger image, click to select

Which combined server behaviors or technologies would allow
me to create a dynamic image gallery of thumbnails that when you
roll over any thumbnail image (images are populated via repeat
region recordset behavior), you can view a larger image. Selecting
a thumbnail would select the larger image version.
I do not need to know how to create the thumbnail images
(this would be achieved via aspjpeg with a repeat region applied to
it) but rather how to make it work as explained.
check out
https://www.schooloutfitters.com/catalog/product_info/pfam_id/PFAM898/products_id/PRO987
for an example.

OK so I'm almost there! A little more help if it's not too much trouble.
I've used the "mouse-over to enlarge" example and it seems to be working.
The images sit together top left (ie. the larger image appears over the top of the smaller image and both top left corners of the images sit in the same x and y position - it appears to grow to the right and down!). Can I change this so that the images sit in the same position bottom right and the image grows bigger, up and right?
Alternatively if it's easier I could do "mouse-over and click", but I need the click to open my image in a new window, sized to the image (so I can still see the main page in the original browser window).
Thanks again
Lopoc

Thumbnail image links to larger image - how?

Similar Messages

Maybe you are looking for