PDA

View Full Version : Image Thumbnail Viewer II extension...



pix23
04-29-2008, 03:22 PM
1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem:

Not a problem as such, the script works great, can anyone suggest a way of making the enlarged/full size image on click load another image in its place..... so click thumbnail, loads enlarged image in the holding div, then its also possible to click enlarged image and load another image from the gallery into its place..... and also can the newly loaded image have the same on click function thereby allowing two methods of viewing your gallery?

many thanks

jscheuer1
04-30-2008, 05:31 AM
That could be worked out, yes. How do you envision selecting the image that should appear when one clicks on the enlarged image? From what you say, it sounds like it would be another one of the images that could be selected using the thumbnails, but which one? Or, if I have that part wrong, what image?

pix23
04-30-2008, 08:35 AM
Hi jscheuer1,

yeah that's exactly what i mean, I was thinking it would probably pass the new image path as a parameter (like the URL gets passed in the current script) when a user clicks the large image. Does this make sense?

cheers

jscheuer1
04-30-2008, 01:31 PM
OK, then simply use this updated version of the script:


// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: 30/Apr/2008 in http://www.dynamicdrive.com/forums by jscheuer1
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
enableChaining:true, //Link displayed Larger Image to next image? (Will not be used with a linked larger image)

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

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

loadimage:function(linkobj){
var next=null;
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
if(this.enableChaining&&showcontainer.getElementsByTagName('a')[0])showcontainer.getElementsByTagName('a')[0].onclick=null;
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
else if(this.enableChaining)
for (var i = this.loadchains[linkobj.rev].length-1; i > -1; --i)
if(this.loadchains[linkobj.rev][i]==linkobj){
next=i<this.loadchains[linkobj.rev].length-1? i+1 : 0;
imageHTML='<a href="javascript:next()">'+imageHTML+'</a>';
break;
}
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Play()
}
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
if(typeof next=='number'){
var c=this.loadchains[linkobj.rev][next], f=function(){c['on'+c.rel.split('::')[1]].apply(c);return false;};
showcontainer.getElementsByTagName('a')[0].onclick=f;
}
},

hideimage:function(linkobj){
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
showcontainer.innerHTML=""
},


cleanup:function(){ //Clean up routine on page unload
if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
this.showcontainer=null
for (var i=0; i<document.links.length; i++){
document.links[i].onclick=null
document.links[i].onmouseover=null
document.links[i].onmouseout=null
}
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script
if(this.enableChaining)
this.loadchains=new Object();
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
if(this.enableChaining){
if(!this.loadchains[pagelinks[i].rev.split('::')[0]])
this.loadchains[pagelinks[i].rev.split('::')[0]]=[];
this.loadchains[pagelinks[i].rev.split('::')[0]].push(pagelinks[i]);
}
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false
}
}
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}
if (this.hideimgmouseout)
pagelinks[i]["onmouseout"]=function(){
thumbnailviewer2.hideimage(this)
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP


} //END init() function

}


if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
thumbnailviewer2.alreadyrunflag=1
thumbnailviewer2.init()
}
thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

Notes: You need not do anything differently when setting up your page. But be aware that if you use the linking syntax that includes a link for the larger image (from the demo page):


rev="loadarea::http://www.dynamicdrive.com"

it will override this new functionality I've built into the script for that link's larger image. So, just use the simpler:


rev="loadarea"

syntax. Unless you want it to override, like if for the last thumbnail in the group, you might want it to go to another page at that point, you could use the linking syntax for that one thumbnail.

And, you of course cannot use:


hideimgmouseout: true, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

It must be set to false.

Finally, if you want to use this new version of the script without this new feature, just set this new property I created for it:


enableChaining:true, //Link displayed Larger Image to next image? (Will not be used with a linked larger image)

to false.

Don't worry about these last two things unless you want to change them, they are already set correctly in the updated version of the script in this post.

pix23
04-30-2008, 03:56 PM
Absolutely astounding John. that works a treat, thank you very much

all the best

pix23
05-02-2008, 11:23 AM
Another question, is it possible to have the first large image show by default, and on click go to the next. I was previously just hard-coding that first image into the page in the correct holding div to make it appear which was fine, but obviously to have that initial large image link to the next large image didn't work (i tried using the code on the first image but that messed things up).

Any help is much appreciated

jscheuer1
05-02-2008, 01:38 PM
OK, I see what you mean. Do this, assign a unique id to the second link in the group, like:


<a id="theNext" href="some_big2.jpg" rel="enlargeimage::mouseover"
rev="loadarea"><img src="some_tbn2.jpg" border=0 alt="Thumbnail"></a>

Then in your load area have:


<img style="cursor:pointer;"
onclick="var b=document.getElementById('theNext');b.onmouseover.apply(b);"
title="Click for Next Image" src="some_big1.jpg" alt="Larger Image Missing">

Now, if your gallery uses the click method for its thumbnails, the word onmouseover highlighted in the above would have to be onclick.

pix23
05-02-2008, 03:14 PM
Excellent John,

thanks for this, it works great

Bernie Kruger
12-03-2010, 11:40 AM
Er I have a similar problem to this question. I just need to load two images.

The thumbnail is a swatch resized (by script to 100 x 100) and then I want to merely display it as full size in a <div> @ 200 x 200 and call the big pic which is a 3D rendering of the swatch in use.

Don't have anything published but I do not like the option of a click on next image to show the big pic.

Here is what I tried with the 2010 version



<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>

<td valign="top" width="20%">
<a href="Image/Thumb/533AG.jpg"&nbsp; "Image/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea"
title="Arctic Granite"><img src="Image/Thumb/533AG.jpg"
border="0" height="100" width="100"></a><br>
<br>
</td>
<td width="220"><!--webbot bot="HTMLMarkup" startspan -->
<div class="BodyTextCenter" id="loadarea" style="width:620px;
height:220px; padding:5 display:block; border-width:0pt;">
<img src="/Image/Thumb/533AG.jpg" />&nbsp;
<img src"/Image/533AG.jpg" /></div></td>
<!--webbot bot="HTMLMarkup" endspan i-checksum="11986" --></td>
</tr>
</tbody></table>


Just need a way to call two images alongside each other for the red bits.

Must say the new version is way cooler than the old one and the "transition" works in FF.

The two pics:
http://i306.photobucket.com/albums/nn244/SeekerSA/533AG-1.jpg http://i306.photobucket.com/albums/nn244/SeekerSA/533AG.jpg

jscheuer1
12-03-2010, 02:44 PM
Either I'm missing something, or you're over thinking this. Just use one image as the thumbnail image img tag's src, the other as the a tag trigger's href:


<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>

<td valign="top" width="20%">
<a href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea"
title="Arctic Granite"><img src="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG-1.jpg"
border="0" height="100" width="100"></a><br>
<br>
</td>
</tr>
</tbody></table>

Bernie Kruger
12-03-2010, 04:28 PM
John, what I need is a resized thumbnail 100x100 an on mouseover, I want to then display the actual size of the thumbnail at 200x200. That I can do but the trick is I need to also automatically load the 3D version into a separate div area each time the user mouses over.

I like the imgbubble script and have been trying to mix that with yours to no avail. If you will, I present a row of swatches, the imgbubble has what I need as far as expanding the swatch to the real size. I just cannot seem to trigger another related pic at the same time. Either I get one or the other but never both.

Either a row approach with 3 tds will do viz.

| 100x100 | 200x200 | dynloadarea |
| 100x100 | 200x200 | dynloadarea |

or a column approach (preferable)

|100x100|100x100|100x100|..8off|
|bubbleexpand200x200|....
|centered dynloadarea|

The 3D images go in the download area.

The page I am working on is here (http://www.lbk.co.za/Const/Worktops/PGbison1.htm) (very crappy)

Most folk here are now on ADSL or 3G (cellphone) and speed is less of an issue now. Got 5 pages to edit and the images are all done, just head scratching how to get the 2 pics now instead on just one w/o a click.

I had a similar problem with the flooring where I also had to include 2 pics per sample using lightbox.



<img id="imbdr" style="filter:alpha(opacity=80); -moz-opacity:0.8"
onMouseOver="lightup(this, 100)"
onMouseOut="lightup(this, 80, 4)"
src="Images/Traviata/Traviloc/Small/RusticMapleLight.jpg">
<a href="Images/Traviata/Traviloc/Large/RusticMapleLightInst.jpg"
rel="lightbox[floor6]" title="Rustic Maple Light"></a>



See here (http://www.lbk.co.za/Const/renovate/Allure.htm)

It seems that two pics per thumbnail is possible, this page however does not warrant a lightbox approach.

Regards

Bernie

jscheuer1
12-03-2010, 06:05 PM
I think I get it now. This uses a display none a tag (highlighted) to load the '3d' image in a separate loadearea. It's triggered by the one you can see's onmouseover event (also highlighted):


<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>

<td valign="top" width="20%">
<a id="hiddenone" href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea2" style="display: none;"
title="Arctic Granite"></a><a href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG-1.jpg"
rel="enlargeimage" rev="targetdiv:loadarea" onmouseover="jQuery('#hiddenone').mouseover();"
title="Arctic Granite"><img src="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG-1.jpg"
border="0" height="100" width="100"></a><br>
<br>
</td>
</tr>
</tbody></table>
<div id="loadarea">

</div>
<div id="loadarea2">

</div>

The one you can see loads the larger version of the thumbnail into loadarea, and the one you cannot see loads the '3d' image into loadarea2.

You'll probably want to arrange and/or layout the two loadareas differently.

Bernie Kruger
12-04-2010, 04:04 AM
Thanks John, just what the "doctor" ordered. All I need to do now is set up the Div's at the base of the page to allow more rows of samples. I should be OK on that one. I will also attempt mixing in the image bubble but more for pizzaz than actual image view.

Thanks once again

Bernie

Bernie Kruger
12-04-2010, 04:48 AM
John, you missed something which I have found an albeit non eloquent solution for.

When I added more images, the large 3d did not change


<td valign="top" width="20%">
<!-- The large image to be displayed -->
<a id="hiddenone" href="image/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea2"
style="display: none;" title=""></a>
<!-- The swatch image to be displayed in full size -->
<a href="image/Thumb/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea"
onmouseover="jQuery('#hiddenone').mouseover();"
title="Arctic Granite">
<!-- The thumbnail -->
<img src="image/Thumb/533AG.jpg"
border="0" height="100" width="100"></a><br>
<br>
</td>
<td valign="top" width="20%">
<!-- The large image to be displayed -->
<a id="hiddenone1" href="image/534SG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea2"
style="display: none;" title=""></a>
<!-- The swatch image to be displayed in full size -->
<a href="image/Thumb/534SG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea"
onmouseover="jQuery('#hiddenone1').mouseover();"
title="Sierra Granite">
<!-- The thumbnail -->
<img src="image/Thumb/534SG.jpg"
border="0" height="100" width="100"></a><br>
<br>
</td>

I changed the red bits to make them unique and it works fine. Not sure if there is a better way of accomplishing this?

Bernie

jscheuer1
12-04-2010, 06:20 AM
All id's on a page must be unique for validation if for no other reason. And, as you can see, with javascript they often need to be for functionality. I never said you could use the same id for each hidden link. You could get away with, and under jQuery it's fairly simple, traversing the DOM tree. In this case we just need to find the first previous sibling that's an a tag. Id is still easier, and easier to explain, but we could even have a class name associated with each link that we wanted to make a look back and code it all to happen without any id's or hard coded mouse events.

For example:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="thumbnailviewer2.js">

/***********************************************
* 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
***********************************************/

</script>
<script type="text/javascript">
jQuery(function($){
$('.lookback').mouseover(function(){
$(this).prev('a').mouseover();
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>

<td valign="top" width="20%">
<a href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea2" style="display: none;"
title="Arctic Granite"></a><a href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG-1.jpg"
rel="enlargeimage" rev="targetdiv:loadarea" class="lookback"
title="Arctic Granite"><img src="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG-1.jpg"
border="0" height="100" width="100"></a><br>
<br>
</td>
</tr>
</tbody></table>
<div id="loadarea">

</div>
<div id="loadarea2">

</div>
</body>
</html>

Bernie Kruger
12-04-2010, 09:43 AM
Thanks John, I managed with the unique Identifiers (remember when it comes to js I am a fool :rolleyes: )

I will try the approach you have just offered, it looks a bit cleaner and with a toilet load of repeats in code, it takes a longtime to proof everything.

I uploaded the test page (http://www.lbk.co.za/Const/Worktops/Test.html) I just completed (if you are interested) it did not come out too bad, still have some cosmetics to attend to.

I also added the "lighten up this" so I am guessing I am just coding it all wrong, only need to address the thumbnail portion of each <td> See my lame attempt (http://www.lbk.co.za/Const/Worktops/Test2.html) here on the first image to try and incorporate the imagebubble, more for an exercise (in futility I might add) to see if I could get the two to work together, kinda like that flash effect w/o having to actually do flash (which of course I know nothing about)

Here (http://www.lbk.co.za/Const/Worktops/Test1.html) I almost got it right.


Bernie

Bernie Kruger
12-04-2010, 10:21 AM
Just to let you know the solution offered above works.

Thanks

jscheuer1
12-04-2010, 03:38 PM
One other little economy of code, for the one with the display none, as long as there's nothing in between the two highlighted red brackets:


<a href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea2" style="display: none;"
title="Arctic Granite"></a>

We can skip the display none:


<a href="http://i306.photobucket.com/albums/nn244/SeekerSA/533AG.jpg"
rel="enlargeimage" rev="targetdiv:loadarea2"
title="Arctic Granite"></a>

Bernie Kruger
12-09-2010, 09:18 AM
Got the scripts working fine and then decided to update some other pages with the same approach.

I have a wee problem.

Everything works OK unless you have a laptop with a standard wide screen (1366x768AR), it works fine on a 1024x768AR or on an extra wide screen (1920x1080AR).

I offer two images, one is a pattern and the other a 3D rendered example of what the finish will look like.

On the narrower screens, the scroll is a problem with the layout I have, you scroll down mouse over a swatch and then it bounces up cutting off part of the 3D image and description.

Is it possible to say display the expanded pattern in a layer and place it on top of the 3D with a close "button"

Resizing images is not an option as then too much detail is lost not to mention it took 2 days to create this content.

Something that would be nice is to place a gif "loading images..please wait" on the first time the page loads which disappears once all images have loaded (I did search but found nothing)

Here is the link (http://www.lbk.co.za/Const/Finishes/mmImpact.html) to the pages in question.

As an aside, is there way to get the Title text to appear immediately instead of waiting till the scripts display the images?

These are pages of a frames page where I am using 15% for menus.

TIA

Bernie

jscheuer1
12-09-2010, 05:22 PM
Set an explicit height for the loadareas so that they don't have to jump to 0 every time their content changes:


<div align="center" id="loadarea" style="width: 220px; height: 220px;">

looks about right for the first one. I see loadarea2 already has a height of 470px, which is what I would have suggested for that.

As for the description showing up first, how exactly would that work? I mean the fade in is so quick anyway (that can and maybe should be adjusted to make it a little slower). What good would it do to have the description show up a second or a half of a second sooner?

I may have misunderstood what you're going for there.

Bernie Kruger
12-10-2010, 06:22 PM
As for the description showing up first, how exactly would that work? I mean the fade in is so quick anyway (that can and maybe should be adjusted to make it a little slower). What good would it do to have the description show up a second or a half of a second sooner?

I may have misunderstood what you're going for there.

John, not the description of the big images, that is fine, I just noticed that the "title" bits on the thumbnails appear after the enlarge image is complete which is pretty redundant. This could be a delay built in on firefox and other explorers (or windows).

Just thought there could be a way to speed up the "tip text" - this is not a script bug (forgive my attention to detail) I am too lazy to add text to each thumbnail :p

Bernie

jscheuer1
12-10-2010, 07:36 PM
Yes, browsers in general do that. It's in case your mouse is moving rapidly over the images/links/other things with title attributes. No sense showing tons of tooltips. This is browser specific, but they're all pretty much consistent. It has nothing to do with the script, other than its needing the title attribute.

Options I can think of are:


Disable the tooltip - I have a mod of the script for that, let me know if you want that.


Use another script to show a tooltip more quickly. This would get tricky because we need the title attribute for the larger image description and many tooltip scripts use and obliterate the title attribute. Perhaps some custom code along with the above mentioned mod.


Live with it. It may seem odd to you. But for someone just browsing the site for the first time, or infrequently, it may actually be reassuring. "Ah, I moused over the right thing after all."

Bernie Kruger
12-11-2010, 01:26 PM
I think option 3 is the better one :)

Just something else, if one actually clicks on the thumbnail, it displays the image on a "new window". Is there a way to disable left click on the thumbnails?

I am jazzing up the thumbnails to actually (did the first two (http://www.lbk.co.za/Const/Finishes/Wrap.html)) look like a door using CorrelDraw with a transparent overlay. This means re-saving all thumbnails. I was thinking, is it possible to overlay a partially transparent png onto an image. The reason I ask, some of the finishes are available in foil wrap and melamine and some not. I use the same pattern for both where applicable as they are very similar. I have to design the overlay for the melamine doors still which will be a border darkening the edges of the image.

If possible attached is a png for the wrap doors. This will save me a huge amount of work. As it stands I have to create two new images for each on both the pages.

What will be nice is that if the png can be overlayed, the right click of file save as will only return the transparent image of course shift print screen overrides anything I may put in hence the embedded watermarks.

If it is too much of an effort, I guess I will have to do the re-save option. :o

TIA

jscheuer1
12-11-2010, 05:49 PM
For the first thing we could do (add the highlighted to our 'lookback' code):


<script type="text/javascript">
jQuery(function($){
$('.lookback').mouseover(function(){
$(this).prev('a').mouseover();
}).click(function(e){
e.preventDefault();
});
});
</script>

If you have others without the lookback class (aside from the ones you cannot see and so cannot click on):


<script type="text/javascript">
jQuery(function($){
$('.lookback').mouseover(function(){
$(this).prev('a').mouseover();
});
$('a[rel=enlargeimage]').click(function(e){
e.preventDefault();
});
});
</script>

Both of the above are untested, but as long as I've made no errors, have worked before in similar situations with this script.

The other question is a matter of layout and whether or not superimposing the desired image will result in the desired effect. You currently have:


<div align="center" id="loadarea" style="width: 220px;">

<img id="imgbd" height="200" width="200"
src="image/Thumb/WhiteAlpineW.jpg" />
<br />Pattern</div>

Which if I recall correctly should be (to prevent page jumping on some monitors):


<div align="center" id="loadarea" style="height: 220px; width: 220px;">

<img id="imgbd" height="200" width="200"
src="image/Thumb/WhiteAlpineW.jpg" />
<br />Pattern</div>

We could change that to (untested):


<div style="position: relative;">
<div align="center" id="loadarea" style="height: 220px; width: 220px;">

<img id="imgbd" height="200" width="200"
src="image/Thumb/WhiteAlpineW.jpg" />
<br />Pattern</div><img src="Image11.png"
style="position: absolute; left: 10px; top: 0; width: 200px; height: 200px" alt="original image" title="">
</div>

If I've made no syntax or other errors, just make sure the path to the image and its filename are correct. The left and top as well as the dimension styles of the image may need to be tweaked and/or the image itself (your attached one was 201 high, but the inline one is 200, the actual dimensions are 198 x 198 on the two you've already altered, but the unaltered ones are 200 x 200). Some or all of this could be important to get an exact fit.

Bernie Kruger
12-11-2010, 06:23 PM
I found something here (http://www.tjkdesign.com/articles/png_overlay_with_no_extra_markup.asp) and here (http://www.tjkdesign.com/articles/overlay/overlay_with_class.asp) which is exactly the approach I want to try out.

I searched DD but nothing on overlays.

Problem is, unless you know what you are doing, unlike me, where does one start? Is the actual code a javascript and can it be called or can it be in the head section?

Bernie

Bernie Kruger
12-11-2010, 06:25 PM
Sorry I missed your post :o

ETA:

I read your post and the image sizes should be 200 x 200. I only did the 1st two to give you an idea of what I was trying to achieve. Will fix that.

I will give your suggestions a try first, seems a lot simpler.

Thanks

Bernie Kruger
12-11-2010, 07:33 PM
John, you rock and you are a star - hence you are a rock star :D

I only had to add the bits below for the alignment to work out, that took me 5 minutes. I knew there was a way around. One png and a wee bit of coding. :):):)


<div align="center" style="position: relative; width: 220px; height: 220px;">
<div id="loadarea" style="width: 220px; height: 220px;">
<img id="" height="200" width="200"
src="image/Thumb/WhiteAlpine.jpg" />
<br />Pattern</div><img src="image/Thumb/Wrap.png"
style="position: absolute; left: 10px; top: 0; width: 200px; height: 200px" alt="original image" title="">
</div>

Thanks

Bernie Kruger
12-11-2010, 10:46 PM
Another question.

I see the png does not do so well on the medium to dark colors so I have adjusted the transparency settings for 3 images;

light.png
med.png
dark.png

Is there a way to assign a class or id to the particular pattern jpg image to be displayed in "loadarea" to overlay the desired png?

In my primitive logic, this would be an if then else approach but I am sure there is a more finesse way of accomplishing that.

Sorry for all the questions but this is new ground for me.

TIA and off to bed now.

jscheuer1
12-12-2010, 03:53 AM
Untested again, so holler if there are problems. Let's completely revamp our 'lookback' code (replace it with):


<script type="text/javascript">
(function($){

/* The overlays array is of the filenames, without extension of the overlay images.
It's also of the class names to assign to each of the looked back to links to
determine which overlay file to use for each pair of look back/looked back to links.
If not set, overlay will be hidden for that look back/looked back to links pair. */

var overlays = ['light', 'med', 'dark'], imba = ['image/Thumb/', '.png'], // set overlay's filenames, path, extension
overlayid = 'overlayImage', // set id of overlay image tag
lookbackclass = 'lookback'; // set class to assign to each link that will look back

/////////////// End Configuration ///////////////

for (var i = overlays.length - 1; i > -1; --i){ // begin preload routine
(function(im){
var p = new Image();
p.src = imba[0] + im + imba[1];
})(overlays[i]);
} // end preload routine
$(function(){ // begin document.ready
var overlayImage = $('#' + overlayid);
$('.' + lookbackclass).mouseover(function(){
var rt = $(this).prev('a'), cn = rt.get(0).className; // finds related trigger - the one looked back to and its class if any
if($.inArray(cn, overlays) > -1){
overlayImage.attr('src', imba[0] + cn + imba[1]).css({visibility: 'visible'});
} else {
overlayImage.css({visibility: 'hidden'});
}
rt.mouseover();
}).click(function(e){ // prevent links that look back from firing on click
e.preventDefault();
});
}); // end document.ready
})(jQuery);
</script>

This assumes that the:

light.png
med.png
dark.png

images are in the image/Thumb/ folder and requires us to add an id here:


<div align="center" style="position: relative; width: 220px; height: 220px;">
<div id="loadarea" style="width: 220px; height: 220px;">
<img id="" height="200" width="200"
src="image/Thumb/WhiteAlpine.jpg" />
<br />Pattern</div><img id="overlayImage" src="image/Thumb/Wrap.png"
style="position: absolute; left: 10px; top: 0; width: 200px; height: 200px" alt="original image" title="">
</div>

and add the appropriate class here (I'm guessing this one's light) for each of the unseen triggers you want to activate one of these overlays (those without one of these class names will hide the overlay image), example:


<!-- 1 The large image to be displayed -->
<a class="light" href="Image/Wrap/WhiteAlpineW.jpg"
rel="enlargeimage" rev="targetdiv:loadarea2"
style="display: none;"
title="White Alpine"></a>
<!-- The swatch image to be displayed in full size -->
<a href="Image/Thumb/WhiteAlpine.jpg"
rel="enlargeimage" rev="targetdiv:loadarea"
class="lookback" title="Pattern">
<!-- The Thumbnail -->
<!-- -->
<img id="" border="0" height="70" width="70"
onmouseover="lightup(this, 100)"
onmouseout="lightup(this, 80, 4)"
src="image/Thumb/WhiteAlpine.jpg"
alt="White Alpine" title="White Alpine" /></a>

Whatever class you add - light, med, or dark - that's the image filename. The path and extension are set in the script (red in first code block in this post). I know that's the trigger for the main image. It doesn't matter what it's the trigger for, what matters is that its class attribute is available, and that it can be considered when the mouse is over the seen thumbnail trigger. Otherwise we would have to use multiple classes on the seen trigger and parse out the one we need, or use some other attribute that might not lend itself so well as class does to this.

Bernie Kruger
12-13-2010, 11:18 AM
John

Boy, you are good :p

It worked exactly as I wanted no editing required at all. you can see it working here (http://www.lbk.co.za/Const/Finishes/Wrap.html).

Must say that this opens many other avenues. The pages are a bit slower but our net is awfully slow lately here in sticksville.

Maybe you should post a generic script for all to use on png overlays. You are welcome to use my content for demo purposes.

One added benefit is that the image is sort of protected for casual copiers as display image brings up the png overlay.

Thanks for all the help so far

Bernie