PDA

View Full Version : Customizing Image Thumbnail Viewer II



palmaroca
04-30-2008, 07:46 PM
1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: The script works great. I would just like to know how to make some changes in how it works out of the box.

my site: http://paulmirocha.com/portfolio_maps.htm


If you click on the top right map thumbnail for the North Dakota map, you'll see what I mean. You'll get the main image in the right column <div#imagegallery>. Clicking on that image gives you a third image: detail enlargement . I don't like my design where the enlarged image comes up in a new page in the same window. It is a work-around. What I want is for the enlarged detail to come up in a new blank window.

Is there a way to alter the script to do that?

Thanks,

thetestingsite
04-30-2008, 07:52 PM
In this function of thumbnailviewer2.js, add the highlighted part:



loadimage:function(linkobj){
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
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 target="_blank" href="'+dest+'">'+imageHTML+'</a>'
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()
}
},


Hope this helps.

palmaroca
04-30-2008, 10:00 PM
Thanks. That works! Can I adjust the resulting new window so that it hugs the image and has no chrome etc. Just stripped down. And there's more...And then I want the window to automatically close when the viewer clicks anywhere else. I want it all.

I know there are scripts that will do this, but I don't know where the <a> element is that I can point that script to.

If ITNV2 can style the new window that would make it even more awesome than it already is.

Thanks again.

thetestingsite
04-30-2008, 10:30 PM
Well, instead of using target (in the line I highlighted above), you could use onclick with a window.open function. You could search around here or the internet for more info about window.open. As for closing with when a new image is clicked, not sure about that one.

Hope this helps.

jscheuer1
05-01-2008, 04:40 AM
You don't really want to be opening a new window, all modern browsers can (depending upon their settings) block that. And, getting the proper dimensions to it, unless they are the same for all of your images, would be tricky and/or tedious. Also, there is no way to truly remove all of the chrome, as security features in all modern browsers will prevent that - they require certain minimal chrome, including something that displays the address. This is to prevent phishing via spoofing another site.

Here's what I would suggest:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Simply install that script on your page as instructed in Step 1 on the above page. Put the tags right before the script tag for thumbnailviewer2.js. Download the distribution files and make them available to your page. Then in the thumbnailviewer2.js file, make it like so:


imageHTML='<a href="'+dest+'" rel="lightbox" onclick="myLightbox.start(this);return false;">'+imageHTML+'</a>'

palmaroca
05-01-2008, 05:55 PM
Thank you John. I like it. I will try that out.

Paul

palmaroca
05-01-2008, 07:34 PM
Lightbox looks great from its demo sample. But Hmm, I tried the lightbox code, but I am missing something because I can't get it to work.

I put the downloaded lightbox files into my root directory and put the links to the lightbox css and script in my header. (BTW, can I put the Lightbox files in their own directory?)

My understanding ends when I get to the code in my <a> tags in the html. There is already a rel attribute from thumbnailviewer2 in that tag. Here's my <td> htlm:

<td><a href="resources/images/maps/cornsjourney.jpg" rel="enlargeimage::click"rev="imagegallery::resources/images/detail_pages/cornsjourney_det.htm"
title="Corn Migration Map, Hampton Brown/National Geographic Publishing <br> <b> CLICK IMAGE FOR DETAIL</b>"">
<img src="resources/thumbnails/cornsjourney_th.jpg"width="46" height="46"></a></td>

TNV2 is already using the href to place the medium sized image in my imagegallery div. How then do I apply lightbox using this medium sized image (resources/images/detail_pages/cornsjourney_det.htm) as the link for lightbox to enlarge the image detail? It's sort of like TNV2 hands off an image to Lightbox, which in turn uses that image as a link to show a third image, a higher res cropped detail from the image gallery image.

Am I being clear? My old page is at:http://paulmirocha.com/portfolio_maps.htm

jscheuer1
05-01-2008, 09:16 PM
OK, it would be easier for me to find the problem if you put up a demo of your best effort at doing this with lightbox.

However, I can already tell you that your code here:



