Any Lighbox 2 users?

Wiggins

Wiggins

Wiggins

Soldato
Joined
14 Sep 2006
Posts
3,664
Location
Dorset Apple Cake
Afternoon all. :)

I want to add a gallery to a website and thought about using lightbox. It looked quite straight forward for the amateur person so I'm having a go.

This is the current code I have for the image.

Code: 
<a href="images/SDC12002.jpg" rel="lightbox" title="my caption"> <img src="Gallery Pics/SDC12002.jpg" rel="lightbox" alt="" width="167" height="146" /></a>

When I click on the image, I get a page showing 'The requested URL /images/SDC12002.jpg was not found on this server.'

I do have the images uploded to the server and also the Lighbox CSS file.

What am I doing wrong guys?

Any help would be appreciated as I am a little new to all this.
 
At a guess, your img src folder needs to be renamed to a single phrase rather than "Gallery Pictures", choose "images" or "gallery".

:)

Here's an example of mine

Code: 
<a href="images/img1.jpg" rel="lightbox[properties]" title="Living Area" class="noBorder"><img src="images/img1-thumb.jpg" alt="Living Area" /></a>
 
Last edited:
Code: 
<a href="Gallery%20Pics/SDC12002.jpg" rel="lightbox" title="my caption"> <img src="Gallery%20Pics/SDC12002.jpg" rel="lightbox" alt="" width="167" height="146" /></a>

You need to have thumbnails though. All you're doing here is scaling the big image into a 167x147 area, users will still have to download the full-sized one.

Here's an example using a thumbnail file named "Gallery%20Pics/SDC12002.th.jpg

Code: 
<a href="Gallery%20Pics/SDC12002.jpg" rel="lightbox" title="my caption"> <img src="Gallery%20Pics/SDC12002.th.jpg" rel="lightbox" alt="" width="167" height="146" /></a>
 
Thanks guys. :)

The img folder actually solved the problem.

Pho, here is the test area i'm trying the page out on.

removed

When you mean thumbnails, do you mean I should have a directory for the thumbnail images and one for the full size image once lightbox opens it? Sorry if I sound a little n00bish. :o

One problem I have is once the pictures are opened, 'next' 'previous' etc are not showing below the image. I have them uploaded to the images folder but nothing shows.
 
Last edited:
It's pretty broken in Firefox tbh :o.

For the thumbnails: yep, exactly. The thumbnails should be the same size as the small images you want to display on the page, then when you click them the big image is downloaded as normal.

To get next/previous try this. Change all your:
Code: 
rel="lightbox"
parts to:
Code: 
rel="lightbox[building]"

each [xx] should denote a new 'set' of images for next/previous.
 
Broken?

What have I done? :eek::o

Thanks for the thumbnail help. :)

Not too sure what you mean by 'each [xx] should denote a new 'set' of images for next/previous.'

Does that mean that [xx] would be the next image name?

What a n00b I am. :rolleyes:

lol
 
Because of how the menu roll-overs are done, if you put your mouse on the very edge of the text it keeps flickering on/off. That's because you change to a smaller font when your mouse goes over it, which then causes your mouse pointer to not be within the text anymore so it goes back to the normal size and that keeps repeating. In other words, don't change the font size - change it's colour, underline it etc instead.

Also, in Firefox the first time I clicked on one of the images the slide down effect caused the content to get slid down too.. looking slightly odd :D.

Basically what i mean, is say you have several sets of images on a page, let's say:
Building 1
Building 2
Building 3

For all images in the building 1 set use:
Code: 
rel="lightbox[building1]"
For all images in the building 2 set use:
Code: 
rel="lightbox[building2]"
For all images in the building 3 set use:
Code: 
rel="lightbox[building3]"

This way the next/previous buttons will only switch between images in that set, not all the images on the page. Of course, if you want to scroll through every image use the same rel for everything. i.e.:
Code: 
rel="lightbox[images]"
line for every image.
 
Ahhhh I gotcha. :)

I don't need sets at the moment as there will only be around 15 images and the guy wants them all showing on the page. A damn good idea though and I will keep you're advice in mind if he wants different sets of images. I still cannot get the next/previous images to show when lightbox opens. Should I be looking somewhere in the lighbox.css file?

I set the text to transform into lowercase when the mouse hovers over them as I could not for the life in me find out how to have the text change color. Every attempt to change the a:hover settings resulted in the background of the text changing. I'm using Dreamweaver by the way.

This is what its set at:

Code: 
a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
}

a:hover {
	color: #FFF;
	text-decoration: none;

    background-color: #;
	font-weight: bold;
	font-style: normal;
	font-size: 12px;
	text-transform: uppercase;

That does look a little strange having the content move when first clicking on the image. Not sure how to edit that.

If all else fails on Lightbox 2, I may just add Visual Lightbox to it instead.
 
Last edited:
The next button works now.. hover your mouse over the right side of the image when it comes up and look towards the top right :p.
 
Personally I'd prefer it as a link at the bottom as it took me a while to notice it as well :D.
 
Last edited:
Wahay, another n00b lightbox question.

I did look at the basic setup on the Lighbox website and they do say check the CSS and make sure the referenced prev.gif and next.gif files are in the right location.

Not much text in there.

Code: 
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

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

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

How would I have them as a link at the bottom instead? :) It would look better tbh.

I deleted the prototype file and lightbox fell over so I added it back.

Ahhh do I edit the 'prevlink' and 'nextlink' to float at the bottom? :)
 
Ok, for Lightbox it might be easier to switch to another release. I used Slimbox ages ago which seemed to work nicely and seems to give you more options.
 
Thank you sooooo much. :D

You didnt have to do that fella but I really appreciate that. :)

Whilst trawling the forums, I did come accross many members reccommending Slimbox.

I will give it a go and thank you again.
 
:) np. If you use it you can remove all those Prototype JavaScript files as this uses a different system.

If you have any problems with it post here and I'll see what I can do.
 
IMO Lightbox is really overused these days. I yawn when I see another Lightbox site. Personally I like Highslide.

Also, I'd do something with that big header image. For people with small resolutions, it's going to push your actual content off the screen and make people scroll to see it - that's never good.
 
Mattus, thank you for you're input. I have resized the header. Does this look better?

Pho, I have incorperated the edited html/css into the origional site creation and it's getting there. Official site is www.plugscaffolding.co.uk

I will have a play around with both Slimbox and Highslide and see what the owner of the site prefers. I can see me asking for a little help if you do not mind.

A little off topic from Lightbox, but would it be an idea to just have the search engines crawl the index of the home and services page but not the gallery and contact page?
 
Last edited:
I thought I would keep my findings in the same thread.

After pho's fantastic help cleaning up the HTML, I thought I would use FF, Chrome, Opera, Safari & IE7 to see if the website shows correct.

Well, all is good apart from IE7. When viewing the website in IE7 the menu's and left margin end up the bottom of the page. :confused:

Would someone be so kind as to help me with this?

HTML is here.

Thank you :)
 
Last edited:
might have already been said but... always make sure you've got the case correct. Bad practise to have a mixture. I tend to write everyhting in lowercase and force pictures from people to lower as well... people tend to give you stupid file names like... Dsc-Pic 3 new(5).jpg

and then the rest of the images are totally out of consistency as well :@ lol
 
You must log in or register to reply here.
Back
Top Bottom