Lightbox (I think)

[Bernie Kruger]

Is there a script here that does the cute image display of darkening the main screen and opening a box in the foreground

See it work here (http://www.gigabyte.com.tw/Products/Motherboard/Products_Spec.aspx?ProductID=2961) and click on the motherboard thumbnail.

I've seen various iterations of this and the one that seems logical from the page source is missing the "close button" and of course the .js file is password protected.

From the page source it looks like it calls up jquery-1.2.6.min.js and there are downloads of this available but I did not find a page for dummies like me to demonstrate how it works and to use it in a web page.

I also searched the forums and all took me to "scripts" I have already employed.

[bluewalrus]

http://www.huddletogether.com/projects/lightbox2/

[Bernie Kruger]

Thanx

Hopefully I do not screw it up too much :D

[jscheuer1]

That particular script is:

http://leandrovieira.com/projects/jquery/lightbox/

However, if you want to use the original lightbox, use the latest version:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/

which was introduced here:

http://www.dynamicdrive.com/forums/showthread.php?p=163470#post163470

There are tons of lightbox type scripts around though. So the real deciding factors are compatibility with the rest of your code, especially other scripts (if any), and the particular features you require.

To find a large amount of lightbox type scripts, Google:

lightbox

and also:

lightbox clones

[Bernie Kruger]

I already have a conflict


<link rel="stylesheet" type="text/css" href="../Renovate/scripts/mmenu.css">

and


<link rel="stylesheet" href="../scripts/Lightbox/css/lightbox.css" type="text/css" media="screen" />

How does one do a workaround? The tutorial suggests merging css docs but that sounds like a long winded approach.

If the lightbox refs are before the omni menu, the menu does not work and if the lightbox refs are after the omnimenu, the lightbox script does not work. I just noticed the slideshow also is affected - Just my luck :cool:

I tried changing to rel1=... but it seems "rel" is a relevant syntax no pun intended.

Any quick work-arounds?

I have declared the full reference to lightbox like this


<script type="text/javascript">
//script for lightbox</script>
<link rel="stylesheet" href="../scripts/Lightbox/css/lightbox.css" type="text/css" media="screen" />

<script src="../scripts/Lightbox/js/prototype.js" ></script>
<script src="../scripts/Lightbox/js/scriptaculous.js?load=effects,builder"</script>
<script src="../scripts/Lightbox/js/lightbox.js" ></script>

<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
</style>


From the demo, he had the references like this


<link rel="stylesheet" href="../scripts/Lightbox/css/lightbox.css" type="text/css" media="screen" />

<script src="../scripts/Lightbox/js/prototype.js" type="text/javascript"></script>
<script src="../scripts/Lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../scripts/Lightbox/js/lightbox.js" type="text/javascript"></script>

<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
</style>

And that does not work if pasted as is into my page. The way I have declared it, got the lightbox to work as my images are embedded in <td tags

I did all the markups on the css as suggested by the author for the image button links but I want to use this script in the future so I have assigned it a folder of lightbox as a sub folder of scripts.

The omnimenu stuff is in another folder called renovate/scripts

In the preview of FP editor, I get an error of
Line:188
Char:3
Error:'null' is null or is not an object

Not that that tells me much anyway :(

I have only experimented with one image so I have not screwed up too much (yet)

[Bernie Kruger]

Sorry John, did not see your post, was editing this one
Busy working on the "solution"
Still I am learning

[jscheuer1]

A page may have more than one external stylesheet. As long as the styles in them do not conflict in such a way as to have an adverse impact upon the intended presentational style of the markup, there will be no problem. If that does happen, the styles that do conflict may be made more specific so that they do not. This is all but meaningless:



<script type="text/javascript">
//script for lightbox</script>

It is a script with only a comment in it. It doesn't do anything as either a script or as an HTML element other than add to the DOM's script's element collection, which is just a collection of all the script tags in the document, used only if one is counting them off for some purpose.

I'm not sure what the problems you are having are really attributable to. I would have to see a live demo of the page:

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

[Bernie Kruger]

John

The updated version does not kill the omnimenu, (top) but it hides it away from view (depends where the reference script is placed). I think that is fixed, but the menu tab thickness seems to have been affected I am sure I can fix that

The slideshow I am running is just a black box

I published the one page with the scripts to www.lbk.co.za/const/renovate/AC4Light.htm

It will cycle between the 4 pages from the top menu but you will need to call this link manually to go back to the temp page.

In the frames page version the lightbox does not work but as solo pages, it does. That is the 1st bug

The second bug is the "conflict" with the Simple Controls Gallery

BTW only the 1st image "Cherry has been updated with lightbox, the rest were on the popup which I have removed but is still up on the current AC4 page

From the main page I inserted a link to the test page but is white, it is centered with a screen tip, sure you'll know how to find that :) You can then see what the effects are from the split frames. link (http://www.lbk.co.za/const/index.htm)

Once upon a time I did try out your frames template but I think I am too doff to make that work :D so I am stuck with the crappy MS one for now :(

Rgds

[Bernie Kruger]

As for the meaningless script, that will go - not quite sure how to insert comments in the html code like the old rem statements :o That was just for me to track, where I am putting the scrips as the FP editor has the uncanny ability to lose its focus from where you just were and goes all by itself to the end of head section, I still need a WYSIWYG, bad habits die hard I guess.

[jscheuer1]

I'm not sure what to click on for the lightbox. Use this version of the simple controls gallery script to (hopefully) avoid conflict:

3037

[Bernie Kruger]

I republished the page and removed all other images barring the one with the lightbox effect. Like I said, it works stand-alone but not in the frames but there is conflict with the slideshow.

I'll look at the script

[Bernie Kruger]

Slideshow is back with new script, going to test in frames now.

Just did and in frames, the lightbox is somehow disabled. Are there any commands in the script of lightbox that are frame sensitive?

[Bernie Kruger]

I found the glitch, it is in lightbox.js


forceLocal: true, // set to true to force lightbox into a frame or iframe
// (default: false) - will allow lighbox effect to appear on the top page of an iframe if any

It is set as false so I think I am OK with this now, thanx for the help

[jscheuer1]

Upload the new simplegalery script to the server, and the test page too if it has changed. I can't tell anything more the way it is now. BTW, I'm tending to assume that it is images in the simple gallery that are intended to open the lightbox, right? Or what?

Anyways, when lightbox 2.04a is in a frame or iframe, it looks to the parent page for the script, so as to be able to open full window. This was designed to work with iframes. I'm not certain if it can be made to work with frames, we may need to disable it. Near the beginning of lightbox.js find:


//
// Configuration
//
fileLoadingImage: '../scripts/Lightbox204a/images/loading.gif',
fileBottomNavCloseImage: '../scripts/Lightbox204a/images/closelabel.gif',
cookieForFirstLight: false, // use session only cookie for first light? (true/false)

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, // if you adjust the padding in the CSS, you will need to update this variable

forceLocal: false, // set to true to force lightbox into a frame or iframe
// (default: false) - will allow lighbox effect to appear on the top page of an iframe if any

startCallback: function(){}, // callback for ligthbox start
startCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

endCallback: function(){}, // callback for lightbox end
endCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"

// End Configuration -----------------------------------------------------------------------------------


Change it to true to force lightbox into the frame.

[Bernie Kruger]

Its all fixed and working fine, I figured out the force local, after I asked the Q.

Now I gotta go see a client make some real money - hopefully :)

Thanx for all the help

[jscheuer1]

Well, I'm looking at your pages and they are working. But you could get more by adding a group name in square brackets to all the floor samples' rel="loghtbox" attribute:


<a href="../Renovate/Images/Traviata/LargeSample/M1086Beech.jpg" rel="lightbox[flooring]">

Add the same one to all of the samples, ex for another:


<a href="../Renovate/Images/Traviata/LargeSample/M1085ClassicOak.jpg" rel="lightbox[flooring]">

This will enable the next/previous feature where hovering over the larger image will produce next/previous buttons to navigate to (in this case) the larger images of the next and previous samples without closing the lightbox.

On another front, the minified version of jQuery is better because, though a larger file, it downloads and runs more quickly. You can get it here:

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

Right click and save as:

jquery-1.2.6.min.js

[Bernie Kruger]

Well, I'm looking at your pages and they are working. But you could get more by adding a group name in square brackets to all the floor samples' rel="loghtbox" attribute:


<a href="../Renovate/Images/Traviata/LargeSample/M1086Beech.jpg" rel="lightbox[flooring]">

Add the same one to all of the samples, ex for another:


<a href="../Renovate/Images/Traviata/LargeSample/M1085ClassicOak.jpg" rel="lightbox[flooring]">

This will enable the next/previous feature where hovering over the larger image will produce next/previous buttons to navigate to (in this case) the larger images of the next and previous samples without closing the lightbox.
OK I did this and there is no next previous buttons, I did see the images for them in the image folder, they don't show up but when clicking the right part of the image it goes next and previous on the left part of the image, the image being the large sample of the floor in the lightbox.


On another front, the minified version of jQuery is better because, though a larger file, it downloads and runs more quickly. You can get it here:

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

Right click and save as:

jquery-1.2.6.min.js

Installed this, I am guessing this is for the slide-show? I changed the reference from the older 1.2.6 query to reference this one, it killed the slideshow. Am I missing your intent here?

[jscheuer1]

Well, on your current live page you have:


<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 0px solid #c0c0c0;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>
<script type="text/javascript" src="../Renovate/scripts/jquery-1.2.6.pack.js"></script>

Only the second one has the script at the src attribute given. If you substituted the minified version (it's not new, just compressed in a different way, in fact the simple gallery cannot in its present form use the most recent version of jQuery) for the one that wasn't working and left the other one there, that could cause problems, or you may have done something else off. But I tested it here and it works. If you put up a demo of the problem I could be more specific. In any case, since it is doing nothing, you should get rid of that first tag.

In another matter - in Opera the lightbox is not working. To fix that - move (don't just copy) both omni slide scripts to the last thing before the closing </head> tag:


. . . xt/javascript" src="../scripts/Lightbox204a/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../scripts/Lightbox204a/js/lightbox.js" ></script>


<script src="../Renovate/scripts/mmenu.js" type="text/javascript"></script>
<script src="../Renovate/scripts/menuItems.js" type="text/javascript">
/***********************************************
* Omni Slide Menu script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/</script>

</head>


<body topmargin="0" leftmarg . . .

Now as to your question about the next/previous buttons not showing up, the path to their files in lightbox.css is probably wrong, or they are not there. You may use absolute paths there to avoid confusion. But if you are using relative paths, they should be relative to the lightbox.css file, not to the page that uses them. Once again, a live demo of the problem would help me be more specific.

[Bernie Kruger]

I published the AC5 page withe next previous missing elements, changed the js query back to the old one but in the AC4 page you will see where I redefined but is now "remarked" out

[Bernie Kruger]

Just redid the menu moves and deleted the extra tag, looking into the paths on css.

[Bernie Kruger]

paths fixed and the labels appear now, so we are down to the query only.

[jscheuer1]

You may use:


#prevLink:hover, #prevLink:visited:hover { background: url('http://www.lbk.co.za/const/scripts/Lightbox204a/images/prevlabel.gif') no-repeat left 15%; }
#nextLink:hover, #nextLink:visited:hover { background: url('http://www.lbk.co.za/const/scripts/Lightbox204a/images/nextlabel.gif') no-repeat right 15%; }

[Bernie Kruger]

Just as an aside, how does one insert comments/remarks into the code w/o doing what I did with the meaningless script you quizzed me on. I tried /** like yuo have in your notice but it then somehow appears in the page as text unformatted.

The FP help is extremely helpful - NOT!

[jscheuer1]

First, on the minified version of the script, you need to upload it to here:


http://www.lbk.co.za/const/Renovate/scripts/jquery-1.2.6.min.js

Then you may use:


<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>

In fact, on your page wherever you have:


../Renovate/scripts/

since you are already in the Renovate folder, you may simply use:


scripts/

As for comments. If you want just an HTML comment, use:


<!-- Your comment goes here -->

These should generally only be used in presentational elements. Not in style or script elements. They can go in the head though, as long as they are not inside anything in the head.

For inside a script tag, there are two types of comments, single line:


// this comment ends when there is a line break
(comment is over)

and multiline:


/* This comment will continue until it meets a
closing comment delimeter like here */

It is generally best to have the closing </script> tag on a new line below any comments, which if they are multiline, should be closed first. Otherwise it may be missed.

[Bernie Kruger]

Its past midnight here so I am off to bed before I screw something else up :p

I am happy with the pages as is, all published and changed as we discussed, if the gallery can run faster, that would be cool, but it can wait.

I need to clean up all the table garbage FP inserted into my pages, that will keep me busy awhile. The image displays now are more eloquent than the manufacturer's site, that's where I got the lighten/darken images scripts I use on the thumbnails when you mouseover them.

Talk to you soon

[jscheuer1]

OK, well - I usually don't take such an interest in what folks are doing to the extent of volunteering information that wasn't really requested, but occasionally I do. You may consider yourself lucky or otherwise - that's up to you, feel free to say enough is enough if that's how you feel. I will respect that.

However, I get the sense that you are really doing something, that's what interests me, and that as you say - it's just late where you are. Sometimes taking a break is the best thing. I could probably go on for some time about stuff for your site, but I think I'm just interested in getting some basic stuff straight for you as regards the site.

So, if you will bear with me a little longer I think you will be pleased with the result. No rush though, I completely understand about having to get on with the actual work you do, and the requirement for rest.

To make a long story sort - let me know when you want to continue, or if you prefer not to.

Regards,


- J

[Bernie Kruger]

No, really I do appreciate your input, I was trying to be polite because you have come to the party more than I expected, for which I am truly grateful. I never thought that my site was deserving of your interest.

I have learned a lot and sometimes it helps not to have a cookie cutter solution as that way, one gets to actually explore the code and learn how it works.

The weird thing is that some of the hits I have had on my site are as a result of wrong spelling - go figure. I was looking at meta tags but see search engines do not use them, a very small percentage of my market base are Internet literate and that is why I like to present stuff in a "built for dummies by a dummy" kind of way. The trouble is that I tend to inundate visitors with information and I have learned that from an internet perspective, folk have short attention spans, hard in my game to be brief :p

But whatever you have, that will improve the site performance wise, will be greatly appreciated, hope you did not take my remarks as a snub, if so I apologize:o

Oh and BTW, I have implemented all your suggestion correctly now, I had the search script in the wrong scripts folder.

[jscheuer1]

No, I didn't mean to say I thought it was a snub, though I can see how it may have come across that I thought it was. It's just that as I say, from time to time I get involved in these things and it can get a bit much for the person whose site it actually is. I wanted to give you an out. I've been doing this so long that it really just rolls off my back as to whether anyone cares what I say or not.

I just noticed that if you:

Back to Renovate

from the Omni Menu, you get to:

renovate/renovate.htm

Which has a link to:

renovate/Flooring.htm

Which is referred to in the Omni Menu as:

renovate/flooring.htm

So when navigated to it as Flooring.htm, it is not removed from Omni.

Now I don't know which it actually is, or if you have two of them. Usually a server will not find a page or any file or folder if the upper and lower case don't match up, perhaps your server is not like that though, some are not. But for our script code that drops items from the Omni Menu, case matters. That can be fixed by one very simple addition:


menuItems: (function(ar){
var lp = new RegExp((location.pathname).replace(/^.*(\/[^\/]+)$/, '$1'), 'i');
for (var i = ar.length - 1; i > -1; --i){
if(ar[i][1] && lp.test(ar[i][1])){
ar.splice(i, 1);
}
}
return ar;
})([["Traviata Kelida AC3", "../renovate/flooring.htm", "_self"],
["Traviata Supreme AC4", "../renovate/AC4.htm", "_self"],
["Traviata Prestige AC5", "../renovate/AC5.htm", "_self"],
["Allure Waterproof", "../renovate/Allure.htm", "_self"],
["Traviata Home Page", "http://www.traviata.co.za", "_blank"],
["Navigate"],
["Back to Renovate", "../renovate/renovate.htm", "_self"] //no comma after last entry
])}; // REQUIRED!! do not edit or remove

[Bernie Kruger]

Did that and tested locally and it deals with all links in the same manner not published yet. The use of caps is just my bad but I understand the problem, didn't think it could affect the script.

[Bernie Kruger]

Where does one set the position of where the lightbox appears on screen?

I looked at the css file and need to get it about 10-15% vertically up on the screen.

I've tried various settings which I undid, but nothing.

I assume one sets that here somehow?


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

ETA:

The image enlargement is 500px high so I want it so that when it displays, it does not hide the description behind the task bar

[jscheuer1]

With Lightbox, without extensive modification, you ultimately have no influence where the bottom of the larger image will be in relation to the bottom of the browser window. Folks have all different sized screens, and there is no guarantee that they will have their browser window (also known loosely as the view port) maximised, so it may be shorter and/or narrower than their screen or their available screen dimensions.

There are some lightbox type scripts that attempt, for the most part successfully, to resize the larger image if it and its container would be outside the viewable area in the view port, so as to bring them inside it.

That said, you can bring a Lightbox lightbox up a bit by giving it a negative top margin:


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

Which will raise it by 25px.

[Bernie Kruger]

Thanx

That did the trick sortof, I used -40 and it is still within a margin of ±20px from the top but of course, IE renders different from FF, so I went down to -10px

It looks crap in IE but OK in FF. In IE6 it is touching the top w/o scroll bars but I notice that all of the lightbox touches. The -10 settings just truncates the white top border. I have renamed a css page just for the page with the long doors for now, will post these 2morrow and give links

It is only one page that renders door fronts which are taller than wide and on my machine the task bar autohides

Rgds

Bernie

[jscheuer1]

You may want to switch to Lightwindow, one of the lightbox type scripts I was mentioning:

http://www.stickmanlabs.com/lightwindow/#features

Ultimately though, you probably want a jQuery powered lightbox because it would use the same script library as your Simple Gallery (you could get rid of all the baggage of prototype.js and its helper js files). But, Simple Gallery is currently stuck on jQuery 1.2.6 or I would have suggested this sooner (jQuery is currently at 1.3.2, and most current jQuery lightbox type scripts use that version).

Ideally what we would want to do is to find a jQuery lightbox type script that either uses jQuery 1.2.6, or one that uses the current version of jQuery and that in either case supports this resizing feature. Then it could either be used with Simple gallery (if it works with jQuery 1.2.6), or with Ultimate Fade 2.1 (if it uses jQuery 1.3.2). Ultimate Fade 2.1 can be setup to do most of what you are doing with Simple Gallery, and where it would differ it might actually be easier on your users.

[Bernie Kruger]

You may want to switch to Lightwindow, one of the lightbox type scripts I was mentioning:

http://www.stickmanlabs.com/lightwindow/#features

Ultimately though, you probably want a jQuery powered lightbox because it would use the same script library as your Simple Gallery (you could get rid of all the baggage of prototype.js and its helper js files). But, Simple Gallery is currently stuck on jQuery 1.2.6 or I would have suggested this sooner (jQuery is currently at 1.3.2, and most current jQuery lightbox type scripts use that version).

Ideally what we would want to do is to find a jQuery lightbox type script that either uses jQuery 1.2.6, or one that uses the current version of jQuery and that in either case supports this resizing feature. Then it could either be used with Simple gallery (if it works with jQuery 1.2.6), or with Ultimate Fade 2.1 (if it uses jQuery 1.3.2). Ultimate Fade 2.1 can be setup to do most of what you are doing with Simple Gallery, and where it would differ it might actually be easier on your users.

You're a cruel man John :p

Man just when I thought I had jazzed uo the site with the latest and greatest, you tell me about this *sigh*

Well the year is winding down and I do not anticipate any new business in our silly season so I guess I will try implementing some of these features.

The view of the external website via a "lightbox, is a nice feature and I can probably now drop the frames ( I hope you are clued up on this as I am sure there will be many Q's from me)

I think I will publish what I have done and then cut the lawn tomorrow. I have "winders eyes", need to get them focused on stuff further than 24"

Thanks for all tyhe help so far :)

[shahzad79]

Hi John,

Can you please help me as menu is not working due to lightbox on this page

http://masielbebe.co.uk/detail.php?prodid=72

Thank you in advance for your help


Thanks,
Shahzad