Log in

View Full Version : Help needed: lightbox 2.03a script


itsshai
12-29-2013, 04:38 PM
Hello,

Firstly, I apologise if I am posting in the wrong forum. It actually took me a while to navigate around and create a thread. :( I don't exactly know which forum my question actually falls under, either...

Anyways, I am attempting to use the lightbox 2.03a (Lightbox Image Viewer 2.0) on my page.
Here is the website link: http://www.shaib.webs.com/trial.html

This is the coding I'm using in my trial page (I had to extract the bits related to the lightbox from the original coding so I don't get confused).


<!doctype html>
<head>

<title> JENESYS 2.0 REPORT </title>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

</head>

<body background="wooden.png">
<body bgcolor="#E6E1C5">

<div id="album" style="position:absolute; z-index:30; left:80px; top:80px; overflow:hidden; width:680px; height:100%;">
<a href="gallery/IMG_0001.jpg" rel="lightbox[jenesys]" title="caption here"><img src="gallery/0001.png"></img></a>
<a href="gallery/IMG_0001.jpg" rel="lightbox[jenesys]" title="caption here"><img src="gallery/0002.png"></img></a>
<a href="gallery/IMG_0001.jpg" rel="lightbox[jenesys]" title="caption here"><img src="gallery/0003.png"></img></a>
</body>
</html>

I have enough knowledge of HTML and CSS to get me through and allow me to make some form of a website :p I am also using webs.com (freewebs.com) as my server to host my pages. I have uploaded the necessary files (lightbox.css, lightbox.js, scriptaculous.js and prototype.js) along with the necessary image files. These are all stored in folders in my Webs file manager. I have double checked and all my src="" links are correct in my <HEAD> section and also in the external files. I really don't know what I'm doing wrong...

Help would be greatly appreciated. :)

Thank you!
jscheuer1
12-29-2013, 05:21 PM
This script is a bit out of date but to fix this installation, upload effects.js from the distribution archive to:

shaib.webs.com/
itsshai
12-30-2013, 02:37 AM
Thank you very much! That did the trick.

Another thing, if you could please help me again.. is it possible to specify a specific size to the larger image when loaded, rather than me resizing each larger photo individually?

(Did that even make much sense?)


Edit: When I group the photos using the rel="lightbox[]" tag, it doesn't seem to work. The "next" and "previous" buttons, (sourced correctly in the lightbox.css file) do not appear ... The image only opens and loads, without the ability to navigate left or right...
jscheuer1
12-30-2013, 04:56 PM
The page:

shaib.webs.com/trial.html

Doesn't seem to be there now.

But to answer your questions, the path to images (like prev.gif, next.gif, etc.) in the css file is relative to the css file. Also, simply using:

rel="lightbox[]"

might not work, it's supposed to have a group name:

rel="lightbox[groupname]"

all images with the same group name should work with the next/prev buttons.

There could also be other problems.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.


About resizing, there's nothing built into this script for that. Some of the other more recent Box type scripts have the ability to resize the image according to how much space is available on the page and/or to accept a specific size for an image or group of images. See:

http://fancybox.net/

or:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

for two such scripts. You can use Google to find other of these Box type scripts to see if any of them suit you better. There is a commercial version:

http://visuallightbox.com/

That might be worth using if this is for a commercial site.
itsshai
12-30-2013, 05:06 PM
I've sorted it all out! I used another script that is similar to lightbox but caters for my needs. It's the Slimbox.

Thank you very much for all your help and time. :)