jscheurl if you're out there i need you!!

**momonline** · 04-22-2006, 12:11 AM

thumbnail viewer II -- you are familiar with my site www.makeovermagic.org (if you remember, you probably see a million a day) -- but any way -- there are before/after pictures of retouched models (if that refreshes your memory).

my question is, can a script be added to this viewer so that after the mouseover on the thumbnail (which would give me the "before" picture centered), then "onclick" (on the thumbnail) can i have it switch to the "after" picture centered?

make sense?

THANK YOU!!!!!!

Marsha

p.s. my site is temporarily closed for renovation

**jscheuer1** · 04-22-2006, 10:09 PM

You asked this before and I was about to answer it when you changed your layout. Then I think you then changed it again. Either way, you then asked different question. What you describe can be done but, I would prefer to work from an existing page that is otherwise set up the way you want it. This is to be sure that any modifications would work with the existing layout. It also saves me time to work from an existing page as opposed to creating a demo from scratch. I often have demos hanging about that could be fairly easily adapted to a particular purpose but, in this case I do not. In this specific case, it would also be helpful to have the url for at least one of the 'after' images to test with. Further, I would appreciate it if you would settle on one idea and stick to it before engaging me to modify your page. I realize that the design process often takes many twists and turns before the designer settles on a particular look and method of doing things. I prefer, especially in my work here in the forums, to be as near to the end of that process as possible.

**momonline** · 04-22-2006, 11:50 PM

John,

I agree 100%, and I apologize -- It's been difficult to decide, but this is definitely the way I want it to be.

i reopened site -- temporarily changing "gallery one" to the index.htm -- so it would be easier for you (hopefully) -- NOTE: there is so much crap on the page now that nothing's working, but the set-up is basically there with two images to work with.

i also added hyperlinks to each of the "after" -- "before" photos.

i want the thumbnail to be the "after" - onmouseover for "after" to appeared centered and onclick of the thumbnail for the "before" to appear centered -- and onclick again to return to the "after" image.

HOW'S THAT; I HOPE IT MAKES SENSE!!

I OWE YOU BIG TIME!!!

As always, thanks, Marsha

**momonline** · 04-24-2006, 04:24 AM

i've almost got it.

onMouseover on the thumbnail i correctly get the "after" image enlarged
onClick on the thumbnail i correctly get the "before" image enlarged

however, i now just need onClick on the thumbnail to go back and forth from "after" to "before" on the mouseover image enlarged.

also in mozilla and opera -- the image enlarged is not centered; looks ok when i preview it in front page though -- any way to fix this?

thanks,

Marsha
www.makeovermagic.org

**jscheuer1** · 04-24-2006, 06:12 AM

Here's a slightly different approach. You really don't need before and after thumbnails, I wouldn't think. Here the large image swaps with the large before image onmouseover and then back onmouseout:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>MakeOverMagic - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.makeovermagic.org/" />
<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified for MakeOverMagic by jscheuer1 in http://www.dynamicDrive.com/forums
***********************************************/

//Specify image paths
var dynimages=new Array()
dynimages[0]=["TrinaAfter.jpg"]
dynimages[1]=["TrinaBefore.jpg"]
dynimages[2]=["ChrissyAfter.jpg"]
dynimages[3]=["ChrissyBefore.jpg"]
dynimages[4]=["SarahAfter.jpg"]
dynimages[5]=["SarahBefore.jpg"]

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=4

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
imghtml+='<img src="'+dynimages[theimg]+'" border="'+imgborderwidth+'" onmouseover="if (this.filters && window.createPopup){this.style.filter=filterstring;this.filters[0].Apply()};this.src=dynimages['+[theimg+1]+'];if (this.filters && window.createPopup){this.filters[0].Play()}" onmouseout="if (this.filters && window.createPopup){this.style.filter=filterstring;this.filters[0].Apply()};this.src=dynimages['+theimg+'];if (this.filters && window.createPopup){this.filters[0].Play()}">'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(imgindex)
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script>
</head>

<body link="#000000" vlink="#000000" alink="#000000">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600"><tr>
<td><a href="javascript:void();" onMouseover="modifyimage('dynloadarea', 0)">
<img border="4" src="TrinaAfter_small1.jpg" width="45" height="49"></a></td>

<td rowspan="7" align="center" id="dynloadarea" style="width:485px;height:630px"></td>

</tr><tr>
<td>

<a href="javascript:void();"
onMouseover="modifyimage('dynloadarea', 2)">
<img border="4" src="ChrissyAfter_small.jpg" width="45" height="49"></a></td></tr><tr>
<td>

<a href="javascript:void();" onMouseover="modifyimage('dynloadarea', 4)">
<img border="4" src="SarahAfter_small.jpg" width="45" height="53"></a></td></tr><tr>
<td><a href="javascript:void();" onMouseover="modifyimage('dynloadarea', 0)">
<img border="4" src="TrinaAfter_small1.jpg" width="45" height="49"></a></td></tr><tr>
<td>

<a href="javascript:void();"
onMouseover="modifyimage('dynloadarea', 2)">
<img border="4" src="ChrissyAfter_small.jpg" width="45" height="49"></a></td></tr><tr>
<td>

<a href="javascript:void();" onMouseover="modifyimage('dynloadarea', 4)">
<img border="4" src="SarahAfter_small.jpg" width="45" height="53"></a></td></tr><tr>
<td><a href="javascript:void();" onMouseover="modifyimage('dynloadarea', 0)">
<img border="4" src="TrinaAfter_small1.jpg" width="45" height="49"></a></td></tr>
</table><!--msnavigation--></body></html>

**momonline** · 04-25-2006, 02:30 AM

hi john

i attempted the above, but didn't get it at all

so i startd on a blank page and reinserted the thumbnail viewer II script from scratch -- modified a few things -- and it is perfect,

EXCEPT FOR the GradientWipe is not working in either mozilla or opera (i don't know about IE). i have it set onclick to go to the before/after pictures and on my preview page in FrontPage it works perfectly -- but not when i upload to site.

If you have time, please take a look -- www.makeovermagic.org -- SCROLL DOWN AND CLICK ON *

Thanks again, Marsha

**momonline** · 04-25-2006, 02:31 AM

and even if the GradientWipe will not work in mozilla or opera -- the alternative would be to just have onclick work-- but i can't get that to work either

**jscheuer1** · 04-25-2006, 06:04 AM

Gradient Wipe has always been IE only. Sorry about my demo, since you were using a script that was so heavily dependant upon IE, I only tested in it. The layout left much to be desired, especially in Opera. I've remedied that here. It is basically the same thing as before. I repeated the images twice to give the idea that more could be used if desired and have now added instructions. The layout is the least critical aspect of the effect anyway. One thing you must understand though is, that if you use such large images in your markup, even dynamically inserted, you must allow room for them.

**momonline** · 04-25-2006, 06:22 AM

Thanks John,

That's perfect

-- i just need to tweak layout -- but that's just what i was talking about -- i'll delete the repeat images.

Thank you for the time you spent -- i'll let you know when it's finished -- although i'm sure i'll be back with a new problem or two

Marsha

Thread: jscheurl if you're out there i need you!!

Thread Tools

Search Thread

jscheurl if you're out there i need you!!

Almost There!

P.S. to previous post

That's It!

Bookmarks

Bookmarks

Posting Permissions