<td><a href="resources/images/maps/cornsjourney.jpg" rel="enlargeimage::click"rev="imagegallery::resources/images/detail_pages/cornsjourney_det.htm"
title="Corn Migration Map, Hampton Brown/National Geographic Publishing <br> <b> CLICK IMAGE FOR DETAIL</b>"">
<img src="resources/thumbnails/cornsjourney_th.jpg"width="46" height="46"></a></td>

should be fine as is. I would have a space here (highlighted and represented as an underscore):


rel="enlargeimage::click"_rev="imagegallery::resou . . .

But that probably isn't critical.

From what you are saying, the problem is probably from not actually making the lightbox resource files available to your page and/or failing to make the modification I outlined to the thumbnailviewer2.js file. Probably the lightbox files availability.

Like, if you have on your page:


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

You should have a folder with your page in it that has three folders off of it:

css
images
js

The lightbox.css file should be in the css folder, the lightbox support images should be in the images folder, and all of the lightbox many scripts should be in the js folder. In other words, just like in the distribution archive. Your images can stay where they are.

palmaroca
05-05-2008, 08:21 PM
I put a demo site up at: http://paulmirocha.com/testing/portfolio_maps.htm

Please do not look at the rest of the site, as it will not function properly. Just look at portfolio_maps.htm, and the two image thumnails on teh very bottom--6th row of the thumbnail table: a map of corn distribution and a diagram of an oil spill. These are the test images. I have tried everything you suggested, and checked it twice, but can't find the missing link. The enlarged images still just come up in the parent window and you have to use trh back button to get back to the main page.

The other thumbnails on that page will work as I originally designed them: not using lightbox.

Any suggestions?

Thanks a lot.

jscheuer1
05-05-2008, 11:26 PM
There could be other problems, but the files:

prototype.js
effects.js
scriptaculous.js

are not where they should be. These actual files should be in the js folder along with lightbox.js. They came with the distribution archive, use them.

I see another problem, you should be using v2.03a:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

It is the most up to date for this purpose (2.04 is out, but it isn't as well suited to all you might want to do with this, though it can be adapted, it won't work 'as is' like 2.03a will with your current setup).

So replace lightbox.js with the file in the 2.03a distribution, and use the other three scripts in the same folder with it. Make folders for and use the updated css and support images that come in the distribution archive.

Everything else looks in order.

palmaroca
05-06-2008, 08:29 PM
John,

IT WORKS! Yippie. Thank you so much. You are brilliant.

Paul

palmaroca
05-06-2008, 08:45 PM
Just one more thing. I want to put the images used by lightbox3 in another directory with my other navigation elements. Are those paths described in the lightbox.js file?

FOr instance, I find this the code in LB3:

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

Not sure where the others are...

jscheuer1
05-07-2008, 12:05 AM
Ah, yes. You will find references near the beginning of lightbox.js for some of these (loading and close). They may be entered there as absolute paths, or if relative, they must be relative to the page using the script, not relative to the script. So, in that spot, I prefer absolute paths. That's all you are using at the moment, so put them wherever you like and set their absolute paths in the script.

An absolute path is like:


http://www.some_domain.com/some_folder/some_file.ext

palmaroca
05-07-2008, 08:37 PM
Thanks.

I asked some other friends to test the site on their computers and one designer told me she had some problems with a a small white box that comes up in the upper left corner of the main image. Then if she trys to look at any other image, that same white blank box stays on top obscuring the main image, and the detailed image never comes up. This was not true of all the images though. She was using Explorer in Windows XP. She raised the question of whether there are differences between how a Mac and a PC might view the js on this page. Is there anything to that?


If you want to look: http://paulmirocha.com/portfolio_maps.htm

jscheuer1
05-08-2008, 07:35 AM
Looks fine in IE under Win XP here. I didn't notice what your one friend did, and the screen shot you posted was too low res for me to tell anything from it. There are two slight problems with the overlay though. This is a frequent issue with IE and this script when the body has margin and/or if the enlarged image and its container are higher than the page. In the first case (this only happened on your page in IE less than 7), you get a little area about 18px wide on the right that runs the height of the window that the overlay will not cover. In the second case (this happened in all IE), the overlay fails to cover 'below the fold', which can only be seen when the page is scrolled down to see the part of the larger image that is below the bottom of the window.

The first issue can be fixed by using this style for the body:


margin:0;

Now that will make the page layout a little differently though. You can compensate in a number of ways, the most universal would be to wrap your content in a container division and give it any desired margin.

The second issue can be resolved as outlined here:

http://www.dynamicdrive.com/forums/showthread.php?t=31787

particularly as mentioned here:

http://www.dynamicdrive.com/forums/showpost.php?p=140167&postcount=2

from that thread. There is a refinement to that approach (to get the code into external files) later in that same thread if you are interested. If so, use the method I outline in post 5:

http://www.dynamicdrive.com/forums/showpost.php?p=140184&postcount=5

from that thread. The rest of the thread after that is about a separate specific issue that isn't of concern here.

1.) I just had another look at the screen shot. Not sure how I missed it the first time, but the answer is still no, nothing like that happened when I viewed the page in IE 6 or 7 in Win XP. It looks like the lightbox image container is persisting after having been dismissed, but it would require some sort of very odd configuration of your friend's browser to make that happen. That or a very rare fluke that even your friend wouldn't be able to repeat.

2.) I just realized that if a person were to get 'click happy' (clicking a lot on the page for no apparent reason) with lightbox while it was loading up an image for the first time, some errors could be induced, and that these would be more likely in IE, due to the very slightly greater length of time that elapses while the larger image is being loaded and displayed in the lightbox. Even so, I was not able to duplicate your friend's exact error.

3.) OK, I was finally able to get it to look just like the screenshot. It took some doing, and IE clearly showed that there was an error on the page. It required that I dismiss the lightbox before it was fully loaded, and then try to bring it back, and then not dismiss it. Refreshing the page and having the patience to wait until an image loaded before dismissing it prevented it from happening again. This would only be much of a problem on slower connections. Still, I really had to work at it to get it at the right moment to get this to happen, and also, even without refreshing, if I just clicked again outside the white area, at least it went away, allowing the thumbnail script to keep functioning. Optimizing your images for smaller byte load would help make this even harder to happen.

It cannot be very common in any case, otherwise I would have heard a lot about it already. I deal with questions on this lightbox script at least three or four times a week.

palmaroca
05-12-2008, 07:03 PM
John,
Thank you very much.

Paul

Djocko
06-12-2008, 02:02 PM
Hi,
I've implemented the logic explained in the thread and it works perfectly!
Here is a link to an example:
http://www.djocko.com/sbenli/tasarim.asp
(small "page" thumbnails change img, then I have a lightbox link)

I was wondering if it's possible to change the source of the small thumbnail image in order to make it clear which one is selected (displayed).
I've tried Dreamweaver's SetNavBarImage but it does not work.
It seems that the thumbnail script and the Dreamweaver's script are not compatible together.

Any help would be greatly appreciated.

jscheuer1
06-12-2008, 05:00 PM
I was wondering if it's possible to change the source of the small thumbnail image in order to make it clear which one is selected (displayed).
I've tried Dreamweaver's SetNavBarImage but it does not work.
It seems that the thumbnail script and the Dreamweaver's script are not compatible together.

Whatever it is that you want to have happen when your little page images are clicked will be (if it is hardcoded to a thumbnail's link) overridden by (in thumbnailviewer2.js):


pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}

You have several options though. I see you currently have:


<a href="/sbenli/images/works/thumb/anadolu_grubu.png"
rel="enlargeimage::click"
rev="ProjectImg::/sbenli/images/works/big/anadolu_grubu.jpg"
onclick="MM_nbGroup('down','group1','thumb1','/sbenli/images/thumb_on.png',0);return false;"
><img src="/sbenli/images/thumb.png" name="thumb1" border="0" id="thumb1" /></a>

The easiest would perhaps be (if it works, and it should) moving your onclick event to the image tag:


