JQuery Tools Scrollable：不可能將超鏈接添加到圖像

Question

我想創建一個使用Jquery Tools Scrollable插件的「圖庫」幻燈片。 但它不能添加標籤就像 <a href='something'><img src='myimage' /> </a>

特別是它工作得很好，如果我只用<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> 

Answer 1

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。

讓我知道它是怎麼回事。 橡子

Answer 2

jQuery的方法.append()（http://api.jquery.com/append/）不換行的其他元素。而不是嘗試尋找.wrap()（http://api.jquery.com/wrap/）