i don't want a pop up window. i want to use the same table space as the gallery is in. Can you make that work??
Main Topics
Browse All Topics
Loading Advertisement...
Question
Code for OnClick event to change image gallery to large image view
Can you please provide JavaScript and/or DHTML code that will allow a mouse OnClick event to change the gallery thumbnails to a large image view? When a user releases the click on the mouse, the large image will go away and the gallery will appear once again.
The following gallery is an example of what Id like to display, then change to large image view of any one of the images when a user clicks it.
http://www.philipmeadows.c
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Subscribe now for full access to Experts Exchange and get
Instant Access to this Solution
- Plus...
- 30 Day FREE access, no risk, no obligation
- Collaborate with the world's top tech experts
- Unlimited access to our exclusive solution database
- Never be left without tech help again
Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.
- "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
- "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
- "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.
See what Experts Exchange can do for you.
Got a question?
We've got the answer.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
Need individual assistance?
Our experts are ready to help.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Want to learn from the best?
Read articles from industry experts.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Working on a long term project?
Store your work and research.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
What Makes Experts Exchange Unique?
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Trusted by the world's most respected brands.
Faithfully serving IT professionals since 1996.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Free Tech Articles
-
WARNING: 5 Reasons why you should NEVER fix a computer for free.
It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
-
SCCM OSD Basic troubleshooting
SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
-
Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
-
Create a Win7 Gadget
This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
-
Outlook continually prompting for username and password
There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
-
Backup Exchange 2010 Information Store using Windows Backup
There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...
Cloud Class Webinars
- Avoiding Bugs in Microsoft Access
Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
- Top 10 Best New Features in Visio 2010
Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
- IT Consultant Business Secrets Revealed
Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
- Disaster Recovery and Business Continuity
Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
- Organize Your Visio Diagrams with Containers and Lists
Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
- How to Us Objects, Properties, Events and Methods in Microsoft Access
Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...
Join the Community
Give a Little. Get a Lot.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Answers
This code will work if you have
image1.gif and image1thumb.gif
through
image9.gif and image9thumb.gif
change those filenames to whatever you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(p
document.MM_pgW=innerWidth
else if (innerWidth!=document.MM_p
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_setTextOfLayer(objName,
if ((obj=MM_findObj(objName))
if (document.layers) {document.write(unescape(n
else innerHTML = unescape(newText);
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHide
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v
obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}
-->
</style></head>
<body><table width="600" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onMouseDown="MM_showHideLa
<td><a href="#" onMouseDown="MM_showHideLa
<td><a href="#" onMouseDown="MM_showHideLa
</tr>
<tr>
<td><a href="#" onMouseDown="MM_showHideLa
<td><a href="#" onMouseDown="MM_showHideLa
<td><a href="#" onMouseDown="MM_showHideLa
</tr>
<tr>
<td><a href="#" onMouseDown="MM_showHideLa
<td><a href="#" onMouseDown="MM_showHideLa
<td><a href="#" onMouseDown="MM_showHideLa
</tr>
</table>
<div id="Layer1" style="position:absolute; width:600px; height:300px; z-index:1; visibility: hidden; left: 0px; top: 0px;"></div>
</body>
</html>
It's not working.... what characters are %3C and &3E ???
I'm testing the code here http://www.philipmeadows.c
Okay it seems to be working using your exact code...however the first time I click on an image in IE the page refreshes and does nothing, but the 2nd time I click the image, it displays the large image. I don't want users to have to click twice to initialize the image before it displays large.... is that a bug in the code? Or is there something you can change in the code to fix this?
<td><a href="#" onMouseDown="MM_showHideLa
This is your baby, i'll break it down for you and fix the problem at the same time
<a href="#"
// Show The Layer
onMouseDown="MM_showHideLa
// Set the Text of The Layer to The Big Image.
// All you need to change is the word image 1.gif
// %3C = <
// %22 = '
// %3E = >
// So the line looks like <img src='image1.gif' width='600' height='300' border='0'>
MM_setTextOfLayer('Layer1'
// Hide Window
onMouseOut="MM_showHideLay
>
// Display Thumbnail
<img src="image1thumb.gif" width="200" height="100" border="0">
</a>
To Fix the problem you were having... put return false at the end of each onmousedown i.e.:
<td><a href="#" onMouseDown="MM_showHideLa
"i don't want a pop up window. i want to use the same table space as the gallery is in. Can you make that work??"
I actually worded it wrong, it's not a pop up window, it's a pop up Div instead.
Here's a working example so you can see how it looks:
http://webmastereseller.co
Regards...
Done my friend. Check it out again: http://webmastereseller.co
Seems I forgot an "onmouseup" command.
The following is for archiving of this question:
meadows.js file:
// **************************
function adjust()
{
hgt=document.getElementByI
document.getElementById('r
}
window.onload = adjust;
window.onresize = adjust;
function enLarge(pic,wdth,hght){
var divwdth = wdth+20;
var divhght = hght+20;
var winL = 0;
var winT = 0;
content = '<div id="showLrg" style="position:absolute;l
document.getElementById('h
if(event.mousemove){
hide();
}
}
function hide(){
if(document.getElementById
document.getElementById('s
}
else{
return false;
}
}
// **************************
Then add this right below your ~ <div id="leftcol"> ~ :
<div id="hiddenDiv" style="position:relative;t
And finally, add the following to your img tags:
onmousedown="enLarge('/pat
Like so:
<img src="http://www.philipmead
Or you can just take the source code from both files on my site. Let me know if you need anything else.
Regards...
Hey ziffgone,
Now I'm not so sure your script will work. I have two images for each displayed image. A thumbnail and a large view of the same image. If I enlarge a thumbnail, the enlarged view is pixelated. So I need to be able to use the image size that is optimized for the thumbnail view. Are there any changes to your script that we can do to utilize both a thumbnail and the large image size?
Hi gmahler5th,
I actually included the ability to do that within the script:
<img src="http://www.philipmead
On my web page, just for example to show larger pictures, I substituted "/path/to/large_view.jpg" with "this.src", which just blew up the thumbnail to show only as an example.
So, let's say for "/thumbs/0001.jpg", the larger picture you want to show is "/images/wedding0001.jpg",
enLarge('/images/wedding00
So your "0001.jpg" thumbnail <img> tag would look like this:
<img src="http://www.philipmead
This will open "wedding0001.jpg" 350px wide by 300px high.
Make sure to enclose the path to the larger image in single quotes, ( ' ), as in my example above, if you enclose it in double quotes, ( " ), you'll get script errors.
So this:
enLarge( >> ' << /images/wedding0001.jpg >> ' << ,350,300);
Not this:
enLarge( >> " << /images/wedding0001.jpg >> " << ,350,300); ........ Creates errors.
I hope that helps, any questions, just ask.
Regards...
Okay well the first issue is that there is extra padding at the top of the table in IE and the images shift down, but the space is not there in Mozilla. Also, there should be a 2 pixel spacing on the top and left hand margins, just like on the bottom and the right margins.
Also, I'd like the image to be center aligned and middle aligned.
I would also like the layout to appear the same in IE as it does in Mozilla.
Here is where I'm at: http://www.philipmeadows.c
Many thanks.
Okey dokes, took a bit of doing, but I think I may have done it. A little note, I just couldn't make it look right with the thumbnail images aligned to the left, like on your page. There was an odd spacing on the right that I just couldn't figure out. So, the thumbs are centered, see what you think.
http://webmastereseller.co
I also corrected your image pre-load, as it was trying to preload the images from your main directory and not the "long-road" directory, therefore not finding them. I'm currently on dial up, and when I moused down on an image, it took forever to load the large image. Now it takes longer for the page to load for me, but when I click on the images, the large pic pops into existence immediately.
Here's the upgraded gallery.js file:
http://webmastereseller.co
Here's the upgraded meadows.css file, (just one style for "gallerycol" added):
http://webmastereseller.co
Take note that I'm using a hidden div for code swapping, it is placed just above the </body> tag:
<div id="hiddenDiv" style="position: absolute; top:-2000px;left:-2000px;"
</body>
One more small note, try not to use spaces in your file names, such as "Flaming Cloud.jpg". Many times this causes problems as the request for the image looks like this: "Flaming%20Cloud.jpg" and sometimes the %20 will be looked for literally instead of being converted back to a space. I'd use underscores or dashes for spaces: "Flaming_Cloud.jpg".
Anyway, let me know if you need anything else.
Regards,
Perry.
3 Ways to Join
Business Accounts
- Perfect for organizations
- Multiple users
- Save over 36%
- Create a Business Account
Answer for Membership
- Earn free access
- Showcase your knowledge
- No credit card required
- Sign Up to Answer
Loading Advertisement...
by: ziffgonePosted on 2004-08-17 at 19:53:21ID: 11827188
No problem gmahler5th, this example will open it into a pop window.
Place this in your meadows.js file:
function enLarge(pic,wdth,hght){
divwdth = parseInt(wdth);
divhght = parseInt(hght);
var winL = (screen.width - wdth) / 2;
var winT = (document.getElementById('
content = '<div id="showLrg" style="position:absolute;l
document.getElementById('h
if(event.mousemove){
hide();
}
}
function hide(){
if(document.getElementById
document.getElementById('s
}
else{
return false;
}
}
Then modify your thumb's img tag like so:
<img src="/photos/thumbs/0001.j
Where "200" and "400" would be the width and height of the actual image to show respectively.
Let me know if that's what you want.
Regards...