[CSS][JavaScript]Text overflow / pętla Opcje

[detreu]

Witam, chciałbym skrócić tekst wyświetlany w pojedyńczym artykule tak aby miescił się w divie. Następnie postawić na końcu 3 kropki i link do calego artykułu wyśietlanego osobno. Prosta sprawa - jest na kazdym blogu. Znalazłem skrypt - http://dotdotdot.frebsite.nl/ ale mam z nim problemy... nie ograniam Javy...

link do strony - http://alienphotography.com/essays/
strona oparta o CMS koken

artykuły są ładowane z pliku:

CODE

<koken:if true="pjax">
<koken:title />
<koken:else>
<koken:include file="layouts/header.html" />
</koken:if>

<div id="main">

<koken:load limit="3">

<koken:variable name="list" value="true" />

<koken:loop>

<article>

<koken:include file="layouts/essay.html" />

</article>

</koken:loop>

<koken:keyboard_scroll element="article" />

<koken:include file="layouts/pagination.html" />

<koken:else>

<koken:note>
No essays found. Create some in Text.
</koken:note>

</koken:load>

</div>

<koken:if true="pjax">
<script>$K.ready();</script>
<koken:else>
<koken:include file="layouts/footer.html" />
</koken:not>

potem ładowany jest:

CODE

<header>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="http://alienphotography.com/public_html/koken/storage/themes/axis/layouts/src/js/jquery.dotdotdot.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#dot3').dotdotdot({
after: 'a.more'
});
</script>
<h1>
<koken:link title="{{ essay.title }}">
{{ essay.title }}
</koken:link>
</h1>
</header>

<div id="wrapper">
<div class="r">
<div class="box after" id="dot3">
{{ essay.content }}
<a href="#" class="more">Read more ?</a>
</div>
</div>

<footer>

<div>

<i class="kicon-clock"></i><koken:time class="publish_date" />    <i class="kicon-link"></i><koken:link>Permalink</koken:link><koken:if true="list"><koken:discussion_count>    <span class="k-discussion-count"><i class="kicon-comment"></i>{{ discussion_count }}</span></koken:discussion_count></koken:if><koken:if true="settings.show_share_link">    <div class="share_content"><i class="kicon-plus"></i><span class="share_button">Share</span><div class="kshare"><input type="text" class="kshare-input" value="{{ essay.url }}" /><ul class="kshare-items"><li><koken:if empty="profile.twitter"><a href="https://twitter.com/intent/tweet?text={{ essay.title url_encode="true" }}&url={{ essay.url url_encode="true" }}" class="share-twitter" title="Share {{ essay.title url_encode="true" }} on Twitter"><koken:else><a href="https://twitter.com/intent/tweet?text={{ essay.title url_encode="true" }}&url={{ essay.url url_encode="true" }}&via={{ profile.twitter }}" class="share-twitter" title="Share {{ essay.title url_encode="true" }} on Twitter"></koken:if><i class="kicon-twitter"></i></a></li><li><a href="https://www.facebook.com/sharer.php?u={{ essay.url url_encode="true" }}" class="share-facebook"><i class="kicon-facebook"></i></a></li><li><a href="http://pinterest.com/pin/create/button/?url={{ essay.url url_encode="true" }}" class="share-pinterest"><i class="kicon-pinterest"></i></a></li><li><a href="http://www.tumblr.com/share/photo?source={{ essay.featured_image.presets.medium_large.url url_encode="true" }}&caption=%3Cp%3E%3Cstrong%3E%3Ca href="{{ essay.url url_encode="true" }}" title="{{ essay.title url_encode="true" }}"%3E{{ essay.title url_encode="true" }}%3C/a%3E%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3E{{ essay.excerpt url_encode="true" }}%3C%2Fp%3E&click_thru={{ essay.url url_encode="true" }}" class="share-tumblr" title="Share {{ essay.title url_encode="true" }} on Tumblr"><i class="kicon-tumblr"></i></a></li><li><a href="https://plus.google.com/share?url={{ essay.url url_encode="true" }}" class="share-google"><i class="kicon-gplus"></i></a></li></ul></div></div></koken:if>

</div>

<koken:topics>
<p id="essay_topics" class="tagscats">
Topic:
<koken:loop separator=", ">
<koken:link title="View {{ album.title }}">
{{ album.title }}
</koken:link>
</koken:loop>
</p>
</koken:topics>

<koken:categories>
<p id="essay_categories" class="tagscats">
Posted in
<koken:loop separator=", ">
<koken:link title="View all {{ labels.essay.plural case='lower' }} in {{ category.title }}">
{{ category.title }}
</koken:link>
</koken:loop>
</p>
</koken:categories>

<koken:tags>
<p id="essay_tags" class="tagscats tags">
<koken:loop separator=" ">
<koken:link title="View all {{ labels.essay.plural case='lower' }} in {{ tag.title }}">
#{{ tag.title }}
</koken:link>
</koken:loop>
</p>
</koken:tags>

</footer>

Wstawiłem skrypt i działa, ale tylko na pierwszym artykule. Próbowałem zmienić id na klase ale wtedy nie działa już w ogóle.
Domyślam się że trzeba zrobić pętle ale nie za bardzo wiem jak.

Uprzejmie proszę o pomoc lub ew wskazanie lepszego rozwiązania. Z góry dziękuję

Ten post edytował detreu 13.12.2013, 18:01:46