Mootools
Eingetragen von witzel (163)am 24.10.2007 - 12:57 Uhr in
Hat jemand von euch schon mal mootools in Drupal benutzt? Was haltet ihr davon?
Ich würde gerne diesen "Fisheye"-Effekt benutzen. Dazu gibt es eine Anleitung unter:
http://zend.lojcomm.com.br/ifisheye/#
Da meine Programmierkenntnisse noch in den Kinderschuhen stecken macht mir die Umsetzung mit Drupal Schwierigkeiten und ich möchte euch um Hilfe bitten. Ich habe bisher folgendes gemacht:
Ich habe die benötigten scripte in den head meiner page.tpl.php gepackt:
<script type="text/javascript" src="<?php print drupal_get_path('theme','zen') . '/js/mootools.js'; ?>"></script>
<script type="text/javascript" src="<?php print drupal_get_path('theme','zen') . '/js/iFishEye.js'; ?>"></script>War das richtig?
In welcher Datei muss ich die fisheye-class definieren?
new iFishEye(); und wo muss ich die anderen angegebenen scripte reinschreiben?
new iFishEye({
container: $("iFishEye_example_1"),
norm: "L2"
});
new iFishEye({
container: $("iFishEye_example_2"),
targetImageClass: ".iFishEyeImg_2",
targetCaptionClass: ".iFishEyeCaption_2",
useAxis: 'y',
norm: "L2"
});
new iFishEye({
container: $("iFishEye_example_3"),
targetImageClass: ".iFishEyeImg_3",
targetCaptionClass: ".iFishEyeCaption_3",
useAxis: "both",
norm: "L2"
}); das hier kommt ja wahrscheilich einfach in den Body:
<h3>display: inline, vertical-align: top, caption: bottom</h3>
<div id="iFishEye_example_1">
<table>
<tr>
<td><a href="#"><img class="iFishEyeImg" src="images/home.png" alt="home" /><br /><span class="iFishEyeCaption">Home</span></a></td>
<td><a href="#"><img class="iFishEyeImg" src="images/orders.png" alt="orders" /><br /><span class="iFishEyeCaption">To do</span></a></td>
<td><a href="#"><img class="iFishEyeImg" src="images/tools.png" alt="tools" /><br /><span class="iFishEyeCaption">Tools</span></a></td>
<td><a href="#"><img class="iFishEyeImg" src="images/stats.png" alt="stats" /><br /><span class="iFishEyeCaption">Stats</span></a></td>
<td><a href="#"><img class="iFishEyeImg" src="images/users.png" alt="users" /><br /><span class="iFishEyeCaption">Users</span></a></td>
<td><a href="#"><img class="iFishEyeImg" src="images/sync.png" alt="sync" /><br /><span class="iFishEyeCaption">Sync</span></a></td>
</tr>
</table>
</div>
<br />
<h3>display: block, caption: bottom</h3>
<div id="iFishEye_example_2">
<ul>
<li><a href="#"><img class="iFishEyeImg_2" src="images/home.png" /><br /><span class="iFishEyeCaption_2">Home</span></a></li>
<li><a href="#"><img class="iFishEyeImg_2" src="images/orders.png" /><br /><span class="iFishEyeCaption_2">To do</span></a></li>
<li><a href="#"><img class="iFishEyeImg_2" src="images/tools.png" /><br /><span class="iFishEyeCaption_2">Tools</span></a></li>
<li><a href="#"><img class="iFishEyeImg_2" src="images/stats.png" /><br /><span class="iFishEyeCaption_2">Stats</span></a></li>
<li><a href="#"><img class="iFishEyeImg_2" src="images/users.png" /><br /><span class="iFishEyeCaption_2">Users</span></a></li>
<li><a href="#"><img class="iFishEyeImg_2" src="images/sync.png" /><br /><span class="iFishEyeCaption_2">Sync</span></a></li>
</ul>
</div>
<br />
<h3>display: matrix, caption: {first-line: top, second-line: bottom}</h3>
<div id="iFishEye_example_3">
<table>
<tr>
<td><a href="#"><span class="iFishEyeCaption_3">Home</span><br /><img class="iFishEyeImg_3" src="images/home.png" /></a></td>
<td><a href="#"><span class="iFishEyeCaption_3">To do</span><br /><img class="iFishEyeImg_3" src="images/orders.png" /></a></td>
<td><a href="#"><span class="iFishEyeCaption_3">Tools</span><br /><img class="iFishEyeImg_3" src="images/tools.png" /></a></td>
<td><a href="#"><span class="iFishEyeCaption_3">Stats</span><br /><img class="iFishEyeImg_3" src="images/stats.png" /></a></td>
<td><a href="#"><span class="iFishEyeCaption_3">Users</span><br /><img class="iFishEyeImg_3" src="images/users.png" /></a></td>
<td><a href="#"><span class="iFishEyeCaption_3">Sync</span><br /><img class="iFishEyeImg_3" src="images/sync.png" /></a></td>
</tr>
<tr>
<td><a href="#"><img class="iFishEyeImg_3" src="images/home.png" /><br /><span class="iFishEyeCaption_3">Home</span></a></td>
<td><a href="#"><img class="iFishEyeImg_3" src="images/orders.png" /><br /><span class="iFishEyeCaption_3">To do</span></a></td>
<td><a href="#"><img class="iFishEyeImg_3" src="images/tools.png" /><br /><span class="iFishEyeCaption_3">Tools</span></a></td>
<td><a href="#"><img class="iFishEyeImg_3" src="images/stats.png" /><br /><span class="iFishEyeCaption_3">Stats</span></a></td>
<td><a href="#"><img class="iFishEyeImg_3" src="images/users.png" /><br /><span class="iFishEyeCaption_3">Users</span></a></td>
<td><a href="#"><img class="iFishEyeImg_3" src="images/sync.png" /><br /><span class="iFishEyeCaption_3">Sync</span></a></td>
</tr>
</table>
</div> Vielen Dank für eure Hilfe.
- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 6 Tagen 19 Stunden
vor 1 Woche 1 Stunde
vor 1 Woche 1 Stunde
vor 1 Woche 2 Stunden
vor 1 Woche 8 Stunden
vor 1 Woche 21 Stunden
vor 1 Woche 1 Tag
vor 1 Woche 2 Tagen
vor 1 Woche 3 Tagen
vor 1 Woche 5 Tagen