SlideShow con Javascript

Como podréis haber visto debajo de la cabecera de este blog, hay un SlideShow que pasa automáticamente las fotos, además de permitir el pase manual de ellas.
Conseguí este código, desde una plantilla modificada por Abu Farhan. El código es muy simple, se compone de una máscara de estilo CSS, librerías de javascript y HTML.



  • Empezaremos agregando las librerías:

<script src='http://mootools-ui.googlecode.com/svn/trunk/mootools.v1.1.js' type='text/javascript'/>
<script src='http://slideshow-dinix.googlecode.com/files/jd.gallery.js' type='text/javascript'/>

</head>
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 400; summary_img = 370; img_thumb_height = 125; img_thumb_width = 125; </script>
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
    if(strx.indexOf(&quot;&lt;&quot;)!=-1)
    {
        var s = strx.split(&quot;&lt;&quot;);
        for(var i=0;i&lt;s.length;i++){
            if(s[i].indexOf(&quot;&gt;&quot;)!=-1){
                s[i] = s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length);
            }
        }
        strx =  s.join(&quot;&quot;);
    }
    chop = (chop &lt; strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=&#39; &#39; &amp;&amp; strx.indexOf(&#39; &#39;,chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+&#39;...&#39;;
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = &quot;&quot;;
    var img = div.getElementsByTagName(&quot;img&quot;);
    var summ = summary_noimg;
    if(img.length&gt;=1) {   
        imgtag = &#39;&lt;div class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;&#39;+img[0].src+&#39;&quot; width=&quot;&#39;+img_thumb_width+&#39;px&quot; height=&quot;&#39;+img_thumb_height+&#39;px&quot;/&gt;&lt;/div&gt;&#39;;
        summ = summary_img;
    }
   
    if(img.length&lt;1) {   
        imgtag = &#39;&lt;div class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://lh3.ggpht.com/_Toi-rh0Nm00/Shg_C5J7juI/AAAAAAAADXQ/MjMMfNrXSzk/no%20thumb.jpg&quot; width=&quot;125px&quot; height=&quot;125px&quot;/&gt;&lt;/div&gt;&#39;;
        summ = summary_img;
    }
   
    var summary = imgtag + &#39;&lt;div&gt;&#39; + removeHtmlTag(div.innerHTML,summ) + &#39;&lt;/div&gt;&#39;;
    div.innerHTML = summary;
}
</script>
  • Donde está </head>; copiamos esteos códigos.
    Ahora colocamos el widget. Vamos a crear una sección individual para este elemento, y agregaremos el widget directamente a la plantilla, de forma que escogemos la zona donde lo queremos colocar; yo por ejemplo antes de los posts, que es lo mismo que justo después de <div id='main-wrapper'>:


<script type='text/javascript'>
//<![CDATA[

      function startGallery()
      {
        var myGallery = new gallery($('myGallery'),
        {
                timed: true
               
        });
      }
      window.addEvent('domready', startGallery);
      //]]>
      </script>
<b:section class='slidesshoww' id='slideshoww' preferred='yes' showaddelement='false'>
<b:widget id='HTML#' locked='true' title='Slideshow' type='HTML'>
<b:includable id='main'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div align='center'>
<div id='myGallery'>
        <!-- First Picture Start -->
        <div class='imageElement'>
            <h3>TITULO</h3>
            <p/>
                        <a class='open' href='URLpagina'/>
                                   
            <img alt='TITULO' class='full' src='URLfoto'/>
            <img alt='TITULO' class='thumbnail' src='URLfoto'/>
        </div>
        <!-- First Picture End -->                   
            <!-- Second Picture Start -->
               <div class='imageElement'>
            <h3>TITULO</h3>
            <p/>
                        <a class='open' href='URLpagina'/>
                                   
            <img alt='TITULO' class='full' src='URLfoto'/>
            <img alt='TITULO' class='thumbnail' src='URLfoto'/>
        </div>
        <!-- Second Picture End-->                   
            <!-- Third Picture Start -->
               <div class='imageElement'>
            <h3>TITULO</h3>
            <p/>
                        <a class='open' href='URLpagina'/>
                                   
            <img alt='TITULO' class='full' src='URLfoto'/>
            <img alt='TITULO' class='thumbnail' src='URLfoto'/>
        </div>
        <!-- Third Picture End-->                   
            <!-- Fourth Picture Start -->
             <div class='imageElement'>
            <h3>TITULO</h3>
            <p/>
                        <a class='open' href='URLpagina'/>
                                   
            <img alt='TITULO' class='full' src='URLfoto'/>
            <img alt='TITULO' class='thumbnail' src='URLfoto'/>
        </div>
        <!-- Fourth Picture End -->               
    </div>
