AutoLoad Image Thumbnail Viewer

**catalinaudrey** · 10-17-2007, 03:21 AM

Script: Image Thumbnail Viewer
Link: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

problem:

referr to: http://www.catalinaudrey.com/index3.html

i try to make the 'welcome' to Automatically loaded(showed) when visitors come, so the default page would be like when 'Welcome' is clicked.

so far i try <body onload=loadimage('link')>;

but not successful.

please help...

thank you.

**jscheuer1** · 10-17-2007, 08:29 AM

Since welcome is your first rel="thumbnail" link, you can just add this (red) to the init function in the thumbnailviewer.js file:

Code:

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
if(!window.opera&&!pagelinks[i].attachEvent)//added to remove outline stlye in FF
this.dotask(pagelinks[i],function(){this.style.outlineStyle='none'},'mouseover') //"
pagelinks[i].onclick=function(){
if(!window.opera){//added to remove outline stlye in FF
this.blur();
this.style.outlineStyle='';
}
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")

this.targetlinks[0].onclick.apply(this.targetlinks[0]);
} //END init() function

**catalinaudrey** · 10-17-2007, 12:16 PM

After 48+ hours of Googling for it...

Feel like it is a magic after applying your code

Thanks jscheuer1!

**catalinaudrey** · 10-22-2007, 03:54 PM

because now i can do autoload of image, some time the image will cover the navigation menu (depend on screen setting).

my question is, how to apply some space on the top of the page so that i can display menu on the top of the page and the image will show below the menu. -so the image will not cover the menu-

i've just tried version 2 which has loadarea, my point is like having a loadarea.

i wish i could program it myself, but am only good in copy and paste

thanks.

**jscheuer1** · 10-22-2007, 04:24 PM

There are all kinds of ways to layout a page. Much would depend upon what you already have. A basic method is to put one thing int one division and follow it by another thing in another division, ex:

HTML Code:

<div>

Menu goes here

</div>

<div>

Other stuff goes here

</div>

If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**catalinaudrey** · 10-22-2007, 04:27 PM

the link is http://www.catalinaudrey.com

depending on the screen area setting, some people can not see the menu on the left because it is hidden by the image.

thanks!

**catalinaudrey** · 10-22-2007, 04:31 PM

sorry, but <div> doesn't seem to be working.

i feel a bit guilty to say it as you tried to help but it doesn't work...

thanks

**jscheuer1** · 10-22-2007, 05:19 PM

Don't feel badly. I did say it was basic, and that it would depend upon what you already have. However, I didn't even see a menu on the page you linked to (I used the link in your first post), because I must have had an old version cached. I see the situation now, and without getting into detail, I would suggest putting the menu horizontally across the top of the page with the image area beneath it.

**catalinaudrey** · 10-23-2007, 01:14 AM

thanks for the idea john,

and for those who need to know how to set a space on top of the object, please refer to thumbnailviewer.js and look at the centerDiv function, i only change the value of the bolded number below...

...
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+100+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
...

Thread: AutoLoad Image Thumbnail Viewer

Thread Tools

Search Thread

AutoLoad Image Thumbnail Viewer

Thank you!

applying some space on the top of the page

Bookmarks

Bookmarks

Posting Permissions