Question

我有一个由amazingslider插件创建的滑块。它工作得很好但是有没有办法在每个图像的标题中添加一个链接（href）？我尝试过，但链接没有显示在滑块标题中。

这是我的代码：

<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 1

您可以做的是为标题属性添加链接标记。如果您使用单引号或转义双引号，则此方法有效：

class Product < ActiveRecord::Base
  OPTIONS_SIZE_MIN = 2
  validate :require_two_options

  private

  def options_count_valid?
    options.reject(&:marked_for_destruction?).size >= OPTIONS_SIZE_MIN
  end

  def require_two_options
    errors.add(:base, 'You must provide at least two options') unless options_count_valid?
  end
end

使用这种方法，只能插入标题的链接，而不是链接整个标题本身。

另一个提示：尽量不要使用内联样式，更好地使用已经用于应用样式的类和ID。

＆＃13;

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

＆＃13;

#amazingslider-wrapper-1 {
  display: block;
  position: relative;
  max-width: 804px;
  margin: 0 auto;
  overflow: hidden;
}
#amazingslider-1 {
  display: block;
  position: relative;
  margin: 0 auto;
}

＆＃13;

添加动态滑块标题的链接

1 个答案: