Results 1 to 3 of 3

Thread: Thumbnail Viewer 2 - Loadarea2 + Active Text

  1. #1
    Join Date
    May 2007
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thumbnail Viewer 2 - Loadarea2 + Active Text

    1) Script Title: Thumbnail Viewer 2

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

    3) Describe problem: Hi. Strange problems.

    1.The portrait format pics in this http://petersearle.com/test1/page1.html load correctly (loadarea2) but only sometimes (occasionally they load a new page)

    2.The active thumbs (text) in this list http://petersearle.com/test1/list.html will not stay highlighted.
    I have had this before with borders and was kindly given some text by John which I have tried to edit (ie. .thumb) but I think I just broke it!

    Can anyone please help? Thanks.

  2. #2
    Join Date
    May 2007
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Again,
    Still no luck.
    I found this on an old posting and thought it may help
    onclick="return false;"
    for the page loading problem but unfortunately it didn't.
    Does anyone have any ideas on this please?

  3. #3
    Join Date
    May 2007
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi. Just a note to say that I have simplified this site using just one loadarea
    and some compromise.
    http://petersearle.com/test1/page1.html


    Still working on how to make text link and activated click thumbnails (as in example 2 here) http://www.dynamicdrive.com/dynamici...thumbnail2.htm
    stay active.

    Does anyone know? http://petersearle.com/test1/list.html

    Possibly editing this script from "mouseover" to 'Click"
    But How? Please help.

    Put something like this in the head of the page:

    Code:
    <style type="text/css">
    .thumb {
    border:4px solid white;
    }
    </style>
    The width of the border is up to you, the color should be the same as the background color behind the thumbnails or a color of your choosing that indicates that a thumbnail is inactive.

    Give each thumbnail a class name of thumb:

    Code:
    <a href="photo1.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img class="thumb" src="photo1_tbn" width="50" height="50"></a>
    Put this script at the end of the page, just before the closing </body> tag:

    Code:
    <script type="text/javascript">
    (function(){
    var i=0, t=document.images, hlight=function(e){
    var e=e? e : window.event;
    var el=e.target? e.target : e.srcElement;
    for (i = 0; i < t.length; i++)
    if(t[i].className=='thumb')
    t[i].style.borderColor='';
    el.style.borderColor='navy'; //Edit hightlight color as desired.
    }
    for (i = 0; i < t.length; i++)
    if(t[i].className=='thumb')
    if ( typeof window.addEventListener != "undefined" )
    t[i].addEventListener( "mouseover", hlight, false );
    else if ( typeof window.attachEvent != "undefined" )
    t[i].attachEvent( "onmouseover", hlight );
    else {
    if ( t[i].onmouseover != null ) {
    var oldOnmouseover = t[i].onmouseover;
    t[i].onmouseover = function ( e ) {
    oldOnmouseover( e );
    hlight(e);
    };
    }
    else
    t[i].onmouseover = hlight;
    }
    })();
    </script>
    __________________
    WWWWWWWWWWWW
    - John WWWWWWWWWWWW . . . My other title is: Global Moderator

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
  •