PDA

View Full Version : Resolved help with lytebox appreciated



smokeyone
12-30-2008, 07:21 PM
Hello
I must admit I am a newbie to web building/css/javascript etc so would be very grateful for any advice regarding Lytebox please.
I have installed it and it works after a fashion. However the buttons are missing and although I have uploaded the files I assume I have missed a link somewhere. Also how do I layout the thumbnails on the web page like a gallery please - four cols would be great. At the moment I am just experimenting with align left but feel sure there is a better way.
Thank you for any help.

Link to web page
http://voyagerspoland.info/Photos.htm
Link to image of files
http://s166.photobucket.com/albums/u113/smokeyone2007/?action=view&current=filing.jpg

Snookerman
12-30-2008, 07:43 PM
The css points to this image:

http://voyagerspoland.info/images/next_grey.gif
which does not exist.

smokeyone
12-31-2008, 07:33 AM
Thanks for pointing me in the right direction but please tell me where the
css is!

Snookerman
12-31-2008, 09:32 AM
If you look at your .css file (http://voyagerspoland.info/js/lytebox/lytebox.css), you will find the code for the previous image on row 34 (#lbPrev) and the code for the next image on row 41 (#lbNext).

smokeyone
12-31-2008, 10:16 AM
Thank you for your patience but I do not see the connection.
I found the lines you mentioned and the link on my page points to the lytebox css file !!
Where am I missing the point....do I need to add another link to my page....
Thanks again

Snookerman
12-31-2008, 10:32 AM
Look at this line in your css:

#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }

and this line:

#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }

The highlighted part is the url to your prev and next images. Make sure that points to the correct place, where you have the images. To be sure you get it right, set the entire path, e.g.
url(http://www.example.com/images/prev_grey.gif) but of course on your site.

smokeyone
12-31-2008, 11:07 AM
Almost there and thanks again.
Does this seem correct to you.......
{ background: url('http://voyagerspoland.info/js/lytebox/next_grey.gif')

In my uploaded files the lytebox css file is in a folder named lytebox.
The complete gallery upload folder is called js which contains two files..
one called pix and one called lytebox.

Also do all the url's need to be amended or just the ones you mentioned and do I change all mentions of "images" to lytebox !

Now I understand it a bit better I think the lytebox css file is the same as lightbox css which does have an images file. Lytebox did not come with an images file - would it be better to create one!

Thanks very much

Snookerman
12-31-2008, 11:44 AM
The other urls are for other colors. Since you are using the grey one, you don't need to care about the other ones. I see that it works fine now, do you have any other questions? If not, you can go to your first post in this thread, click edit, then go advanced and then add the Resolved prefix for this thread.

smokeyone
12-31-2008, 11:57 AM
You have been really good about helping me out - thank you.
Can I assume I do the same with 1b close to get the "close" button to appear
and have you a suggestion please to tidy the web page thumbnail layout.
Is there a css file I need to add to create the gallery effect!
Thank you again

Snookerman
12-31-2008, 12:23 PM
Yes, do the same thing for the close button (#lbClose).

I don't really know how you want to tidy it, but the reason the images appear on different rows is because they are wrapped in <p></p> tags. Remove those to have them on the same row (if you want that of course).

I also don't know what kind of gallery effect you are looking for (the lytebox itself is a gallery effect), but you can find quite a few on Dynamic Drive (http://www.dynamicdrive.com/dynamicindex4/indexb.html).

smokeyone
12-31-2008, 12:51 PM
To be honest with you - I would be happy for any gallery effect as I have had so much trouble. <p> tags removed but not quite correct yet - does the align left need to be altered or is there something I need to do to have the lytebox gallery - any ideas are okay so long as they are neatly laid out on the page. I would like to add around fourty images to the web page and so far I can get them to list downwards only but not laid out as they should be like five across and eight down.


<a href="js/pix/P1050671.jpg" rel="js/lytebox[gallery]" title="Your Description">align="left"><img class="boxed" src="js/pix/P1050671.jpg" alt="Description" width="101" height="76" /><</a>

Thank you

Snookerman
12-31-2008, 01:32 PM
Here is a suggestion, you can copy it into your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div#imgwrapper {
width: 525px;
}
div#imgwrapper img {
border: none;
width: 101px;
margin: 2px;
}
</style>
</head>
<body>
<div id="imgwrapper">
<a href="js/pix/P1050671.jpg" rel="js/lytebox[gallery]" title="Your Description"><img class="boxed" src="http://voyagerspoland.info/js/pix/P1050671.jpg" alt="Description"></a><a href="js/pix/P1050672.jpg" rel="js/lytebox[gallery]" title="Your Description"><img class="boxed" src="http://voyagerspoland.info/js/pix/P1050672.jpg" alt="Description"></a><a href="js/pix/P1050673.jpg" rel="js/lytebox[gallery]" title="Your Description"><img class="boxed" src="http://voyagerspoland.info/js/pix/P1050673.jpg" alt="Description"></a><a href="js/pix/P1050677.jpg" rel="js/lytebox[gallery]" title="Your Description"><img class="boxed" src="http://voyagerspoland.info/js/pix/P1050677.jpg" alt="Description"></a><a href="js/pix/P1050678.jpg" rel="js/lytebox[gallery]" title="Your Description"><img class="boxed" src="http://voyagerspoland.info/js/pix/P1050678.jpg" alt="Description"></a><a href="js/pix/P1050679.jpg" rel="js/lytebox[gallery]" title="Your Description"><img class="boxed" src="http://voyagerspoland.info/js/pix/P1050679.jpg" alt="Description"></a>
</div>
</body>
</html>

Note that you don't have to specify the width of the images in the img tags for each image, I did that with one line of css and that is a lot easier to change if you want them bigger. As you can see I gave each image a margin of 2px which means the width of each image will be 2 + 101 + 2 = 105px. So if you want five on each row you will have 5 * 105 = 525px which should be the width of the wrapper div.

smokeyone
12-31-2008, 03:53 PM
That's brilliant - thanks very much. Still managed to cut and paste in the wrong place though.
Does the head part go in the head & the body part go in the body. If so when I tried it the thumbnails are elongated and all over the place.
Thanks again

Update - I have found one of the problems - every time I return to the coding - it has changed and inserted very large sizes for the thumbnails - by itself - I did not do it...I change it back..and next time it's changed again...


Newsflash...fanfare of trumpets needed...it's done...it works. Brilliant - thank you very much indeed. You probably cannot guess how much time I have spent fiddling with lytebox and prior to that lightbox & others.
If you get the chance would appreciate knowing how to put the text above the images instead of below but it actually works anyway. Thanks again.
Happy New Year

Snookerman
01-01-2009, 01:35 PM
You're welcome! I changed the .js file slightly so the text would appear above the images:
2389
You will have to play around with the borders in the .css file to make it look good this way.

Good luck!

smokeyone
01-01-2009, 03:48 PM
I do appreciate the help. I now have something working from which to develope the gallery.
Thanks very much again
Happy New Year