Lebens- und Trauerhilfe e.V. – Düren
Seit Jahren war Verein ohne eigenen Webauftritt. Die Domäne war auf die Seiten des Bistums Aachen umgelenkt worden. Das sollte sich ändern!
⇒ mehrwie es gemacht wird lesen Sie hier:
Die STYLE-Angaben unten sind natürlich besser in Eurer CSS-Datei aufgehoben. Sie werden nur hier auf dieser Seite im Seiten-Header untergebracht. (Fehlen die Style-Angaben, dann sehen Sie nichts!):
page.headerData.6706 = TEXT
page.headerData.6706.value (
<script type="text/javascript" src="fileadmin/JScripts/zoomple-1.4.js"></script>
<style type="text/css">
/* jQuery zoomple: */
#Previewholder{
left:0;
top:0;
position:absolute;
display:none;
background:#fff;
border:1px solid #DCDCDC;
z-index:1111;
}
#Previewholder img{
display:block;
}
#Previewholder p{
margin:0;
padding:0;
font:11px Verdana,sans-serif;
color:#090808;
}
#Previewholder p span{
border-top:1px solid #ccc;
display:block;
padding:5px;
}
</style>
)
Der Code ist bzgl. der Gridelements-ID anzupassen (hier im echten Fall ist es z.B. die 9):
// Aufbau der TAB-Links und Tab-Beschriftungen der aktuellen Seite
// GRIDElement beschreiben, man achte auf die ID!
tt_content.gridelements_pi1.20.10.setup {
# ID oder ALIAS of gridelement
zoomple < lib.gridelements.defaultGridSetup
zoomple {
columns {
# colPos ID
10 < .default
10.renderObj = COA
10.renderObj {
10 < tt_content.text.10
20 < tt_content.text.20
30 = TEXT
30 {
field = image
split {
# das erste Bild muss das große und das zweite das kleine "sichtbare" Bild sein.
token = ,
cObjNum = 1 |*| 2
1 {
current = 1
wrap = <a href="uploads/pics/|" class="zoomple">
}
2 {
current = 1
noTrimWrap = | <img src="uploads/pics|" |
}
}
}
35 = TEXT
35 {
field = imagewidth
noTrimWrap = | style="width:|px;" |
if {
value = 0
isGreaterThan.field = imagewidth
}
}
# dann noch den ALT-Text korrekt einsetzen, der Trenner ist ein CR (x10)
40 = TEXT
40 {
field = imagecaption
split {
token.char = 10
cObjNum = 1 |*| 2
2 {
current = 1
wrap = alt="|" /> </a>
}
}
}
}
}
wrap (
<div class="zoombar">
<script type="text/javascript">
$(document).ready(function() { $('.zoomple').zoomple({delay:1000}); });
</script>
|
</div>
)
}
}