jQuery picture rotator

[Edward01]

What ho all.

Can anyone point me in the right direction for something similar to this picture rotator. More specifically the text overlay effect. I'm seeing it everywhere at the moment and want to incorporate it into a site. I reckon you could probably do it in CSS with some PNGs but there must be a neat all in one jQuery or similar option available.

Thanks.

 

[V4NT0M]

Is this for wordpress? If so there's a similar wordpress plugin: http://www.featuredcontentgallery.com/

 

[gord]

That's exactly what they are doing, spans for the title with a background alpha png.

The rotator could easily be any jquery rotator. Google Jquery tools.

.hero-text h2 span {
background:url("../images/home/hero-black-bg.png") repeat scroll left top transparent;
clear:both;
display:block;
float:left;
padding:5px 10px 5px 14px;
}

<div id="HeroText" class="hero-text">
                        <h2 id="Title">
                            <span>Your invitation </span><span>to join </span><span>government</span>
                        </h2>
                        <div class="hero-inner">
                            <p id="Summary">
                                We need your energy, your ideas, your passion to get this country moving</p>
                            <div class="play-vid-wrapper">
                                <div class="play-vid-TL">
                                    <div class="play-vid-BL" id="buttonClass">
                                        <input type="submit" class="play-vid" id="main_0_homepageheader_0_MainFeatureObjectView_ctl00_mainButton" onclick="return loadContent(this);" value="Watch video" name="main_0$homepageheader_0$MainFeatureObjectView$ctl00$mainButton">      
                                    </div>
                                    
                                </div>
                                <div class="play-vid-Right">
                                </div>
                            </div>
                            <div class="clear">
                            </div>
                            <input type="hidden" id="currentIndex" value="0">
                        </div>
                    </div>

 

[Edward01]

That's exactly what they are doing, spans for the title with a background alpha png.

The rotator could easily be any jquery rotator. Google Jquery tools.

.hero-text h2 span {
background:url("../images/home/hero-black-bg.png") repeat scroll left top transparent;
clear:both;
display:block;
float:left;
padding:5px 10px 5px 14px;
}

<div id="HeroText" class="hero-text">
                        <h2 id="Title">
                            <span>Your invitation </span><span>to join </span><span>government</span>
                        </h2>
                        <div class="hero-inner">
                            <p id="Summary">
                                We need your energy, your ideas, your passion to get this country moving</p>
                            <div class="play-vid-wrapper">
                                <div class="play-vid-TL">
                                    <div class="play-vid-BL" id="buttonClass">
                                        <input type="submit" class="play-vid" id="main_0_homepageheader_0_MainFeatureObjectView_ctl00_mainButton" onclick="return loadContent(this);" value="Watch video" name="main_0$homepageheader_0$MainFeatureObjectView$ctl00$mainButton">      
                                    </div>
                                    
                                </div>
                                <div class="play-vid-Right">
                                </div>
                            </div>
                            <div class="clear">
                            </div>
                            <input type="hidden" id="currentIndex" value="0">
                        </div>
                    </div>

Humm i was afraid of that, was hoping for a nice all in one job. Damnit, I better get coding then.


Thanks skyfall, I will take a look if I decide not to go with this.

 

[That Guy]

I use this and it works perfect:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

 

[Sirrel Squirrel]

I use this and it works perfect:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Excellent little script