http://s56.photobucket.com/albums/g194/flameingulfedpyro/?action=view&current=slideshow.jpg

In the picture I have a picture div and a text div. The picture and text are related to one another. I want it that when you click the right or left arrow the pic and text change together. I dont really care how they change, slide, fade, or simple do a show/hide kind of effect.

All i can figure out is how to make one div have a slide show when you mouseover to right or left it moves.

Recommended Answers

All 11 Replies

I have this demo which fades an image with text. Although it does not have your arrows, perhaps it can get you started.

I have this demo which fades an image with text. Although it does not have your arrows, perhaps it can get you started.

It fades an image to show text? If yes, its not what I am looking for. I may have not been clear in my op.

There is two divs thats are related to one another. When I click right or left I want both of them to change. Pic 1 and text for pic 1 should change together and stay in the same place. The text is a description of the picture.

Pic 1 and text for pic 1 should change together and stay in the same place. The text is a description of the picture.

This is what the demo shows...

This is what the demo shows...

Would this also work to have arrows that click to change the multiple divs instead of automatically fading in and out?

Yes, remove the timer and add the arrows.

Yes, remove the timer and add the arrows.

So I kind of understand the code even though its slightly weird for me. I dont get why the images and text is in the .js file. I think I can figure out when I come back home how to move things around to have the layout, font,color scheme, etc. that I need. I know how to take out the fade time but how do I add arrows?

thanks-

I'll see that I make another demo containing the arrows.

The reason that my images and texts are in the js file, is because this file is generated by PHP. I'll change it to an ajax call.

I'll see that I make another demo containing the arrows.

The reason that my images and texts are in the js file, is because this file is generated by PHP. I'll change it to an ajax call.

Cant it be done like this website, http://marthabernabe.com/foodent.html http://marthabernabe.com/foodent.html?

I tried editing the code from this website and learning from it but it made zero sense to me. I was able to change the arrows to the ones I want. The weird part was that even if i copied the code with the picture and linking the js files and putting the script code in a file it wouldnt work. It would just list all the pictures under one another and get rid of the arrows. I tried adding text to the <div> that contained the image and it wouldnt show the text and it would again list all the images one under the other.

Thanks-

this is what I am trying to achieve for the website.

http://www.pritaeas.net/demos/jq-banner/index.html

I kept it as basic as possible, so it's easier for you to experiment with.

thanks! a few questions. Is the grey background its own div with a class? Can the grey background change sizes when you click the arrows?

You mean the one that contains the text (banner-text) ? It now has a fixed height of 43px, but of course you can change anything at anytime.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.