Question

我想使用Jquery Tools Scrollable插件创建一个“图库”幻灯片。但是添加标签是不可能的 <a href='something'><img src='myimage' /> </a>

特别是如果我只使用<img>标签它会很好..但如果我在“a href”标签之前“追加”它将停止工作......

任何人都知道为什么？或者任何人都可以建议我解决方案或控制最适合我的问题？

三江源

修改

Css cod： / * 可滚动的根元素。滚动时，此元素保持不变。 * / .scrollable {

/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;

/* custom decorations */
border:1px solid #ccc;
background:url(/img/global/gradient/h300.png) repeat-x;

}

/ * 可滚动项的根元素。必须绝对定位它应该有一个非常大的宽度来容纳可滚动的项目。你设置根元素的宽度和高度就足够了不是这个元素。 / .scrollable .items { / 这不能太大* / 宽度：20000em; 位置：绝对的; 明确：两者; }

.items div { 向左飘浮; 宽度：为680像素; }

/ *单个可滚动项目* / .scrollable img { 向左飘浮; 保证金：20px 5px 20px 21px; 背景色：#FFF; 填充：2px的; border：1px solid #ccc; 宽度：100像素; 高度：960x75像素;

-moz-border-radius:4px;
-webkit-border-radius:4px;

}

/ *有效项目* / .scrollable .active { 边界：2px solid＃000; 位置：相对; 光标：默认; }

/ *导航仪的位置和尺寸* / .navi { 保证金左：328px; 宽度：200像素; 高度：20像素; }

/ *导航器内的项目* / .navi a { 宽度：8像素; 高度：8像素; 向左飘浮; 保证金：3px的; background：url（/images/navigator.png）0 0不重复; 显示：块; 字体大小：1px的; }

/ *鼠标悬停状态* / .navi a：悬停{ background-position：0 -8px;
}

/ *活动状态（当前页面状态）* / .navi a.active { background-position：0 -16px;
}

HTML：

  <!-- "previous page" action -->
        <a class="prev browse left">Prev.</a>
        <!-- root element for scrollable -->
        <div class="scrollable">
            <!-- root element for the items -->
            <div class="items">                                        
                <a href='/annuncio.aspx?idannuncio=13' border='0'><img src='/fotoannunci/13-1.jpg' class='ResizeFotoSmall' /></a>

            </div>
        </div>
        <!-- "next page" action -->
        <a class="next browse right">Next</a>

Answer 1

jQuery方法.append()（http://api.jquery.com/append/）不包含其他元素。而是尝试查看.wrap()（http://api.jquery.com/wrap/）

Answer 2

jQuery Tools Scrollable插件基本上可以与您想要的任何标记一起使用。听起来您在设置可滚动选项以及一些时髦的CSS和/或标记时遇到了问题。

尝试将可滚动元素包装在包含div中，为其指定类名（例如“ScrollableItem”）。这些项必须是您在可滚动构造函数中被指定为“items”属性的元素的子元素。例如，让我们给包含元素一个类名“ScrollableItems”看看下面的可滚动的javascript：

$('.Scrollable').scrollable({
        items: '.ScrollableItems'
});

查看相应的标记（示例）：

<div class="Scrollable">
<div class="ScrollableItems">
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
</div>
</div>

CSS（示例）：

.Scrollable {
      height:166px; /* example */
      overflow:hidden;
}

.ScrollableItems {
      position:absolute;
      width:20000em;
}

您需要自己的CSS规则和其他可滚动的javascript参数才能使您的特定项目正常工作，但可滚动工具几乎可以使用任何语义正确的标记。

我还会看一下他们的示例以及他们的API here。

让我知道它是怎么回事。橡子

JQuery Tools Scrollable：无法向图像添加超链接

2 个答案: