Implementing background Zoom Effect within WSX5 
Author: Tom G.
Visited 1320,
Followers 1,
Shared 0
Recently I’ve been experimenting with the background zoom effect. I have it implemented in WSX5, having simple page with this effect outside WSX5 and use it as a background.
I have tried to make this “outside” page as one of the pages on WSX5 Map. Couldn’t get it to work…
Looks like it’s a matter of putting pieces of code (of the page with zoom effect) into right place within HTML Code or Expert Tabs.
I know that I cannot count on Incomedia support, since it is non-standard issue, but does anybody from the software users have an idea how to do it?
I’m attaching zipped page with the zoom effect. Just unzip it and run SingleZoom.html to see how it works.
Thank you in advance for any input!
Posted on the
Hello. Here is an example https://magazin.aleksius.com/en/blog/20-css-and-js-adding-to-website-x5 (Insert an external HTML slider to the site – 00:10:13.).
>> img0 = img1 = *** ...
K ... 
...
(It > En) ... .. . .
1) - you don't need this code, so don't put it:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2) - the names are better in lowercase and without blank spaces; ... attach these files to the project (ATTACHMENTS), leaving as a destination the folder with the name "files" already proposed by default:
>> jquery-slider.js | throbber.gif | lighthouse.jpg
... for which the relative path will be:
files/jquery-slider.js | files/throbber.gif | files/lighthouse.jpg
3) - in the EXPERT panel | Custom Code | option> Before closing the tag / HEAD paste the <script> tags, corrected like this:
<script src="files/jquery-slider.js">
>> script >> img0 = img1 = "files/lightHouse.jpg";
... and following the <script> also paste the <style> *** </style> tag with its own content code;
4) - in the EXPERT panel | Custom Code | option> Before closing the tag / BODY paste the two html tags: <div id="throbber"><img src="files/throbber.gif"></div><div id="pan_area" style="height:100%"></div>
... then you will eventually have to check the z-index attribute, and if you need it, set it to "0" or to "1", which you must evaluate ...
...
...!...
.
ciao
.
Author
Thank you Alek and KolAsim! I actually was counting on responses from both of you (knowing the history of your involvements). And I was right!!!
Author
Right now I am trying KolAsim's suggestion.
@KolAsim,
The Zoom Effect works fine, except the page has blank area on top, before the zooming image. How to eliminate it?
(It > En) ... in order to understand and evaluate, I should see the LINK of your online example ...
... alternatively you could solve it more easily with my div_custom + iframe method, very simple ...
.
Author
I tried it on the page I'm working on, its onepiczoom.html. What I want to accomplish is to have the zoom effect page within software and not as the same as the one that comes from the page created outside WSX5 (this one).
... depending on the result you want to obtain, ... in the STYLE tag paste:
#pan_area {position:fixed;top:0px;left:0px ;width:100%;} /** non scroll **/
... or:
#pan_area {position:absolute;top:0px;left:0px ;width:100%;} / ** yes scroll ** /
.
Author
Thanks, both options work!