Need a little step by step help, lighbox image viewer v2.03a

**steviebob** · 11-24-2009, 11:08 AM

1) Script Title:Lightbox Image viewer v2.03a

2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:
Hi, new to this site and have found some great stuff and help for my own website, still in the making. Everything so far has been plain sailing. apart from this one application. I like it allot and would like to include it on my own website, but i just can't understand the instructions and get it to work on my site. I am unsure of how it works or how i am meant to apply it to my site. A detailed step by step instruction guide would be amazing, and thanks in advance for any help provide. P.s i am a student at the minute, so not top dog in all this stuff lol explaining the need for the step by step instruction guide.

**jscheuer1** · 11-24-2009, 12:44 PM

The first thing you should do is get rid of v2.03a. It has some problems. Use v2.04a - though not perfect (I doubt any complex script is) has several improvements and bug fixes over v2.03a. The v2.04a script can be used to do anything that the v2.03a script can do, and the markup (the HTML <a> link tags on a page that activate those features) is the same for those features, but v2.04a has other things you can do as well.

Now regardless of which script you use, the steps are about the same, but virtually none of the files used (other than the images), though many are of the same name, are interchangeable from one version to the other. And 2.04a has an extra file (builder.js) which must be used.

Here is the demo page for 2.04a:

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

Here is the archive:

http://home.comcast.net/~jscheuer1/s...htbox2.04a.zip

The demo page (index.html - a few other demo pages are included in the archive, which show some of the more extended features in use and/or how to combine the script with another), anyways the demo page has pretty much the step by step instructions.

The only thing not covered in detail for basic installation is the placement of the various scripts and other files (css, images) used. If you download the archive and unzip it with its directories, all of that will already be in the right place, and may be used as a guide as to how to organize the script and its files (often called resource files) for your site.

One may also look at (in a plain text editor like NotePad) the source code for the index.html page to see how things are done. In fact, if and when you want to alter any of the files involved, a plain text editor like NotePad should be used, and is what is preferred for when you install the script on your page.

That's pretty much it. If you have any questions though, feel free to ask.

**steviebob** · 11-27-2009, 12:00 AM

Thanks for the reply.
I checked out v2.04a and to be honest it looks identical and does the same as v2.03a. Can you enlighten me with the advantages or reasons to change?? please excuse my ignorance as i am just a beginner.

also i have got on well with the other coding, but it doesnt open the images with the light box affect, its opening them in a new page which is pretty annoying. here is what i have in my html tab, please note this is an experiment page just to try get this to work, i have done different things for some pics to get it to work, tried different options, you will see what i mean. but if you can spot why or no why its not working properly, i would love it if you could point me in the right direction

thanks a million
steviebob

Code:

 <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Thumbnail</title>


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox2.03a/css/lightbox.css">
</head>

<body>






<p align="center">
<a href="lightbox2.03a/images/Picture or Video 205.jpg" rel="lightbox[picture]"> <img border="0" src="Thumbnail%201_small.jpg" width="100" height="130" xthumbnail-orig-image="lightbox2.03a/images/Thumbnail 1.jpg"></a>
<a href="lightbox2.03a/images/Picture or Video 194.jpg" rel="lightbox[picture]"> <img border="0" src="Thumbnail%202_small.jpg" width="100" height="122" xthumbnail-orig-image="lightbox2.03a/images/Thumbnail 2.jpg"></a>
<a href="lightbox2.03a/images/Picture or Video 874.jpg" rel="lightbox[picture]"> <img border="0" src="Thumbnail%203_small.jpg" width="100" height="147" xthumbnail-orig-image="lightbox2.03a/images/Thumbnail 3.jpg"></a>

<a id="lightbox" target="_parent" href="lightbox2.03a/images/Picture%20or%20Video%20205.jpg" rel="lightbox">  
<img border="0" src="Thumbnail%201_small.jpg" width="100" height="130" xthumbnail-orig-image="lightbox2.03a/images/Thumbnail 1.jpg" align="left"></a></p>



<p align="center">
<a target="_self" href="lightbox2.03a/images/Picture%20or%20Video%20194.jpg" rel="lightbox"> <img border="0" src="Thumbnail%202_small.jpg" width="100" height="122" xthumbnail-orig-image="lightbox2.03a/images/Thumbnail 2.jpg"></a></p>



<p>
<a id="lightbox" href="lightbox2.03a/images/Picture%20or%20Video%20874.jpg" rel="lightbox"> <img border="0" src="Thumbnail%203_small.jpg" width="100" height="147" xthumbnail-orig-image="lightbox2.03a/images/Thumbnail 3.jpg"></a></p>



</body>

</html>

p.s im using frontpage

**jscheuer1** · 11-27-2009, 01:41 AM

There are, as I said, many improvements and bug fixes. In addition to those mentioned here:

http://www.dynamicdrive.com/forums/s...470#post163470

which is where 2.04a was first introduced (the advantages over plain 2.04 are also advantages over 2.03a, except the linking, but the targeting and everything else is new over 2.03a), the 2.04 edition in general made a significant change that allows for content (links using the lightbox syntax) written to the page (by ordinary scripts or by AJAX) after lightbox has initialized will still respond to the lightbox script without any special measures needing to be taken.

Now the problem you are having generally means that one or more of the lightbox script files are not where they are indicated to be by this section of your HTML code:

Code:

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

But there could be other problems as well or instead of that. The best way for me to help, if the above explanation doesn't solve it for you, would be for you to put the page up live and provide a link to it for diagnosis purposes:

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

Thread: Need a little step by step help, lighbox image viewer v2.03a

Thread Tools

Search Thread

Need a little step by step help, lighbox image viewer v2.03a

Bookmarks

Bookmarks

Posting Permissions