Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

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.

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

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

    oder die ähnliche (z.B. banners:’fade’, usw.) gibt

  4. Falls es keine gibt, platzieren Sie sie. Das Ergebnis sollte so aussehen:
  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. Falls es dort schon diese Zeile gibt, nehmen Sie keine Änderungen vor.
  7. Ü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.
  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. Setzen Sie Links für die Slider-Bilder. Das Ergebnis diese Mühe sollte dann wie folgt aussehen:
  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. Speichern Sie die Änderungen. Im “css” Ordner öffnen Sie eine slider.css Datei
  12. Setzen Sie den Link für css, wie dieser:
  13. .banner {
    	width:100%;
    	height:100%;
    	position:absolute;
    	left:0;
    	top:0;
    	z-index:1!important;
    
  14. 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:

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