inaz inaz - 1 month ago 8
CSS Question

Add a link to dynamic slider caption

I have a slider that created by amazingslider plugin. It works good but is there a way to add a link (href) to caption of each image? I tried but the link does not show in the slider caption.

Here is my snippet :



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:804px;margin:0px auto 59px; overflow:hidden;">
<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="display:none;">
<li>
<img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="This is a caption This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
/>
</li>
<li>
<img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="This is a caption" />
</li>

</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li>
<img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
</li>
<li>
<img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
</li>

</ul>

</div>
</div>




Answer

What you can do is to add a link tag to the caption attribute. This works if you are using single quotes or escaped double quotes:

<a href='#your-url'>your caption</a>

With this method it's only possible to insert links to the caption, not to link the whole caption itself.

And another hint: Try not to use inline styles, better use the classes and ids you already use to apply your styles.

#amazingslider-wrapper-1 {
  display: block;
  position: relative;
  max-width: 804px;
  margin: 0 auto;
  overflow: hidden;
}
#amazingslider-1 {
  display: block;
  position: relative;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>


<div id="amazingslider-wrapper-1">
  <div id="amazingslider-1">
    <ul class="amazingslider-slides" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="<a href='#'>This is a link</a> This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
        />
      </li>
      <li>
        <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="<a href='#'>This is a link</a>" />
      </li>

    </ul>
    <ul class="amazingslider-thumbnails" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
      </li>
      <li>
        <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
      </li>

    </ul>

  </div>
</div>

Comments