首页 文章

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

提问于
浏览 次
2

我想使用Jquery Tools Scrollable插件创建一个"gallery"幻灯片 . 但是像 <a href='something'><img src='myimage' /> </a> 那样添加标签是不可能的

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

谁知道为什么？或者任何人都可以向我推荐一个最适合我的问题的解决方案或控件？

谢谢

EDIT

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 {float：left;宽度：为680像素; }

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

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

}

/ 活动项目 / .scrollable .active {border：2px solid＃000;位置：相对;光标：默认; }

/ 导航器的位置和尺寸 / .navi {margin-left：328px;宽度：200像素;高度：20像素; }

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

/ * mouseover state * / .navi a：hover {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>
jquery jquery-ui

2 回答

  • 0

    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 .

    让我知道事情的后续 . 橡子

    回复于
  • 0

    jQuery方法 .append() （http://api.jquery.com/append/）不包装其他元素 . 而是试图调查 .wrap() （http://api.jquery.com/wrap/）

    回复于

相关问题