Social Question

serenityNOW's avatar

Web pros, how do I achieve this effect on my website?

Asked by serenityNOW (3641points) February 25th, 2013

I’m looking to recreate this effect on my website.

Little more depth: I have a list of links, for a portfolio, each one representing a website I’ve worked on. I was thinking that instead of each one going to a separate page, I can have this “expanding” view, with a pic or two of the website on the left or right, and some details in the remaining space.

I’m only on the design end and simple coding end, so any heavy programming is out of my league, but maybe there’s a design “template” I could incorporate?

Observing members: 0 Composing members: 0

3 Answers

Tropical_Willie's avatar

@serenityNOW If the web page gets too complex, most people will just stop and go somewhere else. Restraint and simple thumbnails would be best.

ETpro's avatar

The iTunes store app is extremely rich and far, far beyond the reach of someone confined to simple coding. If you are up to incorporating some premade JavaScript there are a number of applications that combing CSS, JavaScript and a library such as jQuery to implement slide and fade effects. You can get plenty elegant for what you need.

Take a look at these:
  •     Featured Content Slider
  •     Featured Content Glider
  •     TopUp Lightbox Slides

If you’re good enough at coding to decipher the instructions for the Featured Content Slider, you can split the Table of Contents (text boxes or thumbnails) into two DIVs and use CSS to put one row above the main image and one beneath. Instead of highlighting the active entry in the TOC, change its background image to give the impression of the sliding arrow pointing to what’s currently in the main box.

Or hey, hire me. :-)

AlbertKinng's avatar

When you search for images in Google you will get the same results. I went to the html source and figure it out how its done. Its css and html5 combine. There is even a gudlib for it.

Answer this question




to answer.
Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther