iFrame help

[senraven]

I'm hoping someone can help me fix this problem or just simply say "no this doesn't work, you can't do it" and put my mind at ease.

the setup:

the main page has an iframe. the iframe scrolls and calls up an image gallery. the images in the gallery load via the lightbox2 script found on dynamicdrive. Everything works great together except ..

the problem:

when the images load in the image gallery they load IN the image gallery, meaning they load inside the iframe on the main page. I'm trying to find a way that they accually load on the main page instead of in the frame.

Otherwise, everything else works great, the main page calls up the iframe, the iframe scrolls, the lightbox works, I was honestly surprised.

So is there anyway for it to accually load the lightbox image into the main page instead of just in the iframe itself?

[jscheuer1]

Here is a link to a mod of Lightbox called Lytebox:

http://www.dolem.com/lytebox/index.htm

It has the ability to do just exactly what you want. Be sure to read all of the instructions, especially those for iframes. The usage is about identical except that your rel must now be rel="lytebox" and there is something special to do for iframe.

[senraven]

Thank you!

[chechu]

I do not seem to understand how to use it in the <iframe>, as it doesn't work with me. Step by step, please ?

[jscheuer1]

From their demo page:


!IMPORTANT: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while still including lytebox.js in the iFrame document. Samples are included in the download file from above. If you are still unsure where you need to include each, then it is perfectly safe to include both the css and js in both documents.

Also, if you download their installation .zip - it contains two demos, one of a regular installation and one using iframe.

[chechu]

I did what is written; didn't work. Also: the demos don't show me anything.

[chechu]

Now it all works, but cannot see the "close.gif".
Is it possible to just have the img show up, and have no title, and have the img closed by clicking on it ?

[jscheuer1]

I just had a look at your page, I think your wife's page, as linked in your tagline and it looks as though you are just having trouble supplying the proper paths to things.

It could also be that things are getting complicated by the fact that you are already using another script to scroll some of the thumbnails.

[chechu]

If you look now, you'll see that the "close"-img is not visibe, allthough I really checked it all. Have no idea how to solve this.

[jscheuer1]

The close image says it is here:

http://www.casariegoart.com/images/closelabel.gif

But, all I get when I load that into the address bar is an error. The image is not there (most likely) or the file is corrupted.

I was looking at:

opdrachten > [portretten] > acryl > Madonna

If I click on Madonna's image and then on it again when it comes up by itself in the iframe, Lytebox comes up but, I don't even see the image of Madonna unless I am viewing that page by itself.

The master top page must have:


you need to include lytebox.css in the parent document

and the page in the iframe must have:


while still including lytebox.js in the iFrame document

This means that the paths in the css file must be valid for the top page, try using absolute paths in the css file. Also use the absolute path to the images themselves, example:


http://www.casariegoart.com/img/imggroot/PAmadonna.gif

not just:


imggroot/PAmadonna.gif

[chechu]

To me, it all works, except for the close-img. The css and js files are both in the parent and the framed page, so that shouldn't be the problem.

The close-img is here: http://www.casariegoart.com/img/lytebox/images/close.gif

What do I need to adapt ? Also, this is the first time in years that my computer blocked for a while. Strange.

[jscheuer1]

Ah, I found your close image:


http://www.casariegoart.com/img/lytebox/images/closelabel.gif

put that in the lytebox.js file here:


//*************************/
// LyteBox constructor
//*************************/
function LyteBox() {
/*** Start Configuration ***/
this.fileLoadingImage = "images/loading.gif";
this.fileCloseImage = "http://www.casariegoart.com/img/lytebox/images/closelabel.gif";

And, while you are at it, do the same with your loading image:


this.fileLoadingImage = "http://www.casariegoart.com/img/lytebox/images/loading.gif";

[chechu]

Thanks a lot for your help. My ftp-server is not working at the moment, but I'll check asap. Other question: where can I change the fact that the upcoming <img> is at a fixed distance from the top ? I'd like to change that.
And is this script "heavy", as my computer blocked a few times.

[jscheuer1]

As scripts go yes, this one is a little bit 'heavy' but not that heavy. If you are having problems with your computer, make sure it isn't happening at other times too before you go blaming this script. The script hasn't given me any problems. I do notice that there are quite a few errors reported in FF and Opera, minor css things mostly for the site. These might be adding to the trouble but, I don't think any of this should lock the machine.

[chechu]

Regarding the script: how can I change the distance from the top on the upcoming image ?

And what errors are reported in FF and Opera ?
I work always with the company computer (nothing to do with computers or internet), so there are a lot of restrictions. So I cannot f.ex. change browsers.

[jscheuer1]

Well, I see that you've got the close and loading images working. You really should take my advice on the large images and use the absolute path for those too. For example, instead of:


<a href="imggroot/PAmadonna.gif" rel="lytebox" title="Madonna"><img src="PAmadonna.gif" style="border:1 solid black" alt="click to enlarge"></a>

on:

http://www.casariegoart.com/img/PAmadonna.html

It should be:


<a href="http://www.casariegoart.com/img/imggroot/PAmadonna.gif" rel="lytebox" title="Madonna"><img src="PAmadonna.gif" style="border:1 solid black" alt="click to enlarge"></a>

The way you have it works great on that page by itself, but not when everything is loaded up in the frameset.

To change the style of Lytebox, edit the css (lytebox.css). This will get the image closer to the top of the page:


#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: -25px auto 0 auto;
}

About the errors, here's an important but, probably not critical one:



Error: The stylesheet http://www.casariegoart.com/stylesheet.html was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://www.casariegoart.com/
Line: 0

Most of the rest appear to be just invalid styles that are getting ignored like:



Error: Error in parsing value for property 'border'. Declaration dropped.
Source File: http://www.casariegoart.com/img/PAmadonna.html
Line: 0

I also saw a security error earlier but, hopefully it is just of the type I often see with many framesets - much ado about nothing. Sometimes these can prevent important things from happening though. At the moment, I cannot get it to repeat it.

Added Later:

I just noticed that the problem, with the paths for the larger images, doesn't seem to exist in IE 7 here either. This makes me think that it may require more work to fix it. It is a problem in FF and Opera. There is no way I can tell for sure unless you update the paths as I've suggested though.

[chechu]

Thanks a lot for all the info.
Is it possible to let the image appear in the middle of the page, instead of fixed at -25px ?

[jscheuer1]

There is no easy and no good way to center vertically in a situation like this.

Not easy because:

Editing of the script would be required and it would have to be passed the height for each image.

Not good because:

Even so, with something so large as these images, in smaller windows and on smaller screens especially, you could end up with a situation where the image can never be fully seen - parts of it would be off screen at the top with no way to scroll it into view.

I'd be much more concerned about the the problem I've been mentioning for awhile now. The fact that the larger images are currently not showing up at all in Opera and FF - about 30&#37; of all visitors.

[chechu]

Just solved the stylesheet.css problem.

So placing the whole http://www.casa ..../madonna.gif would solve everything ?

[jscheuer1]

Now, at 800x600 screen, I can no longer see all of the larger image even in IE 7.

I know that these issues are hard for you to grasp because you cannot see them, this one though, resize your browser to about 800x600 and you will see that you cannot scroll the bottom part of the larger image into view with the scrollbar, it's not there. The only way to see it is to make the browser larger or use arrow keys or mousewheel. On a 800x600 screen, making the browser larger is not an option and, on larger screens with a smaller window, it is counter-intuitive.

The thing about the paths though yes, all of the larger image paths should be absolute, not just the Madonna one. You may be able to just get away with removing the link to the lytebox.js script (not the css) from the page containing the iframe (not the pages in the iframe), it is worth a try as, it would be much less work. If that doesn't fix it or causes other problems, all those larger image paths must be made absolute.

[chechu]

Thanks. I changed all the paths into absolute and removed the .js from the main pages, and it all turns out right.
Only 11,73 &#37; of tmy visitors have 800*600 resolution; all the rest higher, so I'll take the risk and leave it as it is. But I changed what you recommended me to do so ! Thank you so much.

[jscheuer1]

Looks good in FF and Opera now! But, Opera will not close the large image under certain circumstances. This is probably a combination of a bug in the script and in Opera and your somewhat involved layout. Opera user can just refresh the page when this happens - it takes them back to the very beginning though. It might be very hard to track down this error. Opera is the least popular of the three browsers.

From tracking the error in the Opera console and since you say you are now using the absolute paths for the larger images it might be able to be fixed by reinstating the lytebox.js on the container page. It might need something else though. What is happening is that Opera is losing track of which window/page it's lytebox effect is on.

Unless you can test in Opera, I'd leave it as it is now.

Hey, your whole site suddenly stopped working, it now goes to - "CheapA** Webmail - Aanmelden"!

[jscheuer1]

Now that your site has come back up, I see that this is also a problem in IE 7! What happens is - say you click all the way through to get the lytebox version of Madonna. Then you close that, back up to the sliding menu of images and click all the way through to the lytebox version of Ceci, then try to close it, it won't work. It doesn't matter if you start with Ceci or start with Madonna and probably you could start with any of the ones that have a lytebox version. I'd definitely try putting the script back on the top page to see if it fixes this.

[chechu]

I placed the .js back in the top pages. Hopefully IE is okay now ?
The site cecicasariego might have been gone for a while due to a transfer this week; if it occurs again, just go to casariegoart. But it shouldn't occur ...
If you look to my stats (http://www.belstat.be/viewtab_other.asp?UserID=chechu), you will see the most used browsers. Do you see problems with these ?
Also, you seem to have been surfing in the Flemish version of the site. Are the two flags (languages) at the left bottom not clear enough ? I've been looking for an easy way to have people go to their language. I 've been thinking of placing a language-choice-page as index, but I'm not convinced. Suggestions ?

[jscheuer1]

Whatever you did, lytebox doesn't work at all now in any browser. It also appears as though some of you other styles are missing. Are you sure all of the files made it to the new host and, if they did, that they have the correct paths on the new server?

[chechu]

Transfer isn't complete yet.
I uploaded the files with the css again, and it is okay again. But the codes of the ims are the same, and indeed they don't come up ... Will call my provider.

[chechu]

Why is the most beautifull and most wanted effect, the most annoying one ?
My provider has no idea what is going on, and neither do I, because all the files are correctly uploaded. No idea !

[chechu]

When you go to http://www.casariegoart.com/img/PAmadonna.html (as example), it works perfectly, but if you go to the site http://www.casariegoart.com and look for Madonna, then it doesn't work. In the main page I have placed first both lytebox.css and .js, and then only .css. None works today; yesterday they both did. What is the problem ?

[chechu]

Okay, the above problem has been soved; the path to the lytebox.css from the parent page wasn't correctly filled in.

But how come that I can get the effect with one img, but after that, I cannot go anywhere else as the computer chockes. Do you have the same problem ?

[jscheuer1]

Looking at your source, it didn't appear as though you had lytebox.js linked to indexNL.html but, this may not help one way or the other. Everything works in FF. The only error I get that makes any sense is from Opera (Opera and IE are having the same problem) for line 184 in lytebox.js:


var objOverlay = this.doc.createElement("div");
objOverlay.setAttribute('id','overlay');
objOverlay.style.display = 'none';
if (this.isFrame) {
objOverlay.onclick = function() { window.parent[window.name].myLytebox.end(); return false; }
} else {
objOverlay.onclick = function() { myLytebox.end(); return false; }
}
objBody.appendChild(objOverlay);



But, the error is -

window is undefined

This is almost impossible so, I'm not sure what the fix would be other than taking away the two framesets that you have put around the site. The one other thing that you could try is:


var objOverlay = this.doc.createElement("div");
objOverlay.setAttribute('id','overlay');
objOverlay.style.display = 'none';
if (this.isFrame&&window) {
objOverlay.onclick = function() {if(window){ window.parent[window.name].myLytebox.end()}; return false; }
} else {
objOverlay.onclick = function() { myLytebox.end(); return false; }
}
objBody.appendChild(objOverlay);



That might fix it or at least give a new error that might lead to a fix.

[chechu]

Thanks for you guidance. I took away one frame, so if you go to casariegoart (the transfer with cecicasariego is still not finished, so untill then it remains in a frame) the content is in one <iframe>.
To me it all works, but once I have viewed a few images, then my computer stops with the img opened. The only way to go back is by refreshing the page. Is this because it's heavy software ?

[chechu]

I also just adapted this:

var objOverlay = this.doc.createElement("div");
objOverlay.setAttribute('id','overlay');
objOverlay.style.display = 'none';
if (this.isFrame&&window) {
objOverlay.onclick = function() {if(window){ window.parent[window.name].myLytebox.end()}; return false; }
} else {
objOverlay.onclick = function() { myLytebox.end(); return false; }
}
objBody.appendChild(objOverlay);
And I still have the same trouble: after viewing a few, the img blocks.

[semi-sentient]

Hello.

I'm the author of Lytebox and I just saw the e-mail you sent. I'll take a look at this later tonight when I get home from work. We're having some pretty bad weather here in Austin, TX, and it's effected my internet connection, so I apologize for not replying sooner.

[semi-sentient]

Just out of curiosity, are all of your iframe's named? The reason I ask is because "Lytebox" attempts to determine if it is a frame or not by using "window.name", which is the value of the name attribute of the iframe tag, for example:

<iframe name="myDisplayFrame" ...>

For the above window (the iframe), the window.name property would be "myDisplayFrame". Also, using framesets in conjunction with iframes could be causing problems as well. There may be a fix for that though.

Find the following line (located in the checkFrame function):
if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {

And change it to:
if (window.parent.frames[window.name]) {

Let me know if these work for you.

[chechu]

Hey, thanks for your replies ! I changed the above line, as you requested.
But do I replace it like this:

if (window.parent.frames[window.name]) {
or do I put the name of the <iframe> in it like this ?

if (window.parent.frames[content]) {

The real problem is not really the braking out of the <iframe> (please note to check only www.casariegoart.com, and not cecicasariego.com, as this is till in transfer, and therefore in <frame>), because it worked fine even before changing what you recommended.
Maybe it is my computer, but when I have opened a few imgs like that, the img blocks, and I cannot close it by clicking on the close-img. The only way to get back to the content is by refreshing the page. How can that be solved ?

[jscheuer1]

Probably, without making any modifications to the Lytebox script, if you just ditched both of the containing framesets, it probably would work. I think the assumption here is that it is the framesets that is throwing this off. You should at least test that theory by getting rid of them to see if that takes care of it. If it does, it would clarify that we are on the right track at least. If it doesn't, it means there is a different problem than we are currently assuming that needs to be identified.

Also, if removing the framesets does fix it, there are better ways of achieving what those framesets get you (the redirects) that can be done server side and that therefore wouldn't interfere with the script.

[chechu]

I cannot remove the <iframe>, because otherwise I would have to place every image three times (one for every language), and that would be messy. To me, the problem are not the <iframes>, but the loading of the script. It all works fine, but blocks at a certain moment. I checked doing with the imgs without frame, and it blocks again.

If you surf on the page, and view a few imgs, doesn't it block ?

[jscheuer1]

Whatever the framesets are for can be accomplished in some other, probably better, way. That is besides the point. It seems clear to me that they are the most likely source of the problem. It also appears to me, from the code suggestions that were offered, that the author (semi-sentient) is also working under this assumption. Rather than try modifications, one at a time, to see if they work, it would be best to at least test the theory by removing the framesets - just as a test.

BTW, semi-sentient meant:


if (window.parent.frames[window.name]) {

If you do it the other way, you need to quote it:


if (window.parent.frames['content']) {

Either of these may or may not fix the problem.

It would be good to know if, in fact it is the framesets or not that are causing this.

If neither of the above modifications fix it - Please do the suggested test.

[chechu]

I changed this:


// populate array of anchors from the appropriate window (could be the parent or iframe document)
var anchors = (this.isFrame) ? window.parent.frames['content'].document.getElementsByTagName('a') : document.getElementsByTagName('a');


and this:


if (window.parent.frames['content']) {


Now see what it 'll do. If it doesn't help;, then I'll change the <iframe> into <divs>, but that will take me loooong time !

[chechu]

And after viewing two img's, I couldn't close the window anymore.
Do you have the same problem, or can you view them as you wish ?

[jscheuer1]

And after viewing two img's, I couldn't close the window anymore.
Do you have the same problem, or can you view them as you wish ?

I identified this problem back in post #23 of this thread. Have you tried the author's suggestion(s)? Have you tested it without the framesets?

[chechu]

I'd definitely try putting the script back on the top page to see if it fixes this.

I did the following so far:
- remove frames, only remaining one iframe
- placing the link to lytebox.css in the parent page
- changing this

if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length
into this: if (window.parent.frames['content']) {
- changing this

var anchors = (this.isFrame) ? window.parent.frames['content'].document.getElementsByTagName('a') : document.getElementsByTagName('a');

So I have changed all you and semi-sentient proposed.
I just tried ten images without being in the iframe, off and online, and they all came up perfectly, so it is indeed an iframe issue.

So is there really no other way then removing the iframes ?

[jscheuer1]

Have you tried it with no modifications to the lytebox.js, in an iframe with no framesets?

[chechu]

Yes, it was like that in the beginning ...

[jscheuer1]

Yes, it was like that in the beginning ...

It wasn't like that in the beginning. It may have been like that when I asked. It is not like that now, you are using a modified version of lytebox.js.

It probably isn't the framesets, though we won't know for sure unless you use it with an unmodified version of lytebox.js, one with only theses changes:


this.fileLoadingImage = "http://www.casariegoart.com/img/lytebox/images/loading.gif";
this.fileCloseImage = "http://www.casariegoart.com/img/lytebox/images/close.gif";

and no framesets.

This leaves us guessing again as to the cause. I vote for script conflicts and my first candidate is this click script:


<script language=JavaScript>
<!--
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->
</script>

Get rid of that from all pages and see if that fixes it. But first try with the unmodified lytebox.js as suggested above.

If that click script isn't the problem, you will have to remove one script at a time until you find one that, when removed fixes it. I also notice that you have something going on that makes it hard, if not impossible to view some of the pages by themselves, outside of the iframe. That (whatever it is, a script or whatever) would be my next suspect.

Once the problem is found, if it is an essential script or mechanism, it should be able to be fixed to work with lytebox. But, it may not so, be prepared to ditch one or the other.

[chechu]

I just tried ten images without being in the iframe, off and online, and they all came up perfectly, so it is indeed an iframe issue.

So even with all the other scripts in it, it does work without the iframe.

If the iframe issue cannot be solved with the script, then I'll drop the whole script, and look for another. It is a fantastic script, was supposed not to bring trouble, but that's all it has done so far. I am really disappointed that I cannot use it, as I cannot get rid of the iframe.

Can you suggest me alike scripts, like this one (http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm), or this one (http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm)

[jscheuer1]

You can do as you like. The fact that it works without an iframe was already known though. The fact that it works with an iframe in a simpler layout and/or without other scripts is also known or at least may be supposed and in fact can be tested. I think we should be able to take semi-sentient at his word that his script - by itself in an iframe environment - works, but we could test that theory too if we like. It really is up to you, what you want to do.

Incidentally, it worked fine in the iframe and in the frameset in FF so, there almost certainly must be a way to get it to work in other browsers.

The main thing complicating all of this, to my mind, is the already complex nature of the site. It is so much easier to troubleshoot something when there isn't so much else already going on.

[chechu]

Okay, so let's keep on digging.
I removed two <scripts>, this is what remains, which is all necessary to me:




<html>

<title>Links</title>

<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen" />
<meta http-equiv="imagetoolbar" content="no">
</head>

<style type="text/css">
<!--
ul {
color: #CC3300;
list-style-type: square;
}
.tekst3 {

list-style-type: square;
color: #000000;
}
-->
</style>

<body bgcolor=white>

<table height=100&#37; width=100%>
<tr><td align=center valign=middle>

<table><tr>
<td align=left>

<a href="http://www.casariegoart.com/img/imggroot/PAauto4.gif" rel="lytebox" title="<font color='#666666'>to close, click right or refresh window <br>om te sluiten, klik hiernaast of op &#39vernieuwen&#39</font>"><img src="PAauto4.gif" style="border:1 solid black" alt="click to enlarge"></a>
</td><td width=50>
</td><td align=left>
<ul>
<li><div align="justify" class="tekst2">Ceci
</div>
</li>
<li><div align="justify" class="tekst2">31 x 40 cm
</div>
</li>
<li><div align="justify" class="tekst2">acrilic on wood<br>acryl op hout<br>acryl sur bois
</div>
</li>
<li><div align="justify" class="tekst2"><a href="Javascript:history.go(-1);">[back]</a>
</div>
</li></ul>

</td></tr></table>

</body>
</html>
Still blocks.

[chechu]

I will use the acryl works (selfportrait, Madonna and Evita) as tests, so just check these ones. The code above is as they are, but what lytebox.js do I place ? The original, or the adapted one ?

[jscheuer1]

I stick with the original lytebox.js except, of course, with the modifications for the support images:


this.fileLoadingImage = "http://www.casariegoart.com/img/lytebox/images/loading.gif";
this.fileCloseImage = "http://www.casariegoart.com/img/lytebox/images/close.gif";

[chechu]

No, still blocks ...

[jscheuer1]

Well, then you could try the other modifications, one at a time. You don't want to muddy the situation by making too many changes at once. One 'fix' may cancel out another.

I did do some local testing on this and there appears to be no problem with displaying without framesets with multiple iframes and with switching the pages in the iframes to other pages using Lytebox so, there almost has to be some conflict with something that is included in your set up that isn't involved with the relatively simple set up as I had in my local demo.

Do you have iframes within iframes?

Still, this could take quite a bit of troubleshooting and therefore, if you can find another way displaying the larger images that you are happy with and that is problem free, I'd say, "Go for it." Whatever you had before was adequate, wasn't it?

[chechu]

Well, then you could try the other modifications, one at a time.
Okay, I'll take my time for it, slowly but surely.

Do you have iframes within iframes?
The slideshow is in an <iframe> within an <iframe>, but the img with discription is in one <iframe>

Whatever you had before was adequate, wasn't it?

Didn't really like it. I am just looking for a script where I can show the img without having to place it in a new window. Just the img and a border. And the lytebox is the perfect example.

[chechu]

Done !
I have adapted the English version, taking the <iframe> out. Could you please check in different browsers if everything works well. Thanks !

[jscheuer1]

The script seems to be working fine. The background image:


http://www.casariegoart.com/img/icon/bgpalet.gif

is applied to a division inside a table, it should be applied to the table or table cell with background-repeat set to no-repeat.

In FF it is shifted to the right and repeated, in IE 7 and Opera it is repeated. There are other background image misalignments. You really need to get some other browsers or at least get on someone else's computer with other browsers and look at the site to see for yourself.

[chechu]

is applied to a division inside a table, it should be applied to the table or table cell with background-repeat set to no-repeat.

I cannot place another background-img in the table

<table height="394" border="0" cellpadding="0" cellspacing="0">
<tr><td align=center valign=bottom background="img/icon/bgtekst1.gif">
<div style="width:521px;height:252px;overflow:auto;background: silver url(img/icon/bgpalet.gif) fixed;">
<table style="width: 100&#37;; height: 100%; border: 0 none;" cellpadding="0" cellspacing="0">
<tr><td style="padding-left:210px;">
How do I solve this ?

[jscheuer1]

Pick which background image you want and only use that one. How many background images do you need?

[chechu]

There is a background of the table,
and there is a background of the content in the table.
Do you suggest I make one background for the table, that consists of the imgs as one ?

[jscheuer1]

That's a good idea. You still need to get some other browsers or access to some other browsers on other's computers to assist you in the fine tuning of the layout. It would be too confusing and time consuming to advise you otherwise. It looks as though you have already combined the background image but, that it is now off center vertically and horizontally and therefore repeating slightly in FF and Opera. This may have as much to do with the position and size of the element with the background image as with the background image's position property within that element.

[chechu]

Hey jscheuer,
I just adapted the visual, so I would only have one bgimage. Could you please check the Dutch version (what comes up), to see if all is correct in other browsers ? Thanks !

[jscheuer1]

Opera:

http://loisimages.com/john/ceci_opera.jpg

FF:

http://loisimages.com/john/ceci_ff.jpg

Notes: Images are of the presentational area only, which both browsers centered vertically and horizontally in the window, gray scale, bilinear proportionally resized (both appeared roughly the same size before I reduced them), 28% sharpened, and optimized to save on bandwidth and all that good stuff. Otherwise, they are exactly what I see in each browser. That missing line at the bottom of the scroller on Opera is really missing, I didn't crop it off.

[chechu]

Thanks a lot for the check. I think I have solved the problem with the background by making it one (problem should have appeared with the creations also), so that should be fine. I also adapted the English part of the site. How to solve the scroller, no idea, but is it the text or the images ?

[jscheuer1]

Looking good in FF and Opera with the backgrounds. The problem with the scroller is only in Opera and as you can see from the image, the scroller is fine, it is just that its bottom border does not show. I cannot be sure of the cause. I'm thinking that if an image is involved, it is unavailable to Opera for some reason, otherwise it is most likely a problem with layout dimensions.

On another matter, you will notice that in Opera the two slide shows in the bottom portion are showing the Opera 'broken image' tokens. This is because, for example, Opera is looking for these images here as (or similar) and not finding them:

http://www.cecicasariego.com/SP/SPdamier2.gif

and:

http://www.cecicasariego.com/SP/SPwesthoek2.jpg

[chechu]

John,
I wish to thank you for all the help you gave me. Now my site is browser friendly, and I have the image effect that I wanted. My next issue is how I can let people choose their language (I don't think it is very clear with the little flag in the left corner), but that is my next challenge. Thanks a lot !

[jscheuer1]

I'm not much up on this aspect of web design but, there are ways of detecting the user's configured language. I'm not sure how reliable they are but, as long as they can be combined with an available manual selection, it might be a good thing to look into. As for your flag, it isn't all that noticeable. If it were to have the words language/De taal (I am assuming it is Dutch we have as our primary language and that I have a good translation) right before it, it would be much clearer. A nice touch would be to have the same thing and a Flemish? flag on the English page so one could return to the Dutch if one went to the English in error.

[chechu]

I agree, it is not really visible. But the site has already so many visuals on it (too many ?), so it is difficult to fit something in. I do not want to have an index where you have to choose language, and just then see what you have now. So I'll have to figure something out.

FYI: it is indeed Dutch, which is the same as Flemish when written.

[jscheuer1]

I'm not sure you understand what I said, something like so:

786

[chechu]

I see. Yes, it is needed, but I feel that the index is already crowded. I will start a new thread in html on the forum about language choices. Thanks !

[Mattgt]

hey guys am havin the same problem see i am using frontpage to edit my site and am using iframes now i read the intrustion about what to do if am using iframes but it dont seem to work

''If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while still including lytebox.js in the iFrame document. Samples are included in the download file from above. If you are still unsure where you need to include each, then it is perfectly safe to include both the css and js in both documents.''

i do not get that part can sum 1 walk me through it

heres the site www.camvanhoy.com click onset and click test image insted of opening like it should it opens in the iframe please gimme step by step on this

[chechu]

Step by step: just read the thread, and you'll see what adjustments you can make, one by one, and check if they work.
It didn't work for me, so I redesigned my whole site into divs instead of iframes...