Vergrößerungsglas-Funktion bei Bildern (Magnifier)

wie es gemacht wird lesen Sie hier:

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

Nach oben

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

 

 

Achtung!!! - Bei TYPO3 V6.2.x muss der 30er Part oben wegen FAL und Referenzierung umgeschrieben werden:

            30=FILES
            30 {
               references {
                  table=tt_content
                  fieldName=image
               }
               renderObj=TEXT
               renderObj {
                  noTrimWrap = |<a href="|" class="zoomple">|  ||  | <img src="|" |
                  data=file:current:publicUrl
               }
            }

 

 

 

 

Nach oben

Screenshot Backend

Screenshot des Rasterelements mit zoombarem Inhalt (Bilder)
Backend-Ansicht

Nach oben

Probieren Sie's aus:

Zoombares Bild

Wenn Sie mit der Maus über das Bild "fahren", dann wird der Bildbereich am Cursor vergrößert dargestellt. Probieren Sie's aus.

alt="Kurti mit 1 Jahr und 4 Monaten" >

»zoomple-1.4.js« zum Herunterladen

zoomple-1.4.js
Das Javascript für den Lupeneffekt
 
1573 Downloads
seit 06.02.14