Plantillas con animación JS. ¿Cómo añadir enlaces a imágenes de TM Slider?

Este tutorial puede ayudar a añadir enlaces a imágenes de TM Slider en una plantilla con animación JS (en este tutorial usamos la plantilla 42378 como ejemplo, por lo que los nombres de los ficheros, las carpetas y las líneas pueden ser diferentes en su plantilla). Si su plantilla con animación JS utiliza slider TM y Usted quiere añadir enlaces a las imágenes de slider,

1. Abra la carpeta “js” y encuentre el fichero script.js en Dreamweaver.
2. Revise el fichero y encuentre la línea:

banners:’fade’,

o una línea similar (por ejemplo, banners:’fade’, etc)
3. Si no se puede encontrar la línea, hay que agregarla:

 <script type="text/javascript">

$(document).ready(function(){

   $(".works-list a.tooltips").easyTooltip();

});

$(function(){

   $('.slider')._TMS({

   prevBu:'.prev',

   nextBu:'.next',

   playBu:'.play',

   duration:800,

   easing:'easeOutQuad',

   preset:'diagonalFade',

   pagination:true,

   slideshow:6000,

   numStatus:false,

   pauseOnHover:false,

   banners:'fade',

}); 

})

</script>

  

4. Si la línea ya está ahí, no tiene que cambiar nada.
5. Abra el fichero .html con el slider por medio de Dreamweaver (por ejemplo, index.html) y encuentre el script de slider (haga clic en el slider en Dreamweaver en el modo Split para seleccionar el código), por ejemplo

<div class="slider">

  <ul class="items">

    <li><img src="images/slide-1.jpg" alt=""></li>

    <li><img src="images/slide-2.jpg" alt=""></li>

    <li><img src="images/slide-3.jpg" alt=""></li>

    <li><img src="images/slide-4.jpg" alt=""></li>

  </ul>

</div>

6. Agregue sus enlaces a las imágenes de slider de esta manera:

<div class="slider">

  <ul class="items">

    <li><img src="images/slide-1.jpg" alt=""><a href="index-1.html" class="banner"></a></li>

    <li><img src="images/slide-2.jpg" alt=""><a href="index-2.html" class="banner"></a></li>

    <li><img src="images/slide-3.jpg" alt=""><a href="index-3.html" class="banner"></a></li>

    <li><img src="images/slide-4.jpg" alt=""><a href="index-4.html" class="banner"></a></li>

  </ul>

</div>

7. Guarde los cambios y abra la carpeta “css” y encuentre el fichero slider.css.
8. Agregue el enlace de imagen de slider a css de la siguiente manera:

.banner {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1!important;

9. Guarde los cambios y abra el fichero .html en su navegador web para comprobar si las imágenes de slider tienen ahora los enlaces.

Por favor, revise el tutorial: