Website image gallery

foodpoison

foodpoison

Messages
6,253
Name
Sean
Edit My Images
Yes
Okay, so my website is being made - literally as a place people can look at my work before hiring me - looking to get some work over summer that isn't me sat in a hot, sweaty shop dealing with hot, sweaty, grumpy customers.

I have a basic but moderately good understanding of HTML, little to no understanding of javascript, basic understanding of flash, and PHP, no chance.

I want a decent image gallery, kind of like that of Pete Carr or Matt Thomas, but I want it to be easy to make. Preferably using a program that I add the pictures into then copy the code/swf across.

I don't mind if it's HTML or flash, and I doubt my potential customers will mind, either.
I would prefer flash since it's more difficult to steal photos.
 
Sorry forgot to add, it's PHP based but it's fairly simple to install & use by following the instructions, I managed it and don't know anything about PHP!
 
I think the Matt Thomas website is done using something called lightbox. Not 100% sure on that though.
Do a search on google for lightbox and you can see some examples. I think you may also be able to download a program that might do it for you.
Hope I haven't comfused you. I don't know that much about it you see.:D
 
have a look at my site (link in sig0 i am ading those galleries on the right at present and thats in wordpress with the nextgen gallery widget installed, so easy once setup aswell and easy to upload pictures aswell using an FTP Client
 
I would highly recommend you look at Pixelpost for your gallery software. Fairly easy to install and set up, but infinately adaptable and very well supported (both official and community support). I use a combination of Pixelpost and Cutenews (+HTML, CSS etc) for my site;

www.afowler.co.uk

:)
 
Messiah Khan said:
I would highly recommend you look at Pixelpost for your gallery software. Fairly easy to install and set up, but infinately adaptable and very well supported (both official and community support). I use a combination of Pixelpost and Cutenews (+HTML, CSS etc) for my site;

www.afowler.co.uk

:)
Click to expand...

Another nod in the direction of pixelpost. I integrated galleries with lightbox too via one of the plugins. Most of what you want can be done without getting into the Php code. :)
 
Matt's gallery looks more like Simpleviewer. Google it, may be what you're after.
 
Okay, super noob question.

I want lightbox, it looks like the most simple.

So I download lightbox from the website, and it comes in a zip. When I extract it, it has 3 folders:
CSS
Images
JS
and a file:
Index

I'm assuming I have to just import it into my site root folder, then incorporate the script into my site, but then what? :(
 
I just did this yesterday, it's a piece of cake.

Place those three folders into your root (or any other folder you like, for example mine went into a "lightbox" subdirectory in my root).

In the CSS file (css/lightbox.css), check that the following point at the correct location for where you have put the source files:
Code: 
#prevLink:hover, #prevLink:visited:hover { background: url([B]../lightbox/images/prevlabel.gif[/B]) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url([B]../lightbox/images/nextlabel.gif[/B]) right 15% no-repeat; }

Then in the JS file (js/lightbox.js), check that the following are correct also:
Code: 
    fileLoadingImage:        '[B]lightbox/images/loading.gif[/B]',     
    fileBottomNavCloseImage: '[B]lightbox/images/closelabel.gif[/B]',

Include the following in your website <head></head> tags: (Edit: check that the source ("src" and "href") locations are correct for these too!)
HTML: 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Then to create a link, do what it says on the website:
HTML: 
<a href="[path to big image]" rel="lightbox" title="[wording to display under the image]">[text or image link]</a>

For example:
HTML: 
<a href="images/big.jpg" rel="lightbox" title="A big image!"><img src="images/small.jpg" border="0" alt="Small image" width="100"/></a>
Would display a thumbnail 100px wide of "small.jpg" that when clicked would load the lightbox code to display "big.jpg". Under the big image it would say "A big image!"

HTH.
 
:D No worries!

I just made a quick edit for those looking, and thought I'd add this on too (as it's more advanced than the basic functionality but was something I needed).

To create groups of images (so that the next and previous links show), you need to define them as groups in the link.
To do that, alter the section of the image link from:
rel="lightbox"​
to
rel="lightbox[groupname]"​

Any image with the same "groupname" will be added to the same group of images. This is useful when creating galleries!

For me, the default location of the lightbox overlay was a little too low down. To edit the position of the overlay, open js/lightbox.js and look for the following lines (231 and 232 at the time of writing):
Code: 
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
As you might guess, these variables contain the position of the top and left location of the lightbox. To alter these positions by a fixed amount, you can append an adjustment to the code.
To move the box up, you will need to subtract from the "lightboxTop" variable, and to move the box left you will need to subtract from the "lightboxLeft" variable.
For example, to move the box up by 50 pixels and left by 20 pixels, you would use the following:
Code: 
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10) - 50;
var lightboxLeft = arrayPageScroll[0] - 20;
To move the box down or right, you will need to add to the relevant variable, rather than subtract.
 
Right, so, I've managed to get the light room application working, perse, and in dreamweaver it's displaying the picture.
However, when viewing in Firefox AND IE, it just shows the image's alt-text and then when I click that it loads lightbox with a blank image.

When I hover over the alt-text link, it comes up with, say, 'file:///images/portrait/image.jpg'

No image.
Hrm.
 
foodpoison said:
Wow, so after I'd figured it all out, it's actually fairly simple. Figured out? Should I say 'spoonfed'? :p
Click to expand...

It was the same when I made my site. Started off very confused. Was spoonfed lots. Figured out lots on my own and had loads of eureka moments, and eventully ended up with a website and a much greater understanding of web development. Have fun and enjoy the tinkering and designing. :thumbs:
 
Messiah Khan said:
I would highly recommend you look at Pixelpost for your gallery software. Fairly easy to install and set up, but infinately adaptable and very well supported (both official and community support). I use a combination of Pixelpost and Cutenews (+HTML, CSS etc) for my site;

www.afowler.co.uk

:)
Click to expand...

+1 for PixelPost. You could use lightbox on it too if you know youre way round html and php.
 
You must log in or register to reply here.
Back
Top