JQuery Tools Scrollable：不可能将超链接添加到图像

我想创建一个使用Jquery Tools Scrollable插件的“图库”幻灯片。但它不能添加标签就像 <a href='something'><img src='myimage' /> </a>JQuery Tools Scrollable：不可能将超链接添加到图像

特别是它工作得很好，如果我只用<img>标签..但如果我的“A HREF”标记将停止工作前，“追加” ...

任何人都知道为什么？或者任何人都可以向我建议一个解决方案或最能表明我的问题的控制？

三江源

EDIT

的CSS鳕鱼：用于可滚动 /* 根元素。滚动发生时，此元素保持不动。 */ .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; position：absolute; 明确：均; }

.items div {float：left; width：680px; }

/*单个可滚动项目*/ .scrollable img {float}：left; margin：20px 5px 20px 21px; background-color：#fff; padding：2px; border：1px solid #ccc; width：100px; height：75px;

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

}

/*活性项*/ .scrollable。主动{ 边界：2px的固体＃000; 位置：相对;光标：默认; 光标：默认; }

/*导航器的位置和尺寸*/ .navi {margin：left-left：328px; width：200px; height：20px; }

/*导航仪内的项目*/ .navi a { width：8px; height：8px; float：left; margin：3px; background：url（/ images/navigator。png）0 0不重复; display：block; font-size：1px; }

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

来源

2010-06-22 stighy

jQuery Tools Scrollable插件基本上可以与任何你想要的标记一起工作。听起来像你有一个问题，你已经设置滚动选项结合一些时髦的CSS和或标记的方式。

尝试将您的可滚动元素封装在包含div的类中，并为其指定类名称（例如“ScrollableItem”）。这些项目需要是您在可滚动构造函数中作为“items”属性指定的元素的子项。例如，让我们给containng元素的“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 PARAMS让你specic项目正常工作，但滚动的工具可以禾rk与几乎任何语义正确的标记。

我也看看他们的例子以及他们的API here。

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

来源

2010-06-22 15:43:15 Acorn

jQuery的方法.append()（http://api.jquery.com/append/）不换行的其他元素。而不是尝试寻找.wrap()（http://api.jquery.com/wrap/）

来源

2010-06-22 15:05:38 Sam

他不应该需要使用JavaScript来包装任何东西在这种情况下。相反，只需使用标记。 – Acorn 2010-06-22 15:48:21

JQuery Tools Scrollable：不可能将超链接添加到图像

回答

相关问题