Anleitung zur Erstellung von links für die Bilder in diesem jQuery Slider plugin

Okay, ich werde versuchen, fügen Sie links zu jeder der meine Fotos in den slider. Ich habe es auf 2 anderen Webseiten, aber diese Codierung ist anders, als die anderen 2, wenn ich, fügen Sie den Anker-tag.

<a href="http://www.google.com

Ich habe versucht, indem Sie es in verschiedene Teile der HTML-Vorlage, aber es funktioniert nicht so, hier ist meine Codierung. Ich weiß, das ist wahrscheinlich etwas einfacher, ich bin fehlt?

<div class="pad-slider">
        <div class="main-slider">
            <ul class="items">
                <li>
                    <img src="images/slide1.jpg" alt="" />
                    <div class="slider-banner"><span>The Next Level of Your Success</span></div>
                </li>
                <li>
                    <img src="images/slide2.jpg" alt="" />
                    <div class="slider-banner"><span>We offer Different Ways of Problem Solving</span></div>
                </li>
                <li>
                    <img src="images/slide3.jpg" alt="" />
                    <div class="slider-banner"><span>We craft practical solutions</span></div>
                </li>
            </ul>
        </div>
    </div>

Wenn Sie brauchen mehr Informationen, lassen Sie es mich wissen. Hier ist die Vorlage website, die ich benutze mit dem Schieberegler live gesehen auf der homepage: Link

InformationsquelleAutor Ryan Clark | 2012-12-09

  1. 3

    Den besonderen jQuery Schieberegler Sie verwenden, ist benannt TMSlider 0.4.1 und es erlaubt, die SPANNE von text zu links, wenn Sie den setup für Ihr HTML korrekt.

    Auch, wenn Sie wollen, dass die tatsächlichen Bilder zu links (die möglicherweise das gleiche oder unterschiedlich wie oben links), dann fügen Sie eine zusätzliche div und ein wenig CSS zu erreichen, die Funktionalität.

    jsFiddle DEMO

    HTML-Abschnitt:

    <div class="pad-slider">
    <div class="main-slider">
        <ul class="items">
            <li>
              <img src="http://img186.imageshack.us/img186/1866/halo3wallpaper1024copy9yf1.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Google IMAGES website." onclick="window.open('http://images.google.com/'); return true;"></div>
                <a href="http://www.google.com">
                  <span>Click here to open Google MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img91.imageshack.us/img91/6278/telagawarnalakewallpapew.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Bing IMAGES website."  onclick="window.open('www.bing.com/images/'); return true;"></div>
                <a href="http://www.bing.com">
                  <span>Click here to open Bing MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img393.imageshack.us/img393/9093/sky04jr4.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open AltaVista IMAGES website"  onclick="window.open('http://images.search.yahoo.com/'); return true;"></div>
                  <a href="http://us.altavista.com/">
                    <span>Click here to open AltaVista MAIN website.</span>
                  </a>
                </div>
            </li>
        </ul>
    </div>
</div>

    CSS-Abschnitt:

    .imageLink {
  width: 950px;
  height: 440px;
  margin-top: -440px;
  cursor: pointer;
}

    Passen Sie die Breite und Höhe der zusätzlichen CSS-damit Sie mit Ihrer Schieberegler Größe, mit Ausnahme der mit einem negativen Wert für margin-top.

    Alternate-Link-Format: Wenn Sie möchten, dass die angeklickte Bilder nicht zu öffnen, ein separates tab/Fenster, dann verwenden Sie folgende syntax für das onclick-Ereignis zu verwenden, die gleichen browser-Fenster.

    onclick="window.location.href = 'http://www.bing.com/images/'; return true;"
    Danke so viel und was ich Tat, war, schaute auf die CSS geändert und der slider-banner eine löschen-png-hintergrund und dann alles gelöscht, was den text und lassen Sie es, Sie haben nur einen link auf das Bild, so ich danke Ihnen so sehr
    Es sieht aus wie Ihre nicht mit meiner Antwort, aber Ihre eigenen ist viel anders. Das ist schön, dass du eine Antwort gefunden, die Sie mögen, aber tun, sollten Sie das erstellen einer Antwort basierend auf der Lösung aus, und akzeptieren Sie Ihre eigene Antwort. Prost!

    InformationsquelleAutor arttronics

  2. 0

    Eine alte Frage, aber vielleicht hilfreich für andere zu lösen versuchen der gleiche.

    Fügen Sie einfach einen link innerhalb des li-tags:

    <li>
 <img src="banner.jpg" border="0" alt=""/>
 <div class="banner"> </div><a href="http://www.google.com" class="banner"></a>
</li>

    Innerhalb der css hinzufügen:

    a.banner {width:100%; height:100%; position:absolute}

    Quelle: http://www.youtube.com/watch?v=0CyCyJkOD9Q&noredirect=1

    InformationsquelleAutor Pexsol

Schreibe einen Kommentar