jQuery-Funktion »zoomple« mit Gridelements

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

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

Screenshot Backend

Probieren Sie's aus:

Die Bilder sind im Rasterelement

Das Bild muss hier nicht extra als CE eingetragen werden.

Es wird im Rasterelement unter "Erscheinungsbild" hochgeladen. Wie mit dem Groß-Bild umgegangen wird setzen Sie in den Erweiterungsoptionen des Gridelements fest (siehe Abb. 1)

»zoomple-2.0.js« zum Herunterladen

Download-Objekt 1 bis 1 von 1

zoomple-2.0.js

Datum des Download-Objekts 31.08.19
Kurzbeschreibung:
Ähnliches kann man auch mit der Ext. "magnifier" umsetzen.
102 Downloads
Erstell-Datum des Eintrags 18.06.19
Änderungsdatum des Eintrags 18.06.2019
[… mehr]