Viewing Portfolio

R8515198 · #1 (**permalink**) Jul 27th, 2007, 07:12

I have seen this on other websites

Peoples portfolios that have small pictures of there work, then when you click on the picture it greys out the background and enlarges the picture on the same page.

Does that make sense?
How is it done?
I will try and find an example?

Cheers
Daniel

Blake121 · #2 (**permalink**) Jul 27th, 2007, 08:27

That's done through a javascript called Lightbox.

It lets you click on a small picture then a bigger one will expand on the screen.

It's really neat, you can download it free here: http://www.huddletogether.com/projects/lightbox2/

Hope this helps!

karinne · #3 (**permalink**) Jul 27th, 2007, 13:31

Yes ... Lightbox is the most used. The are many others tho ...

Pádraig · #4 (**permalink**) Jul 27th, 2007, 19:29

You could always make your own if you can't find something you like, though.

R8515198 · #5 (**permalink**) Jul 27th, 2007, 20:58

I have been playing around with it and can get it to work.
But when I attach it to my design it doesnt work I think it could be something to do with the
rollover images I have,

As you have to put onload="initLightbox()" in front of <body

Code: Select all

<body onload="initLightbox()','MM_preloadImages('../assets/buttons/home_over.png','../assets/buttons/portfolio_over.png','../assets/buttons/services_over.png','../assets/buttons/prices_over.png','../assets/buttons/about_over.png','../assets/buttons/contact_over.png')">

I have attached it to one on of my websites so someone can have alook and hopefully help me.
The website is underconstruction at the moment as you will see.

http://www.bradfordarmshotel.com/tes...lio/index.html

Any help will be greatful

Cheers
Dan

karinne · #6 (**permalink**) Jul 27th, 2007, 21:12

I used Lightbox for my portfolio and I don't have onload="" stuff

R8515198 · #7 (**permalink**) Jul 27th, 2007, 23:20

Been trying all night cant figure out where I have gone wrong, I got rid of the onload=""stuff. Still no joy.

Try again tomrow

Lchad · #8 (**permalink**) Jul 28th, 2007, 11:42

Ok start over....

You are trying to use Lightbox?
What image are you trying to use it on? The motorcycle?

Blake121 · #9 (**permalink**) Jul 28th, 2007, 12:03

Are the files (Lightbox JS and CSS) even on your server? Or maybe they're in the wrong place. I can't seem to find them.

But the browser is looking for lightbox.css. I got this instead of a css file when I searched for all styles being used.

"
<HTML>
<HEAD>
<TITLE>404 Not Found</TITLE>
</HEAD>
<BODY>
<H1>Not Found</H1>
The requested document was not found on this server.
<P>
<HR>
<ADDRESS>
Web Server at bradfordarmshotel.com
</ADDRESS>
</BODY>
</HTML>

 "

R8515198 · #10 (**permalink**) Jul 29th, 2007, 09:30

Key Level1-Level2-Level3-Level4

My structure

www.bradfordarmshotel.com/

test1/

Templates/fwdtemp.dwt
assets/buttons
/images
css/lightbox.css (files from light box)
about/index.html
contact/index.html
services/index.html

images (files from light box)
/ducattivfr.jpg-ducattivfr1.jpg

js/effects.js (files from light box)
/prototype.js (files from light box)
/scriptaculous.js (files from light box)
/lightbox.js (files from light box)

portfolio/index.html
prices/index.html
fwd.css
index.html

I have attached this to my template

Code: Select all

<head>
<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 href="../fwd.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

and this to my portfolio

Code: Select all

<p><a href="../images/ducattivfr.jpg" rel="lightbox"><img src="../images/ducattivfr1.jpg" width="100" height="40" alt="" /></a></p>

can anyone see where I am going wrong

Cheers Dan

Lchad · #11 (**permalink**) Jul 29th, 2007, 12:28

Either your files are not uploaded to your server or your paths to your javascript are incorrect because they are still Error 404 unfound.

This is the path that you have that is unfound. Check this for accuracy.

Code: Select all

http://www.bradfordarmshotel.com/tes...js/lightbox.js

Once you sort that out, you'll be good to go. Your html code is correct.

Right now your lightbox javasript is saying it's 4 levels down from the root. But in your structure you typed for us to see, you say it's 2 levels down from root.

R8515198 · #12 (**permalink**) Jul 29th, 2007, 13:45

http://www.bradfordarmshotel.com/test1/js/lightbox.js

This is where the lightbox.js is

I have put a key in the structure so its easier understood

Lchad · #13 (**permalink**) Jul 29th, 2007, 14:22

http://www.bradfordarmshotel.com/test1/js/lightbox.js is where the lightbox is.......

but this is what you have in the head of your html.
http://www.bradfordarmshotel.com/tes...js/lightbox.js

See the difference?

Go to the head of your page and change this code:

Code: Select all

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

Make sense?

R8515198 · #14 (**permalink**) Jul 29th, 2007, 20:20

Oh dear,
That was so simple but I couldnt get my head around it. I was opening the template and everything looked fine.
Cheers for all the help.

Daniel

R8515198 · #15 (**permalink**) Jul 29th, 2007, 20:31

What am i doing now!!
It works put doesnt use the whole screen
http://www.bradfordarmshotel.com/tes...lio/index.html

Lchad · #16 (**permalink**) Jul 29th, 2007, 20:38

It's pretty big on my screen! How big do you want the lightbox pic to be?

You will have to alter the size of the dimensions in this file.
css/lightbox.css (files from light box)

R8515198 · #17 (**permalink**) Jul 29th, 2007, 21:52

It is perfect in FF as it uses the whole screen but when opening it up in IE it uses part of the left side

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Viewing in other browsers without installing	rubyfruit	Starting Out	5	May 23rd, 2008 10:13
viewing someone elses css file	highrik	Web Page Design	3	May 20th, 2008 13:04
Viewing source when no menu bar	cyberseed	Web Page Design	13	Apr 26th, 2007 12:44
viewing code	ivyholly	Web Page Design	7	Nov 13th, 2005 16:45
Viewing source code??	autumn_whispers2me	Web Page Design	4	Feb 14th, 2005 17:40

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Viewing Portfolio