<a href="/sbenli/images/works/thumb/anadolu_grubu.png"
rel="enlargeimage::click"
rev="ProjectImg::/sbenli/images/works/big/anadolu_grubu.jpg"
><img src="/sbenli/images/thumb.png" name="thumb1" border="0" id="thumb1"
onclick="MM_nbGroup('down','group1','thumb1','/sbenli/images/thumb_on.png',0);" /></a>

Notes: Since your added onclick event will now be on an image, it no longer needs to return false. I reformatted the code from your page adding line breaks so that it would be easier to read. These added line breaks (the way I added them) will not change the way the code is parsed by the browser.

gkornbluth
09-23-2010, 01:31 PM
Hi all,

I know that this is a pretty old thread, but I've got a question regarding The Thumbnail Viewer II

I'm using Mouseovers to display the enlarged image and the rel attribute to show some text describing the enlarged image. (hope I described that right)

Is it possible to have that text appear above the enlarged image rather than below?

Thanks,

Jerry

jscheuer1
09-23-2010, 04:24 PM
Hi all,

I know that this is a pretty old thread, but I've got a question regarding The Thumbnail Viewer II

I'm using Mouseovers to display the enlarged image and the rel attribute to show some text describing the enlarged image. (hope I described that right)

Is it possible to have that text appear above the enlarged image rather than below?

Thanks,

Jerry

In the current version (last updated May 2010) near the beginning of the thumbnailviewer2.js script, you will see:


jQuery.thumbnailviewer2={
loadmsg: '<img src="spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

/////NO NEED TO EDIT BEYOND HERE////////////////

dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
buildimage:function($, $anchor, setting){
var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />'
if (setting.link)
imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
imghtml='<div>'+imghtml+((setting.enabletitle && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},

showimage:function($image, setting){
$image.stop()[setting.fxfunc](setting.fxduration, function(){
if (this.style && this.style.removeAttribute)
this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
})
}

}

The highlighted line is where it places the title/text below the enlarged image. If you were to change that line to:


imghtml='<div>'+((setting.enabletitle && $anchor.attr('title')!='')? $anchor.attr('title')+'<br />' : '')+imghtml+'</div>'

it will place it above the enlarged image.

gkornbluth
10-03-2010, 07:33 PM
Sorry I didn't get an e-mail and only now found your response

Thanks very much,

Jerry

gkornbluth
10-04-2010, 06:48 PM
Hi John,

Thanks again for the quick response. Your fix worked perfectly and I can now show the titles above the enlarged images.

One small request...

In a post regarding a previous version of the script

http://www.dynamicdrive.com/forums/showthread.php?t=32222

I asked about hiding the tooltips (titles) from appearing over the thumbnails. You suggested a fix that involved changing one of the lines of code in the script and I'm a little afraid to start mucking about on my own.

Could you take a look when you can and offer a similar fix for the new version?

Thanks again,

Jerry Kornbluth

jscheuer1
10-04-2010, 07:59 PM
Since then I realized that there's an easier and better solution that works for any version, in fact for any linked image where you don't want the title attribute of the link showing up as a 'tooltip' on hover of the image.

Just put a different title or an empty title on the image tag. Say you have something like:


<a title="<h1>TEST</h1> Some <br> <a href='#'> Description</a>"
href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click">
<img border="0" src="images\tmb_M_1.jpg" width="91" height="61"></a>

Add the highlighted (alternate title for the image, user sees that instead):


<a title="<h1>TEST</h1> Some <br> <a href='#'> Description</a>" href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click">
<img title="What you want the user to see on hover" border="0" src="images\tmb_M_1.jpg" width="91" height="61"></a>

Or (an empty title for the image, user sees nothing onmouseover):


<a title="<h1>TEST</h1> Some <br> <a href='#'> Description</a>" href="images\M_1.png" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click">
<img title="" border="0" src="images\tmb_M_1.jpg" width="91" height="61"></a>

gkornbluth
10-04-2010, 10:16 PM
Hi John,

Sorry, but I don’t think I’m understanding something correctly.

On a rollover I’m trying to show titles above the enlarged images and don’t’s ever want to show any tooltips over the thumbnails.

When I follow what I think you’re suggesting, with the first block of code I get a title over the enlarged image which says TEST with a line break, the word “Some”, then another line break, and then a link that says Description.

I also get a tooltip over the thumbnail which say “Here’s the title text”:

<a title="<h1>TEST</h1> Some <br> <a href='#'> Description</a>"
href="images/1-1.jpg" rel="enlargeimage" rev="targetdiv:loadarea">
<img title="Here’s the title text" border="0" src="images/1-1.jpg" width="91" height="61"></a>

And when I use the code below with an empty “title”, I still get a title over the enlarged image which says TEST with a line break, the word “Some”, then another line break, and then a link that says Description.

But now, I get a tooltip over the thumbnail say <h1>TEST</h1> Some <br> <a href='#'> Description</a>:

<a title="<h1>TEST</h1> Some <br> <a href='#'> Description</a>"
href="images/1-1.jpg" rel="enlargeimage" rev="targetdiv:loadarea">
<img title="" border="0" src="images/1-1.jpg" width="91" height="61"></a>

You can see the test here:

http://173.83.154.86/viewer-2010-4.php

Thanks,

Jerry

jscheuer1
10-05-2010, 12:00 AM
You're (depending upon the browser) right. The interpretation of the specification on the title attribute has changed since I worked this out. Apparently Opera (with a twist) and IE still behave in the old manner. Chrome and Firefox each have their own take. None (except IE) work as I expected in all cases.

I have an idea as to how to solve this. It will take editing the script and either using the HTML 5 standard data-whatever attribute (non-standard/invalid for all other DOCTYPES), adding on to the rev attribute (in place of using the title attribute) or adding a bit more code to the script. Right now I'm favoring the last option, with a toggle in the rev attribute in case you do want the title attribute as a tooltip as well as the caption.

I'll let you know how it comes out. Shouldn't take long once I get to it, which might be soon.

gkornbluth
10-05-2010, 12:39 AM
Thanks John,

it's great to have caring knowledgeable folks like you around to help us poor programmingly challenged web designers.

I look forward to what you come up with.

Jerry

jscheuer1
10-05-2010, 02:52 AM
OK, here's what I did. I sort of combined some of the options I was thinking about and added your custom positioning of the description as an option.

New options:


hidetitle:yes|no - defaults to no.
descriptiontop:yes|no - defaults to no.

There are two methods that may be used to hide the title. If you are using HTML 5, you may set the description text as the data-title attribute:


<a data-title="<h1>TEST1</h1> Some <br> <a href='#'> Description</a>" href=" . . .

You may do this with other DOCTYPES and it will work, but the HTML code will not pass validation. You may instead simply use the title attribute:


<a title="<h1>TEST1</h1> Some <br> <a href='#'> Description</a>" href=" . . .

and set the hidetitle:yes in the rev attribute:


rev="targetdiv:loadarea,hidetitle:yes"

Thats where you would set the descriptiontop property as well:


rev="targetdiv:loadarea,hidetitle:yes,descriptiontop:yes"

I know you probably want to use both of these options as the defaults so that you don't have to add them to each link's rev attribute. You may edit the script to do so, here (near the top):


/*Image Thumbnail Viewer II (May 19th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Last updated: Sept 26th, 2010: http://www.dynamicdrive.com/forums/showthread.php?t=57892
//Unofficial update Oct 4 2010: http://www.dynamicdrive.com/forums/showpost.php?p=238611&postcount=27

jQuery.noConflict()

jQuery.thumbnailviewer2={
loadmsg: '<img src="spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

/////NO NEED TO EDIT BEYOND HERE////////////////

dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes', descriptiontop:'no', hidetitle:'no'}, //default settings

Scroll the code block to see them and change both red no's to yes.

Here's the script:

3575

gkornbluth
10-05-2010, 05:03 PM
John,

You are certainly amazing. The changes that you made to the script make the viewer into a really flexible and easy to use tool.

I’ve implemented the new js version on this rather complex cms page and it’s almost perfect. Just one detail to go.

http://www.terrerybovich.com/artworka1.php?group_code=Icons

Using the :link option as:

rel="enlargeimage" rev="targetdiv:loadarea,link:<?php echo $record['_link'] ?>”>

I’ve got the enlarged images linking to a detail page for the image that’s showing.

In the layout that I’ve set up, as you can see, it can be extremely difficult to mouse to the enlarged image to click on it without rolling over other thumbnails.

It would be much more user friendly if the thumbnails were active links to the same _link url as well, (I had done this on the earlier version of the viewer), but clicking on a thumbnail now only shows a full sized version of that thumbnail.

I’m probably going to be embarrassed that I’ve missed a really simple solution, but everything that I’ve tried to implement the links breaks the functionality of the viewer.

I’d really appreciate any insights that you can offer using the simple test code below.

Thanks again,

Jerry




<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" valign="top">

<!--This image will show as the enlarged image on rollover-->
<a title="Test Title"
href="images/enlarged.jpg" rel="enlargeimage" rev="targetdiv:loadarea,link:http://mysite.com">
<!-- This image will show as the thumbnail -->
<img border="0" src="images/thumb.jpg" width="91" height="61"></a>

</td>
<td width="80">
<div id="loadarea" style="width:510px; height: 220px"></div>
</td>
</tr>
</table>

jscheuer1
10-13-2010, 06:50 AM
I think the easiest (and the most intuitive from your user's perspective) way to resolve this would be to change the method to click, changing for example (what resolves to):


rev="targetdiv:loadarea,link:/artworkadetail.php?Icon-2-40"

to:


rev="targetdiv:loadarea,trigger:click,link:/artworkadetail.php?Icon-2-40"

And changing your instructions:


Roll Over Any Thumbnail For A Larger Image
Click For More Information

to:


Click Any Thumbnail For A Larger Image
Click Larger Image For More Information

However, you could instead add this script to the page:


<script type="text/javascript">
jQuery(function($){
$('a[rel=enlargeimage]').click(function(e){
e.preventDefault();
var rev = $(this).attr('rev').split(','), link;
$.each(rev, function(){
if($.trim(this).indexOf('link') === 0){
location.href = this.substring(5);
}
});
});
});
</script>

For some browsers you may need to use the absolute path here:


rev="targetdiv:loadarea,link:http://www.terrerybovich.com/artworkadetail.php?Icon-2-40"

gkornbluth
10-14-2010, 07:32 PM
Thank you John,

The fix works perfectly in IE 7 and 8, FF, Opera and Chrome. I opted for the script insert because Terre wants to keep the rollover function.

Never could have done it without you!

Thanks,

Jerry

jscheuer1
10-15-2010, 07:00 AM
By the way, you have a script error on about all your pages. It's being generated by the body onload event, which in turn appears to be generated, at least in part by PHP, and therein lies the problem. If I use the browser's 'view source', this is what I (for example on drawings.php) see:


<body onload="MM_preloadImages('Array','/cmsAdmin/uploads/thumb/2010-home-1.png','/cmsAdmin/uploads/thumb/2010-home-2.png','/cmsAdmin/uploads/thumb/2010-drawings-1.png','/cmsAdmin/uploads/thumb/2010-drawings-2.png','/cmsAdmin/uploads/thumb/2010-shows-1.png','/cmsAdmin/uploads/thumb/2010-shows-2.png','/cmsAdmin/uploads/thumb/2010-about-1.png','/cmsAdmin/uploads/thumb/2010-about-2.png','/cmsAdmin/uploads/thumb/2010-contact-1.png','/cmsAdmin/uploads/thumb/2010-contact-2.png','
Notice: Undefined offset: 5 in /hsphere/local/home/terreryb/terrerybovich.com/drawings.php on line 111
','
Notice: Undefined offset: 5 in /hsphere/local/home/terreryb/terrerybovich.com/drawings.php on line 111
')">

Unless that's fixed, none of those images will get preloaded.