JQuery Slideshow Tutorial-P2

In this part we'll add titles, text and links to our slideshow...

Lests Stat:

<div id="slideshow">

     <div id="slideshowWindow">

        <div class="slide">

                    <img src="slide1.jpg" />

                 <div class="slideText">

                     <h2 class="slideTitle">Slide 1</h2>

                     <p class="slideDes">Lorem ipsum dolor sit amet, 

                     consectetur adipisicing elit, sed do eiusmod tempor 

                     incididunt ut labore et dolore magna aliqua.</p>

                     <p class="slideLink"><a href="#">click here</a></p>

                 </div><!--/slideText-->

            </div><!--/slide-->

        <div class="slide">

                <img src="slide2.jpg" />

                                       <div class="slideText">

                     <h2 class="slideTitle">Slide 2</h2>

                     <p class="slideDes">Lorem ipsum dolor sit amet, 

                     consectetur adipisicing elit, sed do eiusmod tempor 

                     incididunt ut labore et dolore magna aliqua.</p>

                     <p class="slideLink"><a href="#">click here</a></p>

                 </div><!--/slideText-->

        </div><!--/slide-->

        <div class="slide">

                <img src="slide3.jpg" />

                                       <div class="slideText">

                     <h2 class="slideTitle">Slide 3</h2>

                     <p class="slideDes">Lorem ipsum dolor sit amet, 

                     consectetur adipisicing elit, sed do eiusmod tempor 

                     incididunt ut labore et dolore magna aliqua.</p>

                     <p class="slideLink"><a href="#">click here</a></p>

                 </div><!--/slideText-->

        </div><!--/slide-->

     </div><!--/slideshowWindow-->

</div><!--/slideshow-->

And the css:

#slideshow #slideshowWindow {

        width:500px;

        height:257px;

        margin:0;

        padding:0;

        position:relative;

        overflow:hidden;

}

#slideshow #slideshowWindow .slide {

        margin:0;

        padding:0;

        width:500px; 

        height:257px;

        position:relative;

}

#slideshow #slideshowWindow .slide .slideText {

        position:absolute;

        top:130px;

        left:0px;

        width:100%;

        height:130px;

        background-image:url(greyBg.png);

        background-repeat:repeat;

        margin:0;

        padding:0;

        color:#ffffff;

        font-family:Myriad Pro, Arial, Helvetica, sans-serif;

}

#slideshow #slideshowWindow .slide .slideText a:link, 

#slideshow #slideshowWindow .slide .slideText a:visited {

        color:#ffffff;

        text-decoration:none;

}

#slideshow #slideshowWindow .slide .slideText h2, 

#slideshow #slideshowWindow .slide .slideText p {

        margin:10px 0 0 10px;

        padding:0;

}

[note : insert your own image on yellow link]

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 20:52 and have