</div>
</b:if>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

  • Cuida que el HTML# no esté cogido, es decir, que sea único. Para asegurarte puedes poner un número alto. Ej: HTML99.Ésta es la zona donde agregamos nuestras imágenes. Podemos colocar las que queramos. Para ello tenemos que agregar este código antes de </div></b:if>

         <!-- XXX Picture Start -->  
        <div class='imageElement'>
            <h3>TITULO</h3>
            <p/>
                        <a class='open' href='URLpagina'/>
                                   
            <img alt='TITULO' class='full' src='URLfoto'/>
            <img alt='TITULO' class='thumbnail' src='URLfoto'/>
        </div>
        <!-- XXX Picture End -->    
 
  •  Acabado el posicionamiento, pasamos al estilo. Lo colocamos antes de  ]]</b:skin> o después de este pero entre <style></style>
#myGallery, #myGallerySet, #flickrGallery
{
overflow:hidden;
width: 490px;/*ANCHURA*/
height: 280px;/*ALTURA*/
z-index:5;border:1px solid #DCDEDD;

}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}
.jdGallery
{
overflow: hidden;
position: relative;
}
.jdGallery img
{
border: 0;
margin: 0;
}
.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/loading-bar-black.gif');
}
.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/loading-bar-black.gif');
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 50px;
background: #757776 ;
color: #fff;
text-indent: 0;
overflow: hidden;
}
* html .jdGallery .slideInfoZone
{
bottom: -1px;
}
.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 18px;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: inherit;
}
.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
/*width: 100px; background: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel
{
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
cursor: pointer;
background: #000;
background-position: center center;
float: left;
border: solid 1px #fff;
margin:0
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}
.jdGallery a
{
font-size: 100%;
text-decoration: none;
color: inherit;
}
.jdGallery a.right, .jdGallery a.left
{
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
.jdGallery a.right, .jdGallery a.left
{
filter:alpha(opacity=50);
}
.jdGallery a.right:hover, .jdGallery a.left:hover
{
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.jdGallery a.left
{
left: 0;
top: 0;
background: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/fleche1.png') no-repeat center left;
}
.jdGallery a.left { background: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/fleche1-1.gif') no-repeat center left; }
.jdGallery a.right
{
right: 0;
top: 0;
background: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/fleche2.png') no-repeat center right;
}
.jdGallery a.right { background: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/fleche2-1.gif') no-repeat center right; }
.jdGallery a.open
{
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.withArrows a.open
{
position: absolute;
top: 0;
left: 25%;
height: 99%;
width: 50%;
cursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.withArrows a.open:hover {
filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/*width: 100px; background: url('http://i575.photobucket.com/albums/ss197/akhmadaminullah/falknershine/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: #333;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}

  • Tenemos muchos valores variables. Los más significativos serían los relacionados con el tamaño de la caja:
#myGallery, #myGallerySet, #flickrGallery {
overflow:hidden;
width: 490px; (ancho) 
height: 280px; (alto)  
z-index:5;border:1px solid #DCDEDD;  
}

Haz un respaldo de tu plantilla antes de modificarla... ya sabes que después del 'Guardar' no hay vuelta atrás... ¡ah, que tengas suerte!

Cualquier duda, comentario o un mail ;)

Categorías: , , , ,

3 comentarios.

  1. UT says:
    20/04/10 02:31

    HOLA ME INTERESO MUCHO EL POST VOY A VER SI ME RESULTA...!!!

  2. UT says:
    20/04/10 03:22

    eeey no me resulto queda todo grande y no entra en un slider...ayuda!!!

  3. Markos dijo:
    20/04/10 21:20

    ¿Qué error te da?

Deja tu comentario