Grow your CSS skills. Land your dream job.

SUGGESTIONS: image slideshow linked to text description

  • # January 31, 2011 at 12:26 pm

    Just got a small job redesigning a site (changing from tables and tons of font face tags to CSS, among other things).

    The client wants a basic slideshow of her paintings on the HOME page. The images will be of different sizes/orientations: some landscape, some portrait, some square. Next to each image is text that describes the painting; obviously this text must somehow be coordinated with the displayed image so the description changes as the image changes.

    I see two aspects to this:

    1) choosing and implementing the right slideshow “system”.

    2) making the descriptive text change as the image changes.

    Any suggestions about the best tools/coding to accomplish this?

    Thanks.

    gno
    # January 31, 2011 at 12:38 pm

    You should take a look at indexhibit. Description taken from their website: ‘A web application used to build and maintain an archetypal, invisible website format that combines text, image, movie and sound.’

    If you want to see it in action, take a look at –removed link– – it is a photographers website, that I did recently.

    The system is, out of the box, built to do much of the stuff that your client wants. I didn’t do much besides making the template, when I did the photographers page (only a little plugin to make a very simple photo-blog).

    The slideshow would be easily done with a new exhibition format. Which you of course should give back to the community when you’ve made it ;-)

    Indexhibit is opensource, but the authors request a humble €15 for individuals using it. The admin panel behind it is really easy to use as well. The photographer I worked for, is using it without any problems, with no former experience, and I only gave her a little crashcourse in basic html needed to make headlines, paragraphs and links ;-)

    Take a look at http://www.indexhibit.org for further details and for more examples. I’m in no way affiliated to this project – but I just enjoyed using it a lot.

    # January 31, 2011 at 12:59 pm

    Thanks, gno, for the quick response.

    My client has no need for movies or sound, so that part of it might be like taking along an elephant gun to go squirrel hunting. Still, the rest of Indexhibit could offer just what I need so I’ll check it out.

    If I get a few more replies, I’ll compare the suggestions, pick one, and go forward.

    Thanks again. This site/forum is a remarkable resource for folks of all skill levels seeking help.

    gno
    # January 31, 2011 at 1:04 pm

    I’m not using any kind of video or sound on the page I did. Most of the indexhibit sites listed on their site is presenting images aswell. I know they type it in the description, but the system itself doesn’t implement any specific stuff to support video nor sound. :-)

    # January 31, 2011 at 1:30 pm

    gno,

    Can you provide a link to the page where you used it? If you don’t want to post the site here, you can email me at dave@snillors.com.

    Thanks

    gno
    # January 31, 2011 at 1:38 pm

    I already posted the link in my first post (second paragraph) :-)

    # January 31, 2011 at 1:42 pm

    OOOPS. My bad! Thanks.

    # February 2, 2011 at 4:51 pm

    Just to clarify what I’d like to accomplish because maybe in using the term “slideshow”, I gave the wrong impression. Maybe a better term would be “image switcher” . . .

    We’d pick, say, images of 5 of her paintings. I’d like the home page to randomly pick one of these 5 to display, then automatically cycle through all 5, displaying each one for a specified time (maybe 15 seconds).

    As each painting is displayed, we need a related text area to show details for that painting (title, size, medium, price, etc.)

    I’d like this to run automatically; in other words I’m not looking to have next and previous arrows for the viewer to click to change images/text content.

    Hope this makes it a little clearer.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".