PDA

View Full Version : Help with Lytebox please!



zimfin
09-28-2008, 11:16 AM
I hope I am posting this in the right place!
Apologies too if I don't explain this well, I am a complete novice.
I am creating my first portfolio and need my image thumbnails to open into a larger image using Lytebox. The problem is that I can not get it to work. I am using dreamweaver on a mac if that makes any difference. The reason I am confused is that I am not sure, EXACTLY, where to put the "<a href..." section of the code. In the example steps shown, it all looks very simple, but my thumbnails are placed using APdiv tags so my first 2 thumbnail images have code looking like this:

<div id="apDiv8"><img src="images/horned-digital.jpg" alt="" width="70" height="70" /></div>
<div id="apDiv9"><img src="images/lava-digital.jpg" alt="" width="70" height="70" /></div>

How do I add the lytebox code to this so my larger image opens and can move to the next image as shown in the examples? I know the larger images need to go first in the code. My larger image have the same names as the thumbnails except for a "1" added to the end of "digital".

I hope this makes sense!
Thanks in advance for any help you can give!
p.s. I am adding an attachment with my full page code so you can see if I am placing the code I have already used correctly!

philnolan3d
09-28-2008, 11:37 AM
I hope I am posting this in the right place!
Apologies too if I don't explain this well, I am a complete novice.
I am creating my first portfolio and need my image thumbnails to open into a larger image using Lytebox. The problem is that I can not get it to work. I am using dreamweaver on a mac if that makes any difference. The reason I am confused is that I am not sure, EXACTLY, where to put the "<a href..." section of the code. In the example steps shown, it all looks very simple, but my thumbnails are placed using APdiv tags so my first 2 thumbnail images have code looking like this:

<div id="apDiv8"><img src="images/horned-digital.jpg" alt="" width="70" height="70" /></div>
<div id="apDiv9"><img src="images/lava-digital.jpg" alt="" width="70" height="70" /></div>

How do I add the lytebox code to this so my larger image opens and can move to the next image as shown in the examples? I know the larger images need to go first in the code. My larger image have the same names as the thumbnails except for a "1" added to the end of "digital".

I hope this makes sense!
Thanks in advance for any help you can give!
p.s. I am adding an attachment with my full page code so you can see if I am placing the code I have already used correctly!

If it helps you can look at one of my image links:

<div id="thmb_helicopter_01"><a href="images/artwork/helicopter_01.jpg" rel=lytebox[gallery] title="Bell 407 Helicopter - WABC 7 in New York needed new commercials in HD for their Eyewitness News, so working with Shooters Post & Transfer I modeled and textured this news helicopter."><img src="images/graphics/thmb_helicopter_01.jpg" alt="Helicopter 01" width="80" height="70" border="0" /></a></div>


I also used Dreamweaver, but on a PC, I don't think the type of computer makes a difference (although PCs are better. :p ). This code is from the first image in my 3D gallery on my site, philnolan3d.com.

You can see where I put the HREF and the AP Div. The [gallery] part is what puts them all together to use Prev and Next. It can be any word, just so long as they all use the same word and you put it in the square brackets right after the word "lytebox" like I did. If you want to keep seperate groups like "My trip to Italy pics" and "my illustration pics" or whatever, you can use a different word for each group. That's how to seperate them. The title in quotes, is the caption text that appears under the big image. Hope that helps.

jscheuer1
09-28-2008, 11:41 AM
The file you attached shows no attempt whatsoever to use the Lytebox script. Go to its home page and follow all of the instructions there:

http://dolem.com/lytebox/


How To Use

Step 1: Download Lytebox v3.22

Step 2: Add the following lines to the <head> of your docu . . .

zimfin
09-28-2008, 12:16 PM
The file you attached shows no attempt whatsoever to use the Lytebox script. Go to its home page and follow all of the instructions there:

http://dolem.com/lytebox/

Ooops! You are right, I posted a previous example by mistake! Apologies!
Here is the up to date one!

zimfin
09-28-2008, 12:32 PM
If it helps you can look at one of my image links:

<div id="thmb_helicopter_01"><a href="images/artwork/helicopter_01.jpg" rel=lytebox[gallery] title="Bell 407 Helicopter - WABC 7 in New York needed new commercials in HD for their Eyewitness News, so working with Shooters Post & Transfer I modeled and textured this news helicopter."><img src="images/graphics/thmb_helicopter_01.jpg" alt="Helicopter 01" width="80" height="70" border="0" /></a></div>


