Take the 2-minute tour ×

I have made an image using photoshop of a mock design of the page so you can visually see what I am trying to achieve.

Please look at the image at the end of this question whilst trying to answer.

Updated Question: At this moment in time I have no code, I was wondering if someone could point me in the correct direction. I am making an online application using Ruby on Rails. At this moment I am not worried about the Rails side, I firstly want to conquer the JQuery. I have six sauces, each with a name, a picture, and a desctiption. What I want to achieve is the page starts on sauce one as shown in the picture, when the right arrow is clicked, sauce number 1 becomes sauce number 2, the picture changes, and the relevant description changes (i.e. sauce number 2's description.

My main problem is I do not know how to fit the relevent content between the two arrows, and then get them to change as the arrows are pressed. I.e. the user can click the right arrow once and I can change the contents, but how to I set the jQuery so that when the arrow is clicked the second time, it becomes the second sauce, the third time the third sauce and so on, as in chronological order, so when they click the back arrow it goes to the sauce before the current one.

In a nutshell everything happens dynamically, not that I have divs all ready, and the JQuery just truncates through them (i.e. not a Jquery div slider).

Here's the image:

The image

share|improve this question
not much can be done with just a png, you will have to start something first, then ask the question –  Ibu Oct 29 '12 at 17:45
Always include relevant content (such as your image) in the question itself, don't just link. meta.stackoverflow.com/questions/118392/… (I've done it for you on this occasion) –  T.J. Crowder Oct 29 '12 at 17:46
What is it, specifically, you're having trouble with? Just respond to events (e.g., clicks on your buttons) with event handlers that update the content of more than one element. What have you tried? Is there some complication that's not apparent? –  T.J. Crowder Oct 29 '12 at 17:49
I have updated the question to be more specific –  Muhammed Bhikha Oct 29 '12 at 18:02
add comment

2 Answers

up vote 1 down vote accepted

I would recommend using an already made jQuery slider, like this one:


For each li used in the slider, have a div with the image and description. You would need to modify the slider css a little bit but I think it would be a lot easier than making a slider yourself.

share|improve this answer
Thanks, I can use this, but the whole point is that everything is dynamic and I shouldn't have to add any more code if a new sauce is added in the database table. everything should be done automatically. –  Muhammed Bhikha Oct 29 '12 at 19:13
This would still work. Build the li tags through Ruby, then initialize the slider on page load once all the html has been created. –  sbonkosky Oct 29 '12 at 19:15
add comment

These are a good start for achieving what you want with jquery:

Animate: http://api.jquery.com/animate/

Capture a click: http://api.jquery.com/click/

Show/hide elements: http://api.jquery.com/show/ http://api.jquery.com/hide/

Set the html of an element: http://api.jquery.com/html/

If you have a problem with anything specific with these functions, you can ask again or just search Stackoverflow, there's a good chance whatever questions you might have have been answered already.

share|improve this answer
add comment

Your Answer


