hiding/showing image & text
- Started
- Last post
- 35 Responses
- Baskerville
I'm design my new folio site at the moment. I'm not too hot on web stuff.
For showing the content of the site (ie my projects) I want to have one html page per project.
At the moment my site works by showing one image at a time on a project with a list of numbers under the image like 1. 2. 3. 4. etc.
clicking on each number takes you to the next image. The problem is this reqiures 4 html pages to show 4 images.
a bit like this:
http://www.pentagram.com/en/port…what I would like is to have 1page that can show lots of images. I don't want the user to have to scoll down the page.
Is there some javascript or something I can use to show/hide the images all on 1 page.
I would need both the image and a small text caption to change each time.
thanks
- UndoUndo0
http://www.mauva.co.uk - check moths site hes doing it
- Baskerville0
looks nice, but I'm looking for a more image based example. I like how all the project captions are opened closes though. Or am I missing something?
- UndoUndo0
have a look at the source, the way mike has done it means that you could have images and text or any layout in the div...instead of just text which he has. i was really poiting you in the direction of JS that hides /shows a divs content instead of a layout designed for images. what he has there is pretty adaptable
- Baskerville0
yeah I looked at the code, impeccably laid out as I'd expect for moth.
So I can put whatever I want in the divs and then show/hide as I please?
- Baskerville0
any other ideas/examples?
- UndoUndo0
yeah you can layout the div as you wish then show/hide it. i think the system passes the div id to the javascript to do the showing hiding.
that system is really flexible and nice and simple on moths site so you should be able to adapt it easily
- springbok0
how about lightbox?
http://www.huddletogether.com/pr…
- Dancer0
My site does this as well Baskerville.Hence why you have ato wait a second for all the images to load into one page (< not ideal).
Or you could use the z-index, it depends http://www.adance.co.uk/dump/nt/…
- Baskerville0
that's nice springbok, but not sure I like that the image has to pop up into a separate box to be viewed. Is there an option to just have the image viewer on the page?
- Dancer0
Undo Moth's site does not show and hide div's it just loads a new page....
..I think
- springbok0
might be something in here for you.
http://www.dynamicdrive.com/dyna…
If you hover your mouse over the link it shows the image
- springbok0
another one, looks aweful but the basics are there
- UndoUndo0
hey dancer, i saw yr work for Ravel at the weekend up here in Nottingham..looks great fella...well done!
- UndoUndo0
sorry yr right, mike must have changed it. Ive pasted the hide/show JS function for you on the link below:
- Baskerville0
thanks Dancer that z-index is exactly the kind of thing I'm after. Sadly I lack the technical teminology to decribe what I need sometimes!
I also found this which look horribel but is essentially what I need too:
http://javascript.internet.com/m…
thanks undo I'll have a look at that code in a bit!
hopefully I'm on my way to pieceing together what I need!
- UndoUndo0
no problem, with that code use the onclick event handler for your button/header div and pass through the id of the div containing the content you want to display
- Dancer0
Cheers Undo.
Baskerville, be careful with the z-index. Although it uses no Javascript it does not "show and Hide" merely change the level of the div. If you had images all the same size then fine.
I think JS is a better way to go logically but it's up to you
- Baskerville0
thanks for the heads up. Conveniently all my images will be the same size since it make image formatting easier. That's how it works on my current site. I've played around with it a bit and added images and text to each div, keeping the bg colour white. I've also extended the size of the divs so they site behind the text/image well.
Like layers in photoshop?Is working well now, and I've applied my css etc.
I'm really enjoying all this web stuff. I takes a while to get some things but when they work it's really satisfying. Sorry if I keep pestering you guys!
Hoping to get my new site up within the next few weeks, once I iron out a few details and add all the conent!
- rson0
I would watch out for JS. What if some, like me has it turned off? Why not use AS?
- Dancer0
AS?