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

Originally Posted by zimfin

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:

Code:

<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.

). 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

Originally Posted by jscheuer1

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

Originally Posted by philnolan3d

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

Code:

<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.

). 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

Originally Posted by philnolan3d

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:

Code:

<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:

Code:

<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.