jQuery的幻燈片包含圖像特定文本

單獨的div我已經採取和本質少許修改的一個jQuery的圖像滑塊來操作我多麼希望，特別是一個叫：一個美麗的蘋果風格的幻燈片畫廊與CSS & jQuery的。jQuery的幻燈片包含圖像特定文本

我目前正嘗試將此幻燈片鏈接到包含圖像特定文本的單獨的div下，我通過超級鏈接每個縮略圖以加載每個圖像所需的內容，在一個非常簡單的莊園中實現了這一目標。

理想我想這個通過使用下一個和以前控制的幻燈片，但嘗試沒有成功多種解決方案的情況發生。我目前的嘗試加載圖像1和圖像2的文本，但從那裏卡住了。

的HTML，CSS和JavaScript我嘗試可以在http://jsfiddle.net/v9vf9/找到（結果不正確顯示爲我所有的文件都是本地存儲的時刻）

我相信什麼，我試圖實現不是很複雜，但似乎超出了我的能力，我很欣賞任何建議，幫助或解決方案，以取得成功！期待着提高我的知識。

謝謝你在前進，卡爾

來源

2012-03-08 iceburn

我可能會嘗試把文本（和它自己的父元素，即''

Text

）到每個'.slide'元素，只是適當的定位圖像下面的文字。由於'＃幻燈片'有'溢出：隱藏的''有一個很好的理由，我可能會提高它的高度，以便文本可以在圖像下方看到。這樣文字就會自動滑動。 – Joonas 2012-03-08 12:39:01

謝謝@Lollero的迴應，你的建議與滑塊完美配合，併爲每張幻燈片提供圖像特定文本，但不幸的是，它在'＃slides' div內，它出現在滑塊縮略圖上方。這就是爲什麼我試圖將圖像特定文本放置在它自己的div中，以便它可以放置在滑塊下方並顯示爲分隔，儘管通過jQuery鏈接在一起。 – iceburn 2012-03-08 13:34:40

你總是可以做一些像'#slides {position：relative; z-index：5; } #thumbnail_parent_element {position：relative; z-index：10;頂部：-50px;/*或任何值所需的humbnails滑入正確的位置asuming你想要的縮略圖下方的文字就像在你的例子* /}' – Joonas 2012-03-08 13:43:32

所以，在評論

http://jsfiddle.net/lollero/Sw4y8/

這是一個有點容易把文本動畫的幻燈片中，使它們與圖像動畫提示自動和最重要的是給#slides元素一個較大的高度文本可以適應英寸

HTML：

<div class="slide"> 
     <img src="http://placekitten.com/g/500/230" alt="" /> 
     <div class="text">Text</div> 
    </div> 

</div> 

<div id="thumbnails">Thumbnails</div>

CSS：

#slides { 
    height: 550px; /* or what ever amount is big enough to fit the text there too */ 
    float: left; 
    position: relative; 
    z-index: 5; 
} 

#thumbnails { 
    float: left; 
    clear: both; 
    position: relative; 
    z-index: 10; 
    top: -110px; 
} 

.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }

來源

2012-03-09 16:27:37 Joonas

jQuery的幻燈片包含圖像特定文本

回答

相關問題