PDA

View Full Version : Been at this for 12 hours Lightbox please help



Wizzap
03-19-2008, 12:25 AM
I'm very new to this website building thing I'm trying to get Lightbox to work on my picture page. Ive went step by step from sevral sites and still cant get it to work Can someone please help me

I'll keep refreshing page so ill respond to you in a min if you post

thetestingsite
03-19-2008, 12:26 AM
Do you have a link to the problem page?

Wizzap
03-19-2008, 12:28 AM
http://www.pugnosefarms.wsnw.net/page18.html

Im not even sure where ive went wrong a step by step in laymens terms may be needed If you can help ill forever be in your debt

thetestingsite
03-19-2008, 12:31 AM
In these lines, get rid of the highlighted part:



<link rel="stylesheet" href="http://pugnosefarms.wsnw.net/public_html/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/public_html//prototype.js"></script>
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/public_html//scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/public_html//lightbox.js"></script>
<!--End LightboxJS2-->

<link rel="stylesheet" href="http://pugnosefarms.wsnw.net/public_html/css/lightbox.css" type="text/css" media="screen" />


Hope this helps.

Wizzap
03-19-2008, 12:39 AM
Nope still nothing

Wizzap
03-19-2008, 12:40 AM
I just don't know why i can't get it to work

Wizzap
03-19-2008, 12:54 AM
Hi i swapped to a code from http://particletree.com/features/lightbox-gone-wild/

And it almost works can you tell me what im doing wrong
i want the image to be a thumbnail size then expand when i click it

studiocreek
03-19-2008, 12:57 AM
After looking at your code, you need to fix this link so that it's pointing to an actual file:

<script type="text/javascript" src="http://pugnosefarms.wsnw.net/scriptaculous.js?load=effects"></script>
...

Also, your thumbnail is pointed at the wrong link... try this (after fixing that link):





<html>
<head>
<title>
Puppies
</title>
<!--Start LightboxJS2-->
<link rel="stylesheet" href="http://pugnosefarms.wsnw.net/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/prototype.js"></script>
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/lightbox.js"></script>
<!--End LightboxJS2-->

</head>

<body>
<a href="http://pugnosefarms.wsnw.net/images/cop1w.jpg" rel="lightbox" title="Curly"><img src="http://pugnosefarms.wsnw.net/images/cop1w.jpg" border="0"/></a>


</body>
</html>

studiocreek
03-19-2008, 12:59 AM
Make sure your thumbnail image is actually a thumbnail - should be smaller...

you need to create a smaller version and reference that in your "img src" here:

<a href="http://pugnosefarms.wsnw.net/images/cop1w.jpg" rel="lightbox" title="Curly"><img src="http://pugnosefarms.wsnw.net/images/cop1w.jpg" border="0"/></a>

hope that helps...

Wizzap
03-19-2008, 01:01 AM
As you can see now the Light box opens but does not close or show the image

Wizzap
03-19-2008, 01:06 AM
Studiocreek i love you man that fixed it kinda it jumping images but not in the neat little box

Check out http:pugnosefarms.wsnw.net/page19.html

anymore tips

Wizzap
03-19-2008, 01:13 AM
It seems to be kinda working but its still not right

Wizzap
03-19-2008, 01:16 AM
How do i get the Nice little shadow box even if i cant get that

When they click the thumb the big image pops up i want it able so when they click the big image the thumbs pop back up

Wizzap
03-19-2008, 01:19 AM
http://www.pugnosefarms.wsnw.net/page19.html

Studio if your Still here or anyone

studiocreek
03-19-2008, 01:48 AM
I recommend this one: http://www.huddletogether.com/projects/lightbox2/

Make sure your site has all the required tags to open and close each element... so <html> also needs an </html> closing tag at the end...

You should download the files for this one and start over in my opinion...

first download the .css file and the three .js scripts and place them in your main root folder and add create a page like this (using your correct image details of course):


<html>

<head>

<link rel="stylesheet" href="http://pugnosefarms.wsnw.net/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/prototype.js"></script>
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://pugnosefarms.wsnw.net/lightbox.js"></script>

</head>

<body>

<a href="http://pugnosefarms.wsnw.net/images/YOUR_LARGE_IMAGE_HERE.jpg" rel="lightbox"><img src="http://pugnosefarms.wsnw.net/images/YOUR_THUMBNAIL_IMAGE_HERE.jpg" alt="" /></a>

</body>

</html>

studiocreek
03-19-2008, 01:56 AM
If you're just showing an image that you want to zoom in on I would recommend the http://www.huddletogether.com/projects/lightbox2/... otherwise if your goal is to throw some text in there you may want to stick with the http://particletree.com/features/lightbox-gone-wild/ option.

I've just used the first one a lot more personally which is why I recommended it...

Wizzap
03-19-2008, 02:04 AM
Studio ill go back to useing the first one Do you have a msn or something

studiocreek
03-19-2008, 02:06 AM
Try to reverse engineer this: http://www.studiocreek.com/help/sample_1.html

hope that helps.

Wizzap
03-19-2008, 02:07 AM
That code works its just when it swaps from the thumb to the main image there is no way to swap back with out hitting the back button

studiocreek
03-19-2008, 02:08 AM
That sample was using the http://www.huddletogether.com/projects/lightbox2/ lightbox... for the other one you're on your own ;)

gotta run now but good luck with everything!

Wizzap
03-19-2008, 02:10 AM
Also that border kinda blows

Wizzap
03-19-2008, 02:11 AM
Thats just what i want
now to get it on my page

Wizzap
03-19-2008, 02:13 AM
I must have missed some step on your sample its working but on my page it dont

Wizzap
03-19-2008, 02:18 AM
Those Js files i uploaded them to my public_html folder is that the right place or where should they go