A Simple CSS Photo Album - will it work?

5 posts by 2 authors in: Forums > CMS Builder
Last Post: December 9, 2008   (RSS)

By CMS_123 - December 6, 2008

Hi,

I am trying to sell a client on the idea of using CMS.

I want to use this photo viewer:
http://www.cssplay.co.uk/menu/photo_album.html#nogo

It is called "A Simple CSS Photo Album" and is done entirely with CSS, no java script.

Note: you can see all the CSS and HTML code at the site by selecting "Page Source" (if in Firefox).

So my question is, can I use this simple CSS slideshow with CMS?

The client will need to be able to upload as many pics as he likes, and the corresponding numbers representing the pics (see sample at link) will also be generated.

Thanks for looking into this.

Re: [Perchpole] A Simple CSS Photo Album - will it work?

By CMS_123 - December 7, 2008

Thanks Perch,

Would you mind posting a few links of examples?

Is it easy to integrate the cms code to do this?

Thanks

Re: [CMS_123] A Simple CSS Photo Album - will it work?

By Perchpole - December 7, 2008

Sure. Here's an example...

http://www.thejays.org.uk/gallery/index.php

The entire thing is controlled via the CMSB interface.

The trick is to visualise all the variable data as "sockets". Then build the CMS page as a series of different plugs which you can then hook-up to the sockets. It's all pretty intuitive once you get going.

:0)

Perch

Re: [Perchpole] A Simple CSS Photo Album - will it work?

By CMS_123 - December 9, 2008

Thanks Perch,

I am inspired by the possibility of this being simple.

Can you advise me if I am on track here?

In looking at the CSS designed slideshow I referred to, the entire design is defined by the CSS style sheet.

The only variable data is changed in the HTML page (or php page when CMS is applied). The text numbers and images are held in an unordered list. The CSS just styles the text numbers so that they appear in a box and the images so that they are hidden until the visitor clicks a number square.

In this particular CSS example, there are just two variables to change in the unordered list to add a picture:

- change the number where the user clicks to reveal the picture (refer to following <li> 01)
- change the name of image and path to it, see line of code as follows:

<li><a href="#nogo">01<img class="landscape" src="images/slides/slide_01.jpg" /></a></li>

So is my understanding correct that it would be as simple as replacing the HTML code with the two CMS "sockets", one for the picture and path, and the other for the number?

It would also need to somehow add other list item to the page (the <li>)

Thanks for advice!