Results 1 to 6 of 6

Thread: Image Thumbnail Viewer II

  1. #1
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image Thumbnail Viewer II

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    ;(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:

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

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

    Code:
    rel="enlargeimage::mouseover::loadarea2::someother.gif::::http://www.google.com/"
    Last edited by jscheuer1; 10-10-2008 at 01:03 PM. Reason: add code to hide extra image if main script hides its image
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you I will try and..

    IRC3455

  5. #5
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    IT WORKED GREAT.

    irc3455

  6. #6
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mouseover to open a HTML page

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •