Help with Lightbox image viewer 2.03a

**ikon** · 04-16-2012, 07:55 PM

The code shown above, what file is that included in?

How do i go about creating "standards invoking DOCTYPE"?

By "jQuery occurs twice on the page in the frame", are you referring to this line? I should take one out?

HTML Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Thank you

**jscheuer1** · 04-17-2012, 09:34 AM

Take out the second one:

Code:

 . . . -scrollbar-corner {
  background: #1A1A1A;
}

/* Force the scroll bar to the left hand side of the screen */
.jspVerticalBar
{
	left: 0;
}

</style>

<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.scroll-pane').jScrollPane(
		{
			verticalDragMinHeigh . . .

About the code in my last post - If you use the attached file from my last post there's no need to edit it but that code is the code from the slimbox2.js we edited in post #6 in this thread. I thought you'd recognize it.

The simplest standards invoking DOCTYPE is:

Code:

<!DOCTYPE html>

Place that as the very first thing at the beginning of the source code, ex:

Code:

<!DOCTYPE html>
<html>
<head>
<link REL="SHORTCUT ICON" HREF="starlogo.png">

<style type="text/css">
A:link {text-decoration: none; color: #ffffff}
A:visited {text-decoration: none; color: #ffffff}
A:active {text-decoration: none; color: #ffffff}
A:hover {text-decoration: none; color: #ffffff;}

</style>
<title>The Reef Man | Saltwater Livestock</title>
<meta name="description" conte . . .

**ikon** · 04-17-2012, 02:14 PM

I replaced the slimbox2.js file with the new slimbox2-top.js (and renamed it on my server to the original name) but there was an issue, it would open the image in the same tab but there was no animation, it just opened it as a regular image? Thanks!

**jscheuer1** · 04-17-2012, 02:46 PM

As I said before, you have to put the the scripts and style on both pages.

Go back to post number 10 and follow the instructions.

**ikon** · 04-18-2012, 06:57 AM

Ok thank you.

Since i put the <DOCTYPE tag in, now there is a table spacing issue in both FF and IE browsers on the main index page.

And now that the image animation loads in the parent frame, i'd prefer it to be reverted back to centered as it was originally

**jscheuer1** · 04-18-2012, 10:08 AM

In that case, get rid of the DOCTYPE. And in the updated slimbox2.js file I gave you, if you're using that, get rid of:

Code:

// Set SlimBox Top if desired, use null for normal centered operation:
jQuery.slimbox.top = 10;

jQuery(function($){
	/*@cc_on @*/
	/*@if(@_jscript_version >= 5)
		if (jQuery.browser.version < 7 || document.compatMode !== 'CSS1Compat'){$.slimbox.top = null;}
	@end @*/
	if(!$.slimbox.top){return;}
	$('#lbCenter, #lbBottomContainer').css({
		position: 'fixed'
	});
});

And of course revert to the original slimbox2.css file - (the one that comes with slimbox) if you haven't already.

**ikon** · 04-18-2012, 07:14 PM

I edited the css file to revert back to center, and I'm really happy with the parent frame loading the image animation, thanks a lot.

I was able to leave the DOCTYPE tag in, and added style="display:block" to every image tag in the index file, that solved the majority of the spacing issue, however there are 4 tiny spaces, which are basically showing up as white lines (in FF) around a couple of the linked images on the left side on the main page - http://www.thereefman.com

Any idea why those are showing up?

**jscheuer1** · 04-18-2012, 11:15 PM

My impression is that the only reason to use a standards invoking DOCTYPE was to get IE to utilize the fixed position value for the Slimbox elements. If you're reverting to the absolute positioning for that, you can revert to quirks mode for the page.

And since that page was obviously designed as slices in quirks mode, the easiest way to get it to appear as intended would be to revert it to how it was, including removing the standards invoking DOCTYPE.

**ikon** · 04-18-2012, 11:27 PM

gotcha.... i just took out the doctype line and it fixed the spacing issue.

if you notice i have the wibya bar on the bottom of the page, and it shows up properly in FF but if i remove the doctype tag that wibya bar doesnt show up properly in IE!!!!

**jscheuer1** · 04-19-2012, 03:06 AM

Oh, I didn't realize it was required for that as you seemed happy with it before in quirks mode.

Anyways, in that case, try out this version of the page:

reefman_index.zip

Oh and on home.html, get rid of:

HTML Code:

<link rel="stylesheet" href="http://thereefman.com/lightbox.css" type="text/css" media="screen">
<script src="lightbox.js"></script>

They're not being used and cause an error.

And set its body's background color to transparent. You may need to set this with the other pages (snails, etc.) that go in the iframe. Only seems important in IE 8 and less.

Thread: Help with Lightbox image viewer 2.03a

Thread Tools

Search Thread

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions