resizing picture to fit height of the window + issue with iframe

[cyriak]

hey

I'm doing an html page that I will use local on a DVD, not for web publication .
And I ran into different issues:
check the test I uploaded there :
http://zeb.3dvf.net/test/main_ref.html

So first if you open any of the portrait picture ( try the last ones) the picture won;t resize to the height of the windows. and I really would like it to behave like that...any idea with CSS , java script? I can't do any php or asp because it won't be linked to a server just standalone on a dvd.

and the second problem is that when you're on the gallery and you scroll down then when you open a picture it will display the link in the iframe witht he same scrolling, is it possible to reset the previosu scrolling memory and reset the display to start from the top?

not sure any of my question are really clear to understand. just let me know

[jscheuer1]

Both of your problems would be solved if you abandon the iframe and use this script:

http://javascriptkit.com/script/script2/divviewer.shtml

[cyriak]

this is an amazing script thank you so much

[cyriak]

Ok, so I tried to implement that into my page there :

http://zeb.3dvf.net/test2/main_ref.html

the javascript is applied just on the first 3 thumbnails under the construction section... ( too lazy to add it on every thumb ? )

so it's not behaving correctly with mozilla, the window is up left and the icon to close the page is off down left... I guess many other things are not showing up ( navigation links etc... )

on IE7 it's centered and with the icon on the right place( navigation links lost ? or not setup ? ...my bad ?) but still if I scroll the page before hitting the thumb the constraint to resize the picture is not working correctly, the picture get resized but not enough to fit in the view....


I don;t want to want to break the script and my knowledge in Java is really minimal, anyone can help ?

thanks

[jscheuer1]

I'm not at all familiar with that script, but have seen many that do similar sorts of things. One must be very careful to install them according to the instructions. Especially important is where in your code that you place the script or (if it has them like this one does) the various parts of the script. This is because these sorts of scripts generate absolutely positioned elements to hold the overlay and its contents. If these elements somehow fall inside something else on your page which can contain them or are placed outside of the section of the page where they belong, it will throw things off. Also, if there are conflicting styles, this can happen. Sometimes, extra thought is required to ensure that the elements generated by the script do not end up falling within any other elements on your page or get affected by any other styles on or linked to the page.

Start out with a basic page and get the script working with that. Then carefully add in your other content and styles, a bit at a time to see what is throwing it off.

Also, I noticed that your page has some kind of thing going on that is separating the action of the scrollbar from the body and placing it just upon the section of images. You may not be able to both use this script and this effect on the same page.

One other thing I noticed. The demo page for the script has no DOCTYPE. Remove yours, this may be all that is required to fix things.

[jscheuer1]

The DOCTYPE issue is the major problem, there may or may not be other minor issues.

Here is a version of the script that will work with your DOCTYPE:

Attachment 1151

[cyriak]

thanks a lot for your help, I will try that as soon as possible

[cyriak]

I might be really idiot ,

I'm trying to setup different arrays this way :

var art = new Array();
art[0] = '<img src="_references/Art/giacomo_cerruti_01.jpg" width="1106" height="770">';
art[1] = '<img src="_references/Art/maerten_boelema_de_stomme_01.jpg" width="1098" height="804">';
art[2] = '<img src="_references/Art/meiffren_conte_01.jpg" width="1146" height="850">';
art[3] = '<img src="_references/Art/pieter_claesz_01.jpg" width="1100" height="777">';
art[4] = '<img src="_references/Art/pieter_claesz_02.jpg" width="1033" height="717">';
art[5] = '<img src="_references/Art/pieter_claesz_03.jpg" width="932" height="670">';
art[6] = '<img src="_references/Art/schooten_01.jpg" width="1201" height="770">';
art[7] = '<img src="_references/Art/van_dijck_03.jpg" width="2048" height="1255">';
art[8] = '<img src="_references/Art/vandijck_01.jpg" width="1126" height="770">';
art[9] = '<img src="_references/Art/vandijck_02.jpg" width="1170" height="721">';
art[10] = '<img src="_references/Art/willem_claeszoon_heda_01.jpg" width="1256" height="1033">';
art[11] = '<img src="_references/Art/willem_claeszoon_heda_02.jpg" width="2024" height="1490">';
art[12] = '<img src="_references/Art/willem_claeszoon_heda_03.jpg" width="1055" height="1049">';
art[13] = '<img src="_references/Art/willem_claeszoon_heda_04.jpg" width="831" height="1024">';
art[14] = '<img src="_references/Art/willem_claeszoon_heda_05.jpg" width="1166" height="760">';

{
dv.setAllImagesArray(art);
}

var const = new Array();
const[0] = '<img src="_references/Construction/old_house_01.jpg" width="1728" height="1152">';
const[1] = '<img src="_references/Construction/old_house_02.jpg" width="1152" height="1728">';
const[2] = '<img src="_references/Construction/old_house_03.jpg" width="1728" height="1152">';
const[3] = '<img src="_references/Construction/old_house_04.jpg" width="1728" height="1152">';
const[4] = '<img src="_references/Construction/reflective_clay_tiles_01.jpg" width="1152" height="1728">';
const[5] = '<img src="_references/Construction/reflective_concrete_floor_02.jpg" width="1728" height="1152">';
const[6] = '<img src="_references/Construction/reflective_concrete_floor_03.jpg" width="1152" height="1728">';
const[7] = '<img src="_references/Construction/reflective_vinyl_floor_01.jpg" width="1119" height="1314">';
{
dv.setAllImagesArray(const);
}

but when I click on thumbnaisl nothing happens, the script is fine , if I just set up the first array. but trying to do a second one confuse everything . Am I doing anything wrong with the syntax ?
or is it not possible to achieve ?

thanks
Cyriak

[jscheuer1]

That's not at all how the script is used. Follow the installation instructions.

[cyriak]

Well I believe I did...

I know he's using one pic or link to call the slideshow , but I was trying to adapt it to my webpage which as many thumbs and each of them should be calling the slideshow which could show all the pics of the same section...

I linked the variable this way :

<a href="#" onclick="dv.showDV(art[0]); return false; "><img align="center" alt="giacomo_cerruti_01.jpg" src="images/ref_art/giacomo_cerruti_01.jpg" width="210" height="149" title="giacomo_cerruti_01.jpg" border="1"></img></a>

/* usage: append the function "dv.showDV('<img ...>')" */
/* to a certain event. */
/* the image-tag needs to consist of the width */
/* and height-attribute. to avoid the problem of */
/* multi-nested single and double apostrophe use */
/* a javascript variable for the image-tag. eg.: */
/* var myPic = '<img src="myPic.jpg" width="800" height="500">'; */
/* */
/* to use the before-next-functionality you have to provide an array */
/* which consists of all img-tags to the dv-instance. eg.: */
/* var myPic = new Array(); */
/* myPic[0] = '<img src="myPic.jpg" width="800" height="500">'; */
/* dv.setAllImagesArray(myPicArray); */
/* */
/* example: <a href="#" onClick="dv.showDV(myPic);">click here</a> */

I guessed it would work with many arrays, at least it worked with just one , I uploaded a page with the array working for the first section there :
http://zeb.3dvf.net/test2/main_ref.html

Is there really anything I can do to achieve the treatment I'm looking for ?