添加指向 jCarousel 图像的链接答案

【问题标题】：Add links to jCarousel Images添加指向 jCarousel 图像的链接
【发布时间】：2015-01-07 01:24:19
【问题描述】：

我正在使用 jQuery 将 jCarousel 添加到我的 Shopify 主页。轮播显示和滚动正常，但我需要为每个图像添加链接，以便在单击图像时将用户定向到特定的产品页面。

Shopify 使用名为 Liquid 的模板引擎，它是 Ruby 的变体。我不了解 Ruby 或如何实现我正在寻求的功能。

下面是我使用 jCarousel 的 sn-p。谁能建议在哪里修改代码以便我为每个图像创建链接？

<div class="carousel-inner">
{% for i in (1..4) %}
{% capture show_slide %}slide_{{ i }}{% endcapture %}
{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}
{% capture link %}slide_{{ i }}_link{% endcapture %}
{% capture link_text %}slide_{{ i }}_link_text{% endcapture %}
{% capture headline %}slide_{{ i }}_headline{% endcapture %}
{% capture content %}slide_{{ i }}_content{% endcapture %}
{% if settings[show_slide] %}
<div class="item{% if i == 1 %} active {% endif %}">
  <img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" />
  <div class="slide-container">
    <div class="container-fluid">
      <div class="carousel-caption col-md-5 col-sm-10">
        <h1>{{ settings[headline] | escape }}</h1>
        <p>{{ settings[content] | escape }}</p>
        <a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endfor %}

【问题讨论】：

标签： jquery ruby shopify liquid jcarousel

【解决方案1】：

看起来每张幻灯片都已经有一个按钮，其中包含在“设置”中设置的链接：

<a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>

如果您还没有将此功能用于其他用途，您可以修改此代码以将链接添加到图像本身而不是按钮。那么你不需要改变任何东西。

例如：

<div class="item{% if i == 1 %} active {% endif %}">
  <a href="{{ settings[link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>
  <div class="slide-container">
    ...
  </div>
</div>

如果您已经在使用该按钮链接到其他内容，则需要在“设置”中添加其他字段以保存产品链接并执行以下操作：

{% capture image_link %}slide_{{ i }}_image_link{% endcapture %}
...
<a href="{{ settings[image_link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>

【讨论】：