Rotating images and text - php

Question

I want to have an image with it's corresponding block of text rotating every few seconds on my website. Just like these guys http://hellofisher.com/
I know I can get a javascript to rotate the images but I haven't found where I can have the block of text alongside rotating to suit the images.

Answer 1

Just google for jquery content rotators or content sliders. There's a million ready-made plugins already done like this:
For example

Answer 2

I'll show you a simple example which you can easily use on your site. This example uses 3 slides and isn't a dynamic slider where you can have as many slides as you want to but it's easy to edit it into one if the amount of slides can vary.
HTML:
<div id="slider">
<div id="slider-area">
<div class="slide">content</div>
<div class="slide">content</div>
<div class="slide">content</div>
</div>
</div>
Slider is the visible area which the user can see, slider-area is the area where you put the slides and each slide contains a different image and text.
CSS:
#slider {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
#slider-area {
width: 1200px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.slide {
width: 400px;
float: left;
}
As you can see, slider-area's width is 3 times the size of slider because there are 3 slides. Slider has overflow: hidden which means scrollbar won't be visible and position: relative so that we can absolutely position the slider-area inside the slider. Then we simply insert slides inside the slider-area.
JS (using JQuery):
$(document).ready(function() {
var timer = setInterval(changeSlide, 5000);
});
function changeSlide() {
var pos = $('#slider').attr('scrollLeft');
if (pos==800)
pos=0
else
pos=pos+400;
$('#slider').animate({scrollLeft: pos}, 600, 'swing');
}
Here you set a timer which will call the changeSlide function every 5 seconds. The changeSlide function will take the current position of the slider's scrollbar and animate it accordingly. If it's displaying the last slide, next one will be the first slide (pos=0) and if it's not displaying the last slide, it adds 400 to the position so that it will scroll to the next slide. Basically the sliding animation is simply moving a hidden scrollbar with a timer.
Hopefully that helps!

Answer 3

Just use jQuery to rotate out a <div> containing an image and associated text. Use $.hide() and $.show() and Javascript's time functions.

Answer 4

You could try:
JAVASCRIPT
var imagelist = ["IMAGE1","IMAGE2","IMAGE3"]
var textlist = ["TEXT1","TEXT2","TEXT3"];
counter=0;
countmax=3;
var next = function(){
$('rotating_image').innerHTML="<img src=\"" imagelist[counter%countmax] + "\">";
$('rotating_text').innerHTML=textlist[counter%countmax];
countmax++;
}
var rotate = window.setInterval(next, SECONDS * 1000);
HTML
<span id="rotating_image"></span>
<span id="rotating_text"></span>