Image Thumbnail Viewer II

[imtiaz]

Image Thumbnail Viewer II

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: I am using this script with Thumbnail images with mouseover its works great and opens a large image as its is ment to. What I wish to do is also open another image in another table is this possible. Please help have spent the whole day try to figure this one.

Image 1... Largimage(Table1)
Image 2... Largeimage(Table1) small image(table 2)


Thanks
IRC3455

[jscheuer1]

Well the table(s), you can lay them out however you like, just put your load area(s) in them where desired.

Add this code in the head of your page just before the tag for thumbnailviewer2.js:

<script type="text/javascript">
;(function(){
var extraOver = function(e){
e = e || window.event;
var t = e.target? e.target : e.srcElement? e.srcElement : null;
if(t)
t = t.rel && /enlargeimage::mouseover/.test(t.rel)? t : t.parentNode? t.parentNode : null;
if(!t) return;
if(t.rel && /enlargeimage::mouseover::.+::.+/.test(t.rel)){
var l = document.getElementById(t.rel.split('::')[2]),
i = document.createElement('img');
while (l.lastChild) l.removeChild(l.lastChild);
i.src = t.rel.split('::')[3];
l.appendChild(i);
};
};
if(window.addEventListener)
document.addEventListener('mouseover', extraOver, false);
else if (window.attachEvent)
document.attachEvent('onmouseover', extraOver);
})();
</script>

The thumbnailviewer2 will still act just as before, but now we can optionally add a second loadarea and image to any given link. So using the code given on the demo page for a single mouseover/large image event:

<a href="bulb.gif" rel="enlargeimage::mouseover" rev="loadarea">Thumbnail</a>

You can add:

<a href="bulb.gif" rel="enlargeimage::mouseover::loadarea2::someother.gif" rev="loadarea">Thumbnail</a>

[jscheuer1]

I got a little carried away with this one and decided to add in options for most of the functionality of the original script to this enhancement. The script code is now:

;(function(){
 var extraOver = function(e){
  e = e || window.event;
  var t = e.target || e.srcElement || null;
  if(t)
   t = t.rel && /enlargeimage::mouseover/.test(t.rel)? t : t.parentNode? t.parentNode : null;
  if(!t) return;
  if(t.rel && /enlargeimage::mouseover::.+::.+/.test(t.rel)){
   var s = t.rel.split('::'), l = document.getElementById(s[2]), l2 = l,
   i = document.createElement('img');
   i.style.border = 'none';

  if (thumbnailviewer2.hideimgmouseout && !t.onmouseout.altered){
   t.onmouseout = function(){
    thumbnailviewer2.hideimage(this);
    while (l2.lastChild) l2.removeChild(l2.lastChild);
   };
  t.onmouseout.altered = true;
  };

   if (thumbnailviewer2.iefiltercapable){ //Is this an IE browser that supports filters?
    if (document.getElementById('ie_w$u234'))
     l.style.background = 'url(' + document.getElementById('ie_w$u234').src + ') no-repeat 0 0';
    i.id = 'ie_w$u234';
    i.style.filter = thumbnailviewer2.iefilterstring;
    i.style.visibility = 'hidden';
    i.onload=function(){ //When enlarged image has completely loaded
     i.style.visibility = '';
     i.filters[0].Play();
    };
    i.onerror=function(){ //If an error has occurred while loading the image to show
     i.style.visibility = '';
     i.filters[0].Stop();
    };
   };

   while (l.lastChild) l.removeChild(l.lastChild);

   if (s[5]){
    var a = document.createElement('a');
    a.href = s[5];
    l.appendChild(a);
    l = a;
   };
   if (!thumbnailviewer2.iefiltercapable)
    i.src = s[3];
   l.appendChild(i);
   if (thumbnailviewer2.iefiltercapable){
    i.filters[0].Apply();
    i.src = s[3];
   };
   if (s[4] && s[4] != ''){
    var br = document.createElement('br');
    l2.appendChild(br);
    l2.appendChild(document.createTextNode(s[4]));
   };
  };
 };

if(window.addEventListener)
 document.addEventListener('mouseover', extraOver, false);
else if (window.attachEvent)
 document.attachEvent('onmouseover', extraOver);
})();

and may as well simply be added at the end of the thumbnailviewer2.js file.

The syntax to use it is the same as before, but now you it will carry out the IE transition (if enabled in the main script) on the added image, and you can add a caption and/or link the larger image. To add just a caption:

rel="enlargeimage::mouseover::loadarea2::someother.gif::some caption"

caption and link:

rel="enlargeimage::mouseover::loadarea2::someother.gif::some caption::http://www.google.com/"

link only:

rel="enlargeimage::mouseover::loadarea2::someother.gif::::http://www.google.com/"

[imtiaz]

Thank you I will try and..

IRC3455

[imtiaz]

IT WORKED GREAT.

irc3455

[imtiaz]

can I change this so on a mouseover I open a HTML page rather then a image in some cases. is this possible please help.

IRC3455