Javascript-Datei und STYLE einbinden

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>
)

TS-Code fürs Rasterelement

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>
      )
   }
}