I also used Dreamweaver, but on a PC, I don't think the type of computer makes a difference (although PCs are better. :p ). This code is from the first image in my 3D gallery on my site, philnolan3d.com.

You can see where I put the HREF and the AP Div. The [gallery] part is what puts them all together to use Prev and Next. It can be any word, just so long as they all use the same word and you put it in the square brackets right after the word "lytebox" like I did. If you want to keep seperate groups like "My trip to Italy pics" and "my illustration pics" or whatever, you can use a different word for each group. That's how to seperate them. The title in quotes, is the caption text that appears under the big image. Hope that helps.
Thanks! That bit of code you put makes it much clearer for me! I tried it though and it just opened a new browser window with my pic instead of the lytebox window. What else could I be doing wrong?

philnolan3d
09-28-2008, 12:54 PM
Do you have the Java installed as well as the code in the header of your page, as per the instructions on the Lytebox site?

zimfin
09-28-2008, 03:45 PM
Do you have the Java installed as well as the code in the header of your page, as per the instructions on the Lytebox site?
Not sure what that is exactly. If it was in the download from step 1 that I placed in my site files, then I think so. I know it is stupid not to know but I am just getting used to this and am not familiar with all the terminology. Could you be more specific?

jscheuer1
09-28-2008, 05:22 PM
He means the script and style tags. Java is not javascript, a common misconception. I see you have that:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

in the head of your most recent attached text. However, the script and stylesheet files referenced in those tags must be in the same folder as your page. And the lytebox markup:


<a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Link Text or Thumbnail Image Tag</a>

(which you say you are now beginning to understand) must be used in the body of the page.

Unless this takes care of it for you, we have gotten to the point where you should put up a live version of the page somewhere for diagnosis purposes and give us a link to it:

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

zimfin
09-28-2008, 09:14 PM
Wow, thanks so much for your help! here is the link to my gallery page, ( the page in question) for you to look at.
http://www.scotthgfindlay.com/gallery.html
I really appreciate you all going out of your way to help. I have a lot more confidence in getting this site running properly! I will let you know once I have checked my files because I suspect those files might not be in the same folder as my page.

jscheuer1
09-28-2008, 09:51 PM
Well, your current live gallery.html doesn't even have the script and style tags for Lytebox in the head, let alone any attempt at the Lytebox markup. We will await news of an update from you.

zimfin
09-28-2008, 10:17 PM
Well, your current live gallery.html doesn't even have the script and style tags for Lytebox in the head, let alone any attempt at the Lytebox markup. We will await news of an update from you.

I know. As I am very new to this, I haven't put anything on the live site until I have tested it in my browser from dreamweaver first. I didn't want to have to fix mistakes on both the local and remote files.
I have updated my gallery page though so you can see it in the live site as it now stands.
Thanks!

zimfin
09-28-2008, 10:47 PM
I am not sure if I am understanding the file management properly and this could be the problem. I realize I am making a lot of mistakes here but I am trying to learn so I appreciate your patience!
Anyway, the way I have my site files set up is as follows,
first I have my main site folder with everything else in it.
All my pages i.e. gallery, about, index etc, are all listed in a row as HTML Files.
In amongst them I have some folders which are images , Library, public_html, Templates and videos. Library,Templates and videos folders are all empty.
Now, I also have the lytebox.css, lytebox_source.js and the images folder from the download in that list but I am not sure if that is where they should be.
I tried to put all the html files, (my pages) and the lytebox files I mentioned together in my Library folder, thinking this would tidy things up and not only did it not help, it messed with my links and I had to reset them all one at a time, page by page! Damn I hate being a novice!!

Those of you that haven't had enough of me already, are probably laughing your asses off by now, but I figured, (since you are helping me) you should know where you stand with me as far as my abilities here are concerned.
Well, if the filing sounds okay, let me know. This could all just be because I am not sure where to put the lytebox files!

jscheuer1
09-29-2008, 12:37 AM
OK, now we are getting somewhere. The markup:



<div id="apDiv8"><a href="images/horned-digital1.jpg" rel=lytebox[gallery] title="Horned"><img src="images/horned-digital.jpg" alt="" width="70" height="70" /></a></div>
<div id="apDiv9"><a href="images/lava-digital1.jpg" rel=lytebox[gallery] title="Lava"><img src="images/lava-digital.jpg" alt="" width="70" height="70" /></a></div>


looks right. However, in the head where you have:


<script type="text/javascript" language="javascript" src="../lytebox.js"></script>
<link rel="stylesheet" href="../css/lytebox.css" type="text/css" media="screen" />


There is no ../ from where your page is, at least none that is accessible from the web, as the page itself is already in the root. Change those to:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


and upload the lytebox.js and lytebox.css files to the root of your domain, and you should be in business.

One other thing though, the files:

images/horned-digital1.jpg

and:

images/lava-digital1.jpg

must be present, at the moment they are not.

zimfin
09-29-2008, 08:36 AM
OK, now we are getting somewhere. The markup:



looks right. However, in the head where you have:


<script type="text/javascript" language="javascript" src="../lytebox.js"></script>
<link rel="stylesheet" href="../css/lytebox.css" type="text/css" media="screen" />


There is no ../ from where your page is, at least none that is accessible from the web, as the page itself is already in the root. Change those to:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


and upload the lytebox.js and lytebox.css files to the root of your domain, and you should be in business.

One other thing though, the files:

images/horned-digital1.jpg

and:

images/lava-digital1.jpg

must be present, at the moment they are not.

Thanks John,
Yeah, that "../" is what happened after I tried moving all my files into the Library folder. They are what I was deleting from all my images last night. I must have missed that bit in the Head of the document!
I checked my files and the ones you mentioned were not on the remote side. They are now, so at least my images can be viewed as large. Just need to get the lytebox window working and I 'm sorted!
One more thing, aren't the Lytebox files already uploaded to my root folder if they are listed as I mentioned, I mean they are in my main site folder along with everything else? Is there some way to upload them I don't know about?
Thanks for this John!

jscheuer1
09-29-2008, 03:54 PM
The problem is still that the page is not finding either of these files:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />

They are both still 404 not found in the locations:


http://www.scotthgfindlay.com/lytebox.js
http://www.scotthgfindlay.com/css/lytebox.css

as specified considering the src and href attributes used on the page and the page's location in the root of the domain.

Since you are having trouble, let's first get rid of the css folder in the href, so you have:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

Then the only major thing left is to upload the files:

lytebox.js

and:

lytebox.css

to:


http://www.scotthgfindlay.com/

You seem to be having trouble with that, what method are you using to upload files? And what methods do you have available to you? An ftp client is best, followed by (if available) your host's proprietary web based interface for uploading files. Using an editor is generally overly complex when it comes to uploading script and style files, and since I never use editors to upload, I cannot advise in that area.

zimfin
09-29-2008, 07:18 PM
The problem is still that the page is not finding either of these files:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />

They are both still 404 not found in the locations:


http://www.scotthgfindlay.com/lytebox.js
http://www.scotthgfindlay.com/css/lytebox.css

as specified considering the src and href attributes used on the page and the page's location in the root of the domain.

Since you are having trouble, let's first get rid of the css folder in the href, so you have:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

Then the only major thing left is to upload the files:

lytebox.js

and:

lytebox.css

to:


http://www.scotthgfindlay.com/

You seem to be having trouble with that, what method are you using to upload files? And what methods do you have available to you? An ftp client is best, followed by (if available) your host's proprietary web based interface for uploading files. Using an editor is generally overly complex when it comes to uploading script and style files, and since I never use editors to upload, I cannot advise in that area.
Thanks for the reply and help.
I have removed the css/ file. I have both the local and remote sites open in Dreamweaver and I drag a file from the local to the remote site when I want it to go live. I have never used ftp yet! I have also used the file manager from my host to upload images at the start of all this.
How do I upload these lytebox files in question to my http://www.scotthgfindlay.com/?

jscheuer1
09-29-2008, 07:51 PM
I'd use the file manager from your host. Just upload the lytebox.js and lytebox.css files to the same folder that gallery.html is in.

But the live copy of gallery.html still has the old stylesheet link tag:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />


Get rid of the red part.

zimfin
09-30-2008, 09:57 AM
I'd use the file manager from your host. Just upload the lytebox.js and lytebox.css files to the same folder that gallery.html is in.

But the live copy of gallery.html still has the old stylesheet link tag:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />


Get rid of the red part.
Thanks John.
I have removed the css/ from the live site and, (using Lunarpages' File Manager) I have uploaded both the lytebox.css and the lytebox_source.js files into my public_html folder which is where my gallery.html page resides. It does not work yet however. Any other suggestions?
With the two lytebox files came a folder of images. Are they vital? Maybe the window won't work because an image file is missing?

jscheuer1
09-30-2008, 10:08 AM
Well, the lytebox.js file is still 404 not found. But at least you have corrected the stylesheet link and the stylesheet is now on the server.

Just for your information, I made up a local copy of your gallery page and linked it directly to the lytebox files on the official Lytebox site, and it worked. So all you really need to do is to get that script uploaded to your server and it should work. You will also need the image files that came with it, they should go in your images folder. Those are for the next/previous and close buttons.

zimfin
09-30-2008, 11:49 AM
Well, the lytebox.js file is still 404 not found. But at least you have corrected the stylesheet link and the stylesheet is now on the server.

Just for your information, I made up a local copy of your gallery page and linked it directly to the lytebox files on the official Lytebox site, and it worked. So all you really need to do is to get that script uploaded to your server and it should work. You will also need the image files that came with it, they should go in your images folder. Those are for the next/previous and close buttons.
I don't understand why the stylesheet link is on the server but the lytebox.js file is 404 not found? They were both uploaded together in the same folder. Is there something in the code, (like the css/ I deleted) that needs correcting or added? I have looked but to be honest I don't know what exactly to look for!
At least I know I am close since your local copy works! Wish I had even a tenth of your skills in this matter!!

zimfin
09-30-2008, 01:22 PM
I don't know if it has anything to do with my current problem but when validating my markup the following script errors came up in this attached page. It is the same on lines 42 & 119. Line 42 reads <script language="javascript"> and line 119 just reads <script> but they both have this error "in tag:script the following attributes are missing:type[HTML4.0].
I don't know how to fix them or even if they are important but I thought I should mention them just in case. Please see attached file.
Thanks!

jscheuer1
09-30-2008, 03:31 PM
I don't know if it has anything to do with my current problem but when validating my markup

No, it doesn't. When I made a local copy of your page I kept all of its HTML intact, including the invalid parts. The script tag should technically be:


<script type="text/javascript" src="lytebox.js"></script>

That particular error (the language attribute is deprecated) you inherited from the instructions on the Lytebox home page. And there were a number of other technical validation errors in the markup. However, nothing that prevented the page from working once it could find the script and other required files.

I think you may just have an unreliable connection because your file attachment in your previous post is corrupted. Or that may just be a coincidence, and you are just having trouble because you are unfamiliar with doing this. Either way, keep trying to upload the lytebox.js file to the root of your domain. Each time, refresh the browser to test the live page again. Sooner or later it will probably work.

zimfin
09-30-2008, 04:02 PM
No, it doesn't. When I made a local copy of your page I kept all of its HTML intact, including the invalid parts. The script tag should technically be:


<script type="text/javascript" src="lytebox.js"></script>

That particular error (the language attribute is deprecated) you inherited from the instructions on the Lytebox home page. And there were a number of other technical validation errors in the markup. However, nothing that prevented the page from working once it could find the script and other required files.

I think you may just have an unreliable connection because your file attachment in your previous post is corrupted. Or that may just be a coincidence, and you are just having trouble because you are unfamiliar with doing this. Either way, keep trying to upload the lytebox.js file to the root of your domain. Each time, refresh the browser to test the live page again. Sooner or later it will probably work.
Okay.So all the code seems to be in the right place then and I don't need to worry about it?
Thanks John. I will repeatedly try uploading again and let you know as soon as I get it to work. I appreciate all you guys helping me out!

zimfin
09-30-2008, 05:06 PM
YES!!! It works!! Thank you so much!! In the end, I went back to the Lytebox Homepage and downloaded version 3.22. When I uploaded it, I discovered I had the lytebox.css file already but needed the lytebox.js file. The lytebox_source.js file which I had was the problem!!

What a relief!

I intend on using this lytebox feature on separate pages. I take it I just need to copy and paste the code I have in the head and div tags as needed for it to work the same?

Thanks again for the help!!

jscheuer1
09-30-2008, 06:22 PM
I intend on using this lytebox feature on separate pages. I take it I just need to copy and paste the code I have in the head and div tags as needed for it to work the same?

Yup, that's basically it. The pages must all be in the same folder though, unless you want to deal with changing:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

to reflect the path from a given page to the script and style files.

zimfin
09-30-2008, 08:17 PM
No, I don't want to do any changing for a while! They will all be in the same folder!
Thanks!