JS Animated. Wie fügt man einen Link für Slider-Bilder vom TM Slider hinzu

Dieses Tutorial zeigt Ihnen, wie man Links für Slider-Bilder vom TM Slider m im JS Animated Template hinzufügt. (In diesem konkreten Beispiel arbeiten wir mit dem Template 42378, deswegen kann es bei Ihnen Dateien, Ordners und Zeilen natürlich anders heißen) Wenn Ihr JS Animated Template hat, machen Sie dann folgendes, damit Sie Links für Slider-Bilder setzen.

1. Im “js” Ordner öffnen Sie eine Datei mit den Name script.js über Dreamweaver.
2. Prüfen Sie, ob es in der Datei diese Zeile

banners:’fade’,

oder die ähnliche (z.B. banners:’fade’, usw.) gibt
3. Falls es keine gibt, platzieren Sie sie. Das Ergebnis sollte so aussehen:

 <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. Falls es dort schon diese Zeile gibt, nehmen Sie keine Änderungen vor.
5. Über Dreamweaver öffnen Sie die .html Datei, die den Slider hat, (z.B. index.html) und finden Sie den Script vom Slider (in Dreamweaver drücken Sie einfach auf den Slider im Split-Modus, um den Code hervorzuheben) z.B.

<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. Setzen Sie Links für die Slider-Bilder. Das Ergebnis diese Mühe sollte dann wie folgt aussehen:

<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. Speichern Sie die Änderungen. Im “css” Ordner öffnen Sie eine slider.css Datei
8. Setzen Sie den Link für css, wie dieser:

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

9. Speichern die Änderungen und öffnen Sie die .html Datei in Ihrem Browser, damit Sie gucken, ob es jetzt die Links gibt.

Sehen Sie jetzt das ausführliche Video-Tutorial an: