PDA

View Full Version : resizing picture to fit height of the window + issue with iframe



cyriak
08-01-2007, 05:42 PM
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
08-02-2007, 03:18 AM
Both of your problems would be solved if you abandon the iframe and use this script:

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

cyriak
08-02-2007, 04:03 AM
this is an amazing script :) thank you so much ;)

cyriak
08-02-2007, 04:42 PM
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
08-02-2007, 09:22 PM
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
08-02-2007, 10:03 PM
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:

1151

cyriak
08-02-2007, 10:17 PM
thanks a lot for your help, I will try that as soon as possible

cyriak
08-04-2007, 07:20 AM
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
08-04-2007, 07:35 AM
That's not at all how the script is used. Follow the installation instructions.

cyriak
08-04-2007, 08:03 AM
Well I believe I did... :confused:

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 ?

jscheuer1
08-04-2007, 08:57 AM
Ooops, my mistake, sorry. I was just going by the instructions on the demo page. Like I had said, I'm really not familiar with this script. There may not be any way to use multiple arrays with this script without a major rewrite, or it may be a relatively simple thing that needs to be done to allow it. I will have a look now, and if it is easy and jumps out at me, I'll post the result soon.

jscheuer1
08-04-2007, 09:43 AM
No luck, except that I can see that it would take a major rewrite. In its current form, the script only allows for one array. You could have all the images be in one array, or you could revert to the 'define each image as a unique variable method'.

By the way, you should use the alt attribute for the images, ex:


art[0] = '<img src="_references/Art/giacomo_cerruti_01.jpg" width="1106" height="770" alt="Still Life">';

or:


art[0] = '<img src="_references/Art/giacomo_cerruti_01.jpg" width="1106" height="770" alt="">';

In the first case you will have a hover 'tip' of "Still Life" when you go over that image in the viewer. In the second case, there will be no tip, but you will avoid a tip of "undefined" as it will have in some browsers if no alt attribute is set.

cyriak
08-04-2007, 10:31 AM
well thanks a lot for all your quick answers and for your time
it's been really helpfull so far.
I think I will probably do the method with one array only to browse everything and add a display of the picture path to the user know what section he's looking at in slideshow mode.

for the alt I added them in the html not in the array, is that wrong ?

jscheuer1
08-04-2007, 05:22 PM
You should put the alt attributes that I am talking about in the variable/array definitions, as shown in my previous post and below. You may also use them in your HTML code with your images if you like, where they will act as ordinary alt attributes.

I figured out how to modify the script to do multiple arrays. The code has changed a lot, but the usage is almost the same as before. There is a new configuration that needs to be attended to in the new DV.js file:


//create DV-Objects use only as many as you need, you need one per array
//if using the array method, only one if using the variable method
var dv = new DVObject();
var dv2 = new DVObject();

Here is a sample of how to setup the two arrays initialized by the above (the below code goes, as before, in the head after the main script tag):


<script type="text/javascript">
//Define your image array using a unique variable:
var mypic=new Array();
mypic[0] = '<img src="../../side/1st.jpg" width="1500" height="1000" border="0" alt="Test Alt">'
mypic[1] = '<img src="../../nano_nanner.jpg" width="215" height="250" border="0" alt="">'
mypic[2] = '<img src="../../side/files/photo1.jpg" width="140" height="225" border="0" alt="">'
mypic[3] = '<img src="../../side/files/photo2.jpg" width="140" height="225" border="0" alt="">'
mypic[4] = '<img src="../../side/files/photo3.jpg" width="140" height="225" border="0" alt="">'
mypic[5] = '<img src="../../side/files/photo4.jpg" width="140" height="225" border="0" alt="">'
//Initialize your image array using the variable set for it in the DV.js file as a prefix:
dv.setAllImagesArray(mypic);

//Define your image array using a unique variable:
var mypic2=new Array();
mypic2[0] = '<img src="../../side/files/photo5.jpg" width="140" height="225" border="0" alt="">'
mypic2[1] = '<img src="../../side/files/photo6.jpg" width="140" height="225" border="0" alt="">'
mypic2[2] = '<img src="../../side/files/photo7.jpg" width="140" height="225" border="0" alt="">'
mypic2[3] = '<img src="../../side/files/photo8.jpg" width="140" height="225" border="0" alt="">'
mypic2[4] = '<img src="../../side/files/photo9.jpg" width="140" height="225" border="0" alt="">'
//Initialize your image array using the variable set for it in the DV.js file as a prefix:
dv2.setAllImagesArray(mypic2);
</script>

Then in the body:


<p><a href="#" onClick="dv.showDV(mypic[0]); return false">big</a><br>
<a href="#" onClick="dv.showDV(mypic[1]); return false">nanner</a><br>
<a href="#" onClick="dv.showDV(mypic[2]); return false">p1</a><br>
<a href="#" onClick="dv.showDV(mypic[3]); return false">p2</a><br>
<a href="#" onClick="dv.showDV(mypic[4]); return false">p3</a><br>
<a href="#" onClick="dv.showDV(mypic[5]); return false">p4</a></p>

<p><a href="#" onClick="dv2.showDV(mypic2[0]); return false">p1 b</a><br>
<a href="#" onClick="dv2.showDV(mypic2[1]); return false">p2 b</a><br>
<a href="#" onClick="dv2.showDV(mypic2[2]); return false">p3 b</a><br>
<a href="#" onClick="dv2.showDV(mypic2[3]); return false">p4 b</a><br>
<a href="#" onClick="dv2.showDV(mypic2[4]); return false">p5 b</a></p>

Notice how both in the on page script and the HTML code the first uses dv and mypic, the second uses dv2 and mypic2. The dv and the dv2 refer to the ones set in the DV.js file.

Here is the new DV.js file:

1157

cyriak
08-04-2007, 09:22 PM
thanks a million times for your help john

this is working, I can change just the number of the variable rather than the name itself but it works finr for me this way ( aka var ref1, ref2 etc... )
on thing is the loading text stay on the page, it doesn't fade out .I will remove it anyway as I'm using it locally , but just so you know.

jscheuer1
08-05-2007, 01:01 AM
Oddly, I noticed that bit with the loading text at first, but it went away after I used it just a little bit and never came back except as needed, like when an image was loading. I'm not sure what you say you are doing differently than what I recommended, if anything. It sounds like you are doing something a little differently though. But, since you haven't updated your live page, I cannot tell for sure. As long as you are getting the results you want, I guess whatever you are doing is fine.

cyriak
08-05-2007, 10:29 AM
hey john

I'm moving forward with my page, almost done, I just need to know one thing :
is there a quick way to extract the path( and/or the title) of the picture shown in the slideshow and then display it automatically using the script?

jscheuer1
08-05-2007, 02:44 PM
I figured out the problem with the L.O.A.D.I.N.G thing happening sometimes when it isn't desired. The original script did this:


// # checkLoad
DVObject.prototype.checkLoad = function() {
if(document.images["picDV"].complete==false || dv.img.src=="") {
window.setTimeout("dv.checkLoad()", 200);
} else {
with(dv.childDVLoad.style) {
visibility = "hidden";
}
}
};

to prevent that. That got changed to (in the version I gave you):


// # checkLoad
DVObject.prototype.checkLoad = function() {
if(document.images["picDV"+this.id].complete==false || this.img.src=="") {
window.setTimeout("this.checkLoad()", 200);
} else {
with(this.childDVLoad.style) {
visibility = "hidden";
}
}
};

But, that simply will not do because the timeout cannot remember what 'this' is by the time it fires. However, if you replace it all with:


// # checkLoad
DVObject.prototype.checkLoad = function() {
if(document.images["picDV"+this.id].complete==false || this.img.src=="") {
var cacheobj=this;
window.setTimeout(function(){cacheobj.checkLoad();}, 200);
} else {
with(this.childDVLoad.style) {
visibility = "hidden";
}
}
};

That functionality is restored.

On to your other question. When you have something like so:


mypic[0] = '<img src="../../side/1st.jpg" width="1500" height="1000" border="0" alt="Title for This Image">'

That alt attribute gets passed to the large image as its title attribute. So, using that existing functionality we can add/alter some code in here (changes/additions red):


// # showDV()
DVObject.prototype.showDV = function(imgString) {
//hide the old image
this.hideDV();

//does the parameter consist of the correct values
this.checkImgParameter(imgString);
if(this.errorMessage=="") {
//calculate the dimension of parentDV and childDVContent
var width = this.img.width + 2*borderDV + 2*spaceDV;
var height = this.img.height + 2*borderDV + 2*spaceDV;
var mid = this.getMiddlePosition(width, height);

//swap the default-image
with(this.swapImg) {
src = this.img.src;
title = this.img.alt;
alt = this.img.title;
width = mid["width"] - (2*borderDV + 2*spaceDV);
height = mid["height"] - (2*borderDV + 2*spaceDV);
}
with(this.parentDV.style) {
width = mid["width"] - (2*borderDV + 2*spaceDV)+'px';
height = 'auto';
top = mid["top"] + borderDV + spaceDV+'px';
left = mid["left"] + borderDV + spaceDV+'px';
visibility = "visible";
backgroundColor=borderColorDV;
color=bgColorDV;
}
if(this.added)
this.parentDV.removeChild(this.parentDV.lastChild);
this.parentDV.appendChild(document.createTextNode(this.img.alt));
this.added=1;
with(this.childDVCont.style) {
visibility = "visible";
}
with(this.childDVClose.style) {
visibility = "visible";
}
with(this.childDVBeforeAndNext.style) {
visibility = "visible";
}
this.showLoadDV();
this.checkBeforeAndNextImages(imgString);
} else {alert(this.errorMessage);this.errorMessage=''};
};