PDA

View Full Version : Lightbox 2.04 and another script(s)



thephotographer
11-10-2010, 11:20 PM
Hello,

I've 3 scripts working on a page:
One change the image background with an onload parameter
<body onLoad="randomBg();" "startLightbox()">
(I've tried changin this various time, deleting quotes, changing the location of the properties or deleting one of them.)

One "animate" a menu;

Another make a view of images into gallery with Lightbox.

The last one it doesn't work. I've tried checking the parameters than other users have displayed on this forum, but at now without results.
if other informations of code are required, please contact me!
The lighbox version is 2.04.

Thanks in advance,

Fabio

jscheuer1
11-11-2010, 12:17 AM
Lightbox v2.04 requires nothing in the body onload, so (assuming the random background script does) use:


<body onLoad="randomBg();">

You've shown us nothing about the animated menu script and very little about the random background script. I know about Lightbox though, as long as 2.04 is the version, I know it very well.

In any case, if you want more help:

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

thephotographer
11-11-2010, 04:02 PM
I work locally, that's why I don't have posted links.
I prefer work locally and, when the website will be finished, I will upload it to my hosting.
But, no problem - when I return at home after work (in 2 hours), I will post scripts and every info I can gave.

Thank you so much, and sorry for the mistaken caused by my poor English language knowledge.
Hope you understand what I mean, I will do my best for traslate as well as possible.

Regards,

Fabio

thephotographer
11-11-2010, 07:26 PM
first script: Background change at every refresh / access
html:
<body onLoad="randomBg();">

script:
<script type="text/javascript">
function randomize(min, max) {
if (!min)
min = 0;
if (!max)
max = 1;
return Math.floor(Math.random()*(max+1)+min);
}
function randomBg() {
var bgs = new Array();
bgs.push("backgrounds/01.jpg");
bgs.push("backgrounds/02.jpg");
bgs.push("backgrounds/03.jpg");
bgs.push("backgrounds/04.jpg");
bgs.push("backgrounds/05.jpg");
bgs.push("backgrounds/06.jpg");
bgs.push("backgrounds/07.jpg");
bgs.push("backgrounds/08.jpg");
bgs.push("backgrounds/09.jpg");
bgs.push("backgrounds/10.jpg");
bgs.push("backgrounds/11.jpg");
bgs.push("backgrounds/12.jpg");
bgs.push("backgrounds/13.jpg");

document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";
}
</script>

Fully working.

Second Script: Animated Men¨

<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.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/*
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>

Use CSS and its fully working.

for insert the gallery I've used CSS and HTML, except for lightbox -then I used the information on this website:

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

THis third part doesn't work.
The gallery is visible and its fine, but the images will be loaded on a new page.
I've searched for a solution on many website or forums but without results.
Hope than the information provided will be useful.

Fabio

jscheuer1
11-12-2010, 12:57 AM
Assuming that's how you have them installed, it could work. The first suggestion I would have though is to make sure you can get Lightbox 2.04 working on its own, on a page with no other script. It's a complicated script with numerous support files. Once you're sure you have that working, set up the page like so (I've changed the first line of the animated menu script and added a line in front of that, both of those lines highlighted):


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function randomize(min, max) {
if (!min)
min = 0;
if (!max)
max = 1;
return Math.floor(Math.random()*(max+1)+min);
}
function randomBg() {
var bgs = new Array();
bgs.push("backgrounds/01.jpg");
bgs.push("backgrounds/02.jpg");
bgs.push("backgrounds/03.jpg");
bgs.push("backgrounds/04.jpg");
bgs.push("backgrounds/05.jpg");
bgs.push("backgrounds/06.jpg");
bgs.push("backgrounds/07.jpg");
bgs.push("backgrounds/08.jpg");
bgs.push("backgrounds/09.jpg");
bgs.push("backgrounds/10.jpg");
bgs.push("backgrounds/11.jpg");
bgs.push("backgrounds/12.jpg");
bgs.push("backgrounds/13.jpg");

document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";
}
</script>
<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.easing.1.3.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
/*
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body onload="randomBg();">

</body>
</html>

The order of the scripts is important. Put any additional styles before the first script. Fill in the title tag as desired. Put whatever markup is required in the body.

If you want more help, put up a live demo somewhere I can have a look at it.

thephotographer
11-12-2010, 01:07 AM
Really thanks for everything you provided, unfortunately I can try to modify it only on monday, cause I' will be out for a liveshow shooting.

I've understand that the order is really important, cause I've changed location of the scripts in the file and, at every change, the website appear for example much slower or blocked, or faster.

The next time I think I will provide to you the code entirely, uploading the website.

At now I assume that's completed at 70 / 75 %, and its a good results for a newbie like me.

Surely it will be better in a future, but I appreciate the actual result.
I will feedback you soon about the results, and žI really hope it works

really thank you.

Fabio

thephotographer
11-15-2010, 05:45 PM
Hello,
Actually I've tested lightbox and it works if its in a page by itself.

I've uploaded a page of the website: here below you can find it:

www.fabiomancin.com/xyz.html

Hope you can help me,

Thank you,

Fabio

jscheuer1
11-15-2010, 08:11 PM
Your live demo has the lightbox scripts twice in the head. The first are in the wrong place. Go back to my previous post and follow the instructions given there.

Also, all the lightbox scripts and stylesheet are all 404 not found. Install them on the live demo at least as well as on the local copy you have that is working.

Looks like the scripts are in the root, not the js folder. I couldn't find the stylesheet.

The prototype.js file appears to be out of date as well, use version 1.6.0.2 which comes with the lightbox 2.04 package.

thephotographer
11-16-2010, 06:08 AM
I've inserted all of the CSS properties in the style.css, for have a unique CSS stylesheet.
I've leave the second script as well and update all of the code path.
Of course, I've update the script, as you've tell.
This solution have worked one time, with script loading, and now seems to doesn't work newly.

Thank you for your precious support.

Fabio

jscheuer1
11-16-2010, 06:57 AM
This solution have worked one time, with script loading, and now seems to doesn't work newly.

What does that mean? It works here. The images are way too large in both dimensions and byte size though. So subsequent lightbox activations appear to overtake the page. It looks as though a new page is loading.

I think what you are getting at is that once the lightbox opens, subsequent lightboxes almost look like a fresh page. But it really is a lightbox. If you scroll down far enough to the right and bottom you will see the close button.

Fix the dimensions on the images (resize and optimize them in an image editing program) and you won't have such a large lightbox.

thephotographer
11-16-2010, 03:18 PM
I've found an error, I've saved and it works now.
For the images, I've uploaded only a test page with test images, tomorrow I will refine everything - including CSS.

Thank you,

Fabio

thephotographer
11-23-2010, 09:49 PM
ok everything is working now.

I'm just one more thing to do, and I wanna ask if I can do it on the lightbox.js file.

I wanna leave entirely all of the imagedata displayed.
At the moment I've leave the previous and next images, but I wanna Leave the close button and, more important, the data for "image 1 of 10" while images are grouped.

Could someone please help me, or reply if its possible or not?

Thank you,

the website is visible at http://www.fabiomancin.com

Fabio

jscheuer1
11-23-2010, 10:31 PM
I see you've tried to get rid of stuff by commenting it out in the css. I'd leave one part in and change it:


#imageDataContainer{display:none!important;}

Do you want to lose the next/previous functionality as well? If so, don't use a group name. Use rel="lightbox" instead of like rel="lightbox[Venice]".

Bit it's fine like it is for that part, as long as you don't mind there being a sort of hidden next/previous feature.

thephotographer
11-23-2010, 10:48 PM
Hi John,

I wanna mantain the functionality, but I wanna delete or make it disappear the code "image number of total" when I group.

jscheuer1
11-23-2010, 11:08 PM
Do you also want to maintain the next and previous images on hover?

What exactly is to be the finished look?

What should still be there?

What should not be there?

thephotographer
11-24-2010, 08:40 AM
Hi john,

Finally it remain the functionality and the enlarged image when I click on a thumb, without any text visible.

I prefer minimalism, and in this case will be perfect for touch devices.

Closelabel, close, previous and next button are not visible, the same as caption description and image count.

Please ask me for doubt or question, but if you see a gallery on my website for example www.fabiomancin.com/marble.html, clicking on an image, the image will be displayed, but on the left there's a little part of code released by javascript and lightbox --> I wanna leave this, it's the ponly thing remaining.

After that I will check compatibility for IE -.-

At the moment remain only a problem on firefox, cause every image in the gallery have a blue frame - and check entirely why IE doesn't support "top" in CSS.

Thank you,

Fabio

jscheuer1
11-24-2010, 11:00 AM
I think I've got it. The only thing that puzzles me is your use of the word "leave". The English word "leave" can mean either "go away" or "keep", it depends upon the context. In the context you use it in "leave" means "keep". But I think you mean "go away". I'm just not sure. I'm guessing English isn't your primary language, but that only explains why I'm having trouble understanding. It gives me no clue as to your actual meaning. I'm guessing "go away" because everything else you say seems to indicate that, and because keeping it, at least in its current form, would look bad.

To get rid of that (as I said) in the css:


#imageDataContainer {display:none!important;}

To fix the blue borders on the thumbnails:


a img {border-width: 0;}

IE does support "top" in css. To see why you're having trouble with it I need to know where it's a problem. I'm guessing:


gallery {
Background-color: none;
top: 560px;
text-align: left;
width: 850px;
height: 200px;
position: absolute;
left: 20px;
}

If so, gallery isn't a valid HTML tag. It's up to the browser as to how to interpret it. Firefox, and some others treat it as a div. IE treats it as a self closing tag, like img.

So change the above to:


div.gallery {
Background-color: none;
top: 560px;
text-align: left;
width: 850px;
height: 200px;
position: absolute;
left: 20px;
}

And in the markup change:


<gallery>
<a href="images/marble/00.jpg" rel="lightbox[marble]"><img src="images/marble/00.jpg" width="75" height="75" alt="" /></a>
<a href="images/marble/01.jpg" rel="li . . .

. . . ble]"><img src="images/marble/18.jpg" width="75" height="75" alt="" /></a>
<a href="images/marble/19.jpg" rel="lightbox[marble]"><img src="images/marble/19.jpg" width="75" height="75" alt="" /></a>
</gallery>

to:


<div class="gallery">
<a href="images/marble/00.jpg" rel="lightbox[marble]"><img src="images/marble/00.jpg" width="75" height="75" alt="" /></a>
<a href="images/marble/01.jpg" rel="li . . .

. . . ble]"><img src="images/marble/18.jpg" width="75" height="75" alt="" /></a>
<a href="images/marble/19.jpg" rel="lightbox[marble]"><img src="images/marble/19.jpg" width="75" height="75" alt="" /></a>
</div>

thephotographer
11-25-2010, 11:54 PM
Hi John,

Yes, you're right - My first language is italian, and in some cases what I mean its difficult to explain - I need more technical words in my own english vocabulary.

so, In a Phrase:
I wanna mantain all the actual functionality, but not show it with something really "visible" - like buttons.

hope it can be better than my previous post and explain.
I try immediately changing the code and check it.

;)

thephotographer
11-26-2010, 03:52 PM
Everything Perfect, except one thing: under IE the lightbox script doesn't work, I really don't know why.
I've tested under IE 7, 8 and 9 Beta.

Every other browser works well: Opera, Firefox, Chrome, and Safari.

Another thing is the position of footer in IE, but I will use the same process used for <gallery> ;).

jscheuer1
11-26-2010, 05:48 PM
Works here in IE 8 on the fabiomancin.com/venice.html page. But in IE 8 in IE 7 mode I get:


Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Fri, 26 Nov 2010 17:37:30 UTC


Message: Expected identifier, string or number
Line: 63
Char: 1
Code: 0
URI: fabiomancin.com/lightbox.js

That's because you edited the script incorrectly here (see highlighted lines, error in red):


//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

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

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
//labelOf: "of"
}, window.LightboxOptions || {});


By strict rules (error corrected by IE 8 in IE 8 standards mode and most other modern browsers) there can be no comma following the last item in an Object or an Array.

So, that should be either:


labelImage: "Image" // <-- no comma here
//labelOf: "of"

or:


labelImage: "Image",
labelOf: "of"

I'd go with the second one, as we've already gotten rid of that in the css.

Make the change and clear the cache. There could still be other problems.

thephotographer
11-26-2010, 07:58 PM
Dear John,

On IE 9 I've tested succesfully.
the only problem remaining is the footer - I've follow your instructions creating a "div class" called "footer".
But it remain in the top of the page.

Strange, cause I've used the same instructions you've provided yesterday on the other div class called "gallery" and it will be fine.

Fabio

jscheuer1
11-27-2010, 05:49 AM
You haven't changed the css file yet. Make:


footer{
font-size: 12px;
font: arial, helvetica;
font-family: sans-serif;
color: #FFF;
text-align: justify;
text-transform: lowercase;
text-decoration:none;
text-shadow:2px 2px 2px #000;
position: absolute;
width: 850px;
height: 100px;
position: absolute;
margin-left: none;
top: 752px;
left: 20px;
}

be:


div.footer{
font-size: 12px;
font: arial, helvetica;
font-family: sans-serif;
color: #FFF;
text-align: justify;
text-transform: lowercase;
text-decoration:none;
text-shadow:2px 2px 2px #000;
position: absolute;
width: 850px;
height: 100px;
position: absolute;
margin-left: none;
top: 752px;
left: 20px;
}