slidewp

• TinySlideshow v1

  http://img22.xooimage.com/files/a/f/9/orange-fish-112055d.jpg

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

• Sea Turtle

  http://img40.xooimage.com/files/5/c/3/sea-turtle-1120567.jpg

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

• Red Coral

  http://img48.xooimage.com/files/9/3/4/red-coral-1120562.jpg

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

• Coral Reef

  http://img44.xooimage.com/files/e/6/a/coral-reef-112055b.jpgF

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

• Blue Fish

  http://img28.xooimage.com/files/3/2/2/blue-fish-112054f.jpg

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

• TinySlideshow v.2

  http://img22.xooimage.com/files/3/e/3/yellow-fish-1120573.jpg

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

• Squid

  http://img44.xooimage.com/files/e/8/9/squid-112056f.jpg

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

• Small Fish

  http://img26.xooimage.com/files/e/8/f/small-fish-112056b.jpg

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

  

Codigo SlidewShow

<link rel="stylesheet" href="style.css" />

    <ul id="slideshow">
        <li>
            <h3>TinySlideshow v1</h3>
            <span>http://img22.xooimage.com/files/a/f/9/orange-fish-112055d.jpg</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <a href="#"><img src="http://img40.xooimage.com/files/9/6/3/orange-fish-thumb-1126550.jpg" alt="Orange Fish" /></a>
        </li>
        <li>
            <h3>Sea Turtle</h3>
            <span>http://img40.xooimage.com/files/5/c/3/sea-turtle-1120567.jpg</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <img src="http://img42.xooimage.com/files/2/a/7/sea-turtle-thumb-1126570.jpg" alt="Sea Turtle" />
        </li>
        <li>
            <h3>Red Coral</h3>
            <span>http://img48.xooimage.com/files/9/3/4/red-coral-1120562.jpg</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <a href="#"><img src="http://img48.xooimage.com/files/1/d/7/red-coral-thumb-1126560.jpg" alt="Red Coral" /></a>
        </li>
        <li>
            <h3>Coral Reef</h3>
            <span>http://img44.xooimage.com/files/e/6/a/coral-reef-112055b.jpgF</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <a href="#"><img src="http://img22.xooimage.com/files/9/3/d/coral-reef-thumb-112653d.jpg" alt="Coral Reef" /></a>
        </li>
        <li>
            <h3>Blue Fish</h3>
            <span>http://img28.xooimage.com/files/3/2/2/blue-fish-112054f.jpg</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <img src="http://img42.xooimage.com/files/d/a/7/blue-fish-thumb-1126524.jpg" alt="Blue Fish" />
        </li>
        <li>
            <h3>TinySlideshow v.2</h3>
            <span>http://img22.xooimage.com/files/3/e/3/yellow-fish-1120573.jpg</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <a href="#"><img src="http://img40.xooimage.com/files/2/a/6/yellow-fish-thumb-1126593.jpg" alt="Yellow Fish" /></a>
        </li>
        <li>
            <h3>Squid</h3>
            <span>http://img44.xooimage.com/files/e/8/9/squid-112056f.jpg</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <a href="#"><img src="http://img22.xooimage.com/files/4/1/5/squid-thumb-112658a.jpg" alt="Squid" /></a>
        </li>
        <li>
            <h3>Small Fish</h3>
            <span>http://img26.xooimage.com/files/e/8/f/small-fish-112056b.jpg</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
            <a href="#"><img src="http://img46.xooimage.com/files/7/e/1/small-fish-thumb-112657b.jpg" alt="Small Fish" /></a>
        </li>
    </ul>
    <div id="wrapper">
        <div id="fullsize">
            <div id="imgprev" class="imgnav" title="Previous Image"></div>
            <div id="imglink"></div>
            <div id="imgnext" class="imgnav" title="Next Image"></div>
            <div id="image"></div>
            <div id="information">
                <h3></h3>
                <p></p>
            </div>
        </div>
        <div id="thumbnails">
            <div id="slideleft" title="Slide Left"></div>
            <div id="slidearea">
                <div id="slider"></div>
            </div>
            <div id="slideright" title="Slide Right"></div>
        </div>
    </div>
<script type="text/javascript" src="http://lifexd.000space.com/sdp/compressed.js"></script>
<script type="text/javascript">
    $('slideshow').style.display='none';
    $('wrapper').style.display='block';
    var slideshow=new TINY.slideshow("slideshow");
    window.onload=function(){
        slideshow.auto=true;
        slideshow.speed=5;
        slideshow.link="linkhover";
        slideshow.info="information";
        slideshow.thumbs="slider";
        slideshow.left="slideleft";
        slideshow.right="slideright";
        slideshow.scrollSpeed=4;
        slideshow.spacing=5;
        slideshow.active="#fff";
        slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    }
</script>

Tutoriales

Crear Imagenes Pequeñas

Web: thumber.bigplain.com/
Tutorial: www.fileden.com/files/2007/12/5/1626855/thumbail.swf

 

Editar SlidewShow

Tutorial:www.fileden.com/files/2007/12/5/1626855/thumbail%202.swf