[contact-form-7 id="24084" title="Feedback ES"]

Plantillas Destacadas

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:
  3. banners:’fade’,
    

    o una línea similar (por ejemplo, banners:’fade’, etc)

  4. Si no se puede encontrar la línea, hay que agregarla:
  5.  <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>
  6. Si la línea ya está ahí, no tiene que cambiar nada.
  7. 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
  8. <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>
  9. Agregue sus enlaces a las imágenes de slider de esta manera:
  10. <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>
  11. Guarde los cambios y abra la carpeta “css” y encuentre el fichero slider.css.
  12. Agregue el enlace de imagen de slider a css de la siguiente manera:
  13. .banner {
    	width:100%;
    	height:100%;
    	position:absolute;
    	left:0;
    	top:0;
    	z-index:1!important;
    
  14. 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?