• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Der gewünschte effeckt, mag bei mir nicht klappen

S

SpamXmapS

Neues Mitglied
Ich möchte gleich sagen, ich bin kein Profi :)

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 :( 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 ^^ ):

Code: 
<!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>
Bei mir mag irgentwie der scrolleffeckt, wie auf der seite link oben, nicht funktionieren :(

Es were nett, wen ihr mir da helfen könntet :) Danke schon mal :)

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 :)
html anfänger, js anfänger, css anfänger :)
 
Werbung:
Ich habe es herrausgefunden
smile.gif
es fehlten noch andere bestimmte js
smile.gif


nun habe ich aber noch eine frage und zwar, wie bekomme ich das hin, das wen ich auf ein bild klicke, der bildlink in einer inputbox erscheint ?
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben