JQuery 工具可滚动 : impossible to add hyperlink to image

Question

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

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

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

谢谢

编辑

CSS代码:/* 可滚动的根元素。 当滚动发生时，该元素保持静止。*/.可滚动{

/* 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； position:absolute； 明确:两者；}

.items div { 向左飘浮; 宽度:680px；}

/* 单个可滚动项目 */.滚动img { 向左飘浮; 边距:20px 5px 20px 21px； 背景颜色:#fff； 内边距:2px； 边框:1px实心#ccc； 宽度:100px； 高度:75px；

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

}

/* 事件项目 */.scrollable .active { 边框:2px实心#000； 职位:亲属； 光标:默认；}

/* 导航器的位置和尺寸 */.navi { 左边距:328px； 宽度:200px； 高度:20px；}

/* 导航器内的项目 */.navi a { 宽度:8px； 高度:8px； 向左飘浮; 边距:3px； 背景:url(/images/navigator.png) 0 0 不重复； 显示: block ； 字体大小:1px；}

/* 鼠标悬停状态 */.navi a:悬停{ 背景位置:0 -8px;
}

/*事件状态(当前页面状态)*/.navi a.active { 背景位置: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 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 .

让我知道进展如何。橡子