Du benötigst eigentlich nur die 2. Zeile mit dem JS Code "okzoom.js"!

Dazu den einzeiligen Code unter den Eigenschaften der Seite (wo du den Zoom einbinden willst) in den Head kopieren!

Dann auf der Seite in einem HTML-OBjekt den anderen Quelltext Code kopieren!  Allerdings besserst du den LINK zum Bild aus und zwar so, dass das Bild z.B:  Bild1.jpg und im Ordner "bilder" liegt!

<img id="example" src="bilder/bild1.jpg" width="860">

Dann wechselst du auf den Reiter "Erweitert" und unten bei Hinzufügen bindest du das Bild in den Ordner "bilder" mit dem NAmen "bild1.jpg" ein.  Den Bildnamen kannst du natürlich selbst wählen musst aber diesen dann im Code abändern.

In der vorschau geht es nicht, nur Online!   Sieh hier...  LINK

Anleitung:

1) Die ZIP-Datei herunterladen und auf der Festplatte extrahieren, dann die Datei okzoom.js per FTP-Fenster in WebSite X5 auf den eigenen Webspace hochladen, siehe Screenshot unten

2) Bei diesem Code die 2. Zeile an die eigene Webadresse mit der Datei okzoom.js anpassen ...

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
     <script src='https://www.zella.de/code/js/okzoom.js'></script>

... so dass es nachher so ähnlich (wie bei meiner Testseite) aussieht ...

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
     <script src='http://finde-links.de/test123-beautyblog/okzoom.js'></script>

... dann die beide Zeilen bei WebSite X5 unter ...

3 Sitemap

... die Seite mit dem Bild-Lupe-Funktion markieren, oben auf "Eigenschaften" klicken, dann Reiter "Erweitert" anklicken und die beiden Zeilen einfügen bei ...

---- WebSite x5 - Reiter "Erweitert" -----

Benutzerdefinierter Code:

Vor dem </HEAD>-Tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src='http://finde-links.de/test123-beautyblog/okzoom.js'></script>

-----

3) Auf der Seite wo das Bild mit der Lupefunktion erscheinen soll, wird ein HTML-Objekt ins Raster gezogen und dieser Code eingefügt ...

----- WebSite X5 - HTML-Objekt -----

<center>
<img id="example" src="http://finde-links.de/test123-beautyblog/images/large-1822474.jpg" width="860">
</center>
<script>
$(function(){
$("#logo").okzoom({

});
$('#example').okzoom({
width: 200,
height: 200,
border: "3px solid #666",
shadow: "0 0 5px #666"
});
});
</script>

-----

... allerdings muss die Bildadresse an die eigenen Bilder angepasst werden.

Tipp zur Ermittlung der Bildadresse:

Wird zuerst ein Bild-Objekt ins Raster gezogen und die Seite ins Internet exportiert wird, dann ist das Bild auf dem Webspace und es kann im Browser über Rechtsklick und "Grafikadresse kopieren" die benötigte Bildadresse in die Zwischenablage kopiert werden.

Danach geht man wieder zu WebSite X5 und dem HTML-Objekt, hier kann dann im Code die eigene Bildadresse eingefügt werden.

Meine Testseite >>http://finde-links.de/test123-beautyblog/lupe-zoom.html

----- Screenshots -----

-----

-----

Musste feststellen, dass nicht alle Bilder mit der Lupe vergrößert werden, große Bilder wurden mit der Lupe sogar verkleinert und wenn mehrere Bilder auf einer Seite sein soll, dann muss hier ...

----- Ausschnitt aus dem Code im HTML-Objekt -----

<img id="example3" ...

...

$('#example3').okzoom({

...

-----

... die id unterschiedlich sein, z.B. eine Zahl anhängen, sonst gibt es Fehler bei der Anzeige.

Meine Testseite >> http://finde-links.de/test123-beautyblog/lupe-zoom.html (mit 3 Bildern)

2 Möglichkeiten die Bildadressen zu ermitteln:

A) Oben im Post habe ich diesen ...

-----

Tipp zur Ermittlung der Bildadresse:

Wird zuerst ein Bild-Objekt ins Raster gezogen und die Seite ins Internet exportiert wird, dann ist das Bild auf dem Webspace und es kann im Browser über Rechtsklick und "Grafikadresse kopieren" die benötigte Bildadresse in die Zwischenablage kopiert werden.

Danach geht man wieder zu WebSite X5 und dem HTML-Objekt, hier kann dann im Code die eigene Bildadresse eingefügt werden.

-----

... gegeben, weil ich schon geahnt habe, dass es Probleme geben könnte.

B) Man kann aber auch bei Firefox über das Menü ...

>> Extras > Seiteninformationen / Medien

... die Bilder sehen und die Bilderadressen ermitteln.

----- Screenshot -----