PDA

View Full Version : OT: need some CSS/JS help



adrian
08-20-2012, 09:34 AM
I cannot believe there's not a simple way to do what I'm about ask but it's absolutely doing my head in.

I'm designing a site for someone that needs a gallery - this is it so far:

Test Gallery (http://www.bakersvideo.com/Portfolio.htm)

I need to change two things though: 1) I need to have an image display as soon as the page loads (ie the first image in the gallery) and....

2) I would only like the full sized image displayed when the thumbail is clicked - and for the image to stay there until another image is clicked.

For the life of me I cannot work out how to get this done? Are there any JavaScript/CSS gurus out there who could point me in the right direction?

Thanks! :thumbsup:

Silkrooster
08-20-2012, 10:48 PM
Do you own photoshop or lightroom? Both of these apps provide a way of creating a gallery that can be either html/css or flash.
There are free version of galleries on the net, but you need to be wary of unsecure code.

For loading an image via javascript you can use the following:


document.write('<img src="http://www.example.com/folder/filename.jpg" width="100%" />');

Edit: If you know html, then it shouldn't be too hard for you to make that image a clickable link.

JonW
08-20-2012, 11:52 PM
There maybe sometime here

http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../imagery/imgscroll3h.htm

adrian
08-21-2012, 02:56 AM
Do you own photoshop or lightroom? Both of these apps provide a way of creating a gallery that can be either html/css or flash.
There are free version of galleries on the net, but you need to be wary of unsecure code.

For loading an image via javascript you can use the following:


document.write('<img src="http://www.example.com/folder/filename.jpg" width="100%" />');

Edit: If you know html, then it shouldn't be too hard for you to make that image a clickable link.

Hi, I own Photoshop CS2 so quite an old version. Yes I know HTML and how to make an image a clickable link but I want the image to load in the same page, not into a different one so I think JavaScript will be the way to go - but that's where the problem lies because I'm by no means an expert at it!

However I've found something here: http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../imagery/imgscroll3h.htm so will play around with that. Thanks!

Verlon
08-21-2012, 04:16 AM
I would like to say that is a nice gallery setup.

I like the mouseover better than the click, but shouldn't an onClick instead of onMouseOver and remove the onMouseOut fix that aspect? Then it woudl just be a matter of loading a default image with something like onLoad? As a last resort, you could make the first picture replace the white background, but that would sort of be cheating.

art
08-21-2012, 06:11 AM
I've been searching for a simple to setup/use, decent-looking gallery (preferably free) software and finally settled MiniGal.

http://www.minigal.dk/

But... it's PHP/Javascript based. I'm nor sure if you need pure html or not. Still, it's probably possible to reuse Javascript code to display photos.

adrian
08-21-2012, 07:03 AM
Thanks guys. Actually I like the way I have it right now too but the website is for an artist friend and he doesn't like the hover effect! As he's paying me a little money to do it I really want to give him something he wants, and also which I forgot to say before.... it has to be easy for him to update himself.

As I have it at the moment is pretty much as easy as it gets but there we go...

As far as I'm aware, there is no CSS equivalent of onClick and I'm not good enough at JavaScript to know how to do it with that. The frustrating thing is I thought this would be really easy to do. Of course it's easy as anything to make each image clickable but that will load it in a blank page which is absolutely not what I want.

adrian
08-22-2012, 03:39 AM
Just to complete this thread, I managed to get a solution from some very helpful people at CSS Forum (http://www.dynamicdrive.com/forums/showthread.php?70381-Clickable-Image-Gallery) - just in case anyone else wants to know how to do it.