Ich möchte gleich sagen, ich bin kein Profi [Blockierte Grafik: http://www.html.de/images/smilies/icon_smile.gif]
Ich habe gestern im Internet etwas gefunden iCarousel - Simple news ticker (Mal Top und Bottom klicken, für den effeckt, den ich auch haben mag)
Da es in ein Forum soll, habe ich es in eine tabelle gesetzt und werde nur den codschnippsel zeigen, der zu diesen teil des Forum gehört und später eingesetzt wird.
Mein Problem besteht darin, das ich es zwar so hinbekommen habe es ein zu fügen, aber der effeckt der IV. Vertical images scroller funktioniert nicht [Blockierte Grafik: http://www.html.de/images/smilies/icon_sad.gif] Da ich es euch nicht per link auf eine seite zeigen kann, werde ich den code schnippsel so wie ich ihn habe jetzt mal zeigen (Bilder werden später ersetzt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">
<head>
<title>Zellen spalten- und zeilenweise zugleich verbinden</title>
<script type="text/javascript">
window.addEvent("domready", function() {
//new Accordion($$(".accordion_toggler"), $$(".accordion_content"));
dp.SyntaxHighlighter.HighlightAll("usage");
new iCarousel("example_4_content", {
idPrevious: "example_4_previous",
idNext: "example_4_next",
idToggle: "undefined",
item: {
klass: "example_4_item",
size: 86
},
animation: {
direction: "top",
duration: 250,
amount: 1
}
});
});
</script>
<style type="text/css">
#example_4 {
position: relative; /* important */
overflow: hidden; /* important */
width: 172px; /* important */
height: 212px; /* important */
background: #000;
}
#example_4_frame {position: relative}
#example_4_frame img {position: absolute;}
#example_4_previous {top: 0; left: 0;}
#example_4_next {top: 192px; left: 0;}
#example_4_content {
position: absolute;
margin-top: 20px;
left: 0;
}
.example_4_item img {
display: block;
float: left;
margin: 5px;
padding: 5px;
border: 1px solid #666;
background-color: #000;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td>Vom eigenen Computer hochladen:</td>
<td><input type="file" name="avatar_upload" class="inputbox" id="avatar_upload" onChange="if(this.value) document.getElementById('avatar_url').value='';"></td>
<th rowspan="3">
</br>
<div id="example_4">
<div id="example_4_content">
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/1.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/2.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/3.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/4.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/5.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/6.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/7.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/8.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/9.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/A.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/B.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/C.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/D.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/E.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/F.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/G.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/H.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/I.jpg" alt="flower 2" /></a>
</div>
<div class="example_4_item">
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/J.jpg" alt="flower 1" /></a>
<a href="#"><img src="http://zendold.lojcomm.com.br/icarousel/images/flowers/K.jpg" alt="flower 2" /></a>
</div>
</div>
<div id="example_4_frame">
<img id="example_4_previous" src="http://zendold.lojcomm.com.br/icarousel/images/ex4_previous.gif" alt="move previous" />
<img id="example_4_next" src="http://zendold.lojcomm.com.br/icarousel/images/ex4_next.gif" alt="move next" />
</div>
</div>
</br>
</th>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
<tr>
<td>Internet-Adresse verwenden:</td>
<td><input type="text" name="userimg" class="inputbox" value="{{portrait}}" id="avatar_url" onChange="if(this.value) document.getElementById('avatar_upload').value='';"></td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
<tr>
<td></td>
<td><input type="submit" value="Speichern" name="edit_again" class="button1" ></td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>
</body>
</html>
Alles anzeigen
Bei mir mag irgentwie der scrolleffeckt, wie auf der seite link oben, nicht funktionieren [Blockierte Grafik: http://www.html.de/images/smilies/icon_sad.gif]
Es were nett, wen ihr mir da helfen könntet [Blockierte Grafik: http://www.html.de/images/smilies/icon_smile.gif] Danke schon mal [Blockierte Grafik: http://www.html.de/images/smilies/icon_smile.gif]
Anhang: Wen es fungtionieren sollte, könnte man dan, wen man auf ein bild klickt, das der bildlink, im 2 inputfeld erscheint, könnte man das auch so machen ? were nett für tips und trix [Blockierte Grafik: http://www.html.de/images/smilies/icon_smile.gif]
html anfänger, js anfänger, css anfänger [Blockierte Grafik: http://www.html.de/images/smilies/icon_smile.gif]