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,

JS Animated. How to add links to TM Slider slider images

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:

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