Full srceen slider
Author: Grazvydas S.
Visited 7120,
Followers 5,
Shared 0
It would be nice to implement Full sreen width slider (example like WOW SLIDER or JSSOR or to VSX5 V13)
it will definetelly improove visual view of sites.
Hope and other can support this idea and push it to developers.
Posted on the
Yes i think that is a good idea
Yes, I support this idea.
Hello, these are some sites made by me with Website 12 and 13 and with the addition of a little external code to implement the slides of Wowslider. You can study their code.
Professional 13: http://www.ggweb70.altervista.org/prove13pro02/
Evolution 12/Pro 12: http://www.ggweb70.altervista.org/danceshoes02/
The functionality is already there is just a matter of will from the devs, I have another post asking the same, all we need in this case is to be able to add multiple images to gackground or (best case scenario) to be able to add custom HMTL as the row background, in the program we can already put one image, video or color as a full width background.
here please check, share and support my post:
https://helpcenter.websitex5.com/en/post/155958
Giuseppe Guida,
I have visited link you have given. Amazing. It's open the door of my imaginations.
Can you please tell us how did you do this?
Can you please explain us. Your help would be very usefull for many of us.
many thanks
Vedad
At this link there's a tutorial that you can follow, but it is in Italian language:
http://giancafoto.altervista.org/wowslider-v13-iframe/
It's very easy to implement Wowslider with iframe in Website x5 by following that tutorial.
Excuse me for my english but I'm italian....
It's important the first step to create the slide in WOWSLIDER with a width of 1920 px (important! do not change this value!) and with a choice of height, for example 800 px (as shown in the tutorial), then publish the slide in a folder of your PC with the "Publish" feature in Wowslider and then you have to export all files generated by WOWSLIDER including the two folders "data1" and "engine1" in the root directory of your website ONLINE (IMPORTANT!).
(Then if you want to see a preview of your site with the slide of Wowslider directly on "WEBSITE X5", you have to copy the folders "data1" and "engine1" in the "Preview" folder of your project that can usually be found in the path of the main disk of your computer, a thing typically: C: / documents / Incomedia / Website X5 v13 - Professional / project name / Prewiew.)
So then you can follow the tutorial ...
P.S. the codes that you see in the tutorial you can derive from the same page of the tutorial by pressing CTRL + U keys on the computer keyboard.
however, the code is this
1) code to insert "BEFORE THE END OF TAG HEAD" in Page Properties as explained in the tutorial
<style> #div_iframe {position:absolute;top:100px;width:100%; z-index:1} </style><script>function h_iframeK(){var ww =1920; // larghezza immagini;var hh =800; // altezza immagini;var wdiviframe = document.getElementById('div_iframe').offsetWidth;var hiframe=Math.round(wdiviframe*hh/ww);document.getElementById('iframek').style.height=hiframe +"px";document.getElementById('imHeader').style.height=hiframe +"px";}window.onload = function () {h_iframeK();}window.onresize = function () {h_iframeK();} </script>
(you can change the value marked in bold to get the right positioning of slide in the page.)
2) code to insert "AFTER THE OPENING BODY TAG" in Page Properties(see the photo in the tutorial)
<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="200" src="wowslider.html" scrolling="no" frameborder="no"></iframe></div>
You have all the elements, you just follow the tutorial now.
Ciao ciao
many thanks Giuseppe. Now i can see the picture behind of it.
Ok Sezer, you tell me if you managed to do it.
Bye
Author
Giuseppe thanks for the tutorial, ill try to implement this 3rd party slider, anyway developers should do this in program itself, it will be more easy for other then make extra work with 3rd program.
I believe developers will do in this program version (V13) not for the next year (V14)..
Please Grazvydas S., I hope you can manage to enter the full width slideshow in Website
Author
Dear Giuseppe, your code you in tutorial is with italian words - is it no mater for script code?
Also i noticed that wowslide is in rear of elements which i have in document
Question is how all other elements (text objects, images, gallery and etc) i have in that page to push down?
I explained everything in English in this post. The tutorial is only useful for photos that make you see where you must insert the codes
Excuse me for my english but I'm Italian. More than this it's impossible for me
I back this up. Btw Can we have the slider for top banner only at this time?
Hello, Giuseppe...
Well I'm not having to much luck with WOW Slider and X5 13 Pro. I have followed your tutorial, however my results are less than I would expect. Would you have a look at http://jkbsystems.com/slidertest2/index.html
There are four questions. I must be missing something.
Thanks for your time.--
JamesKB
Sorry..... here are the questions.
Sorry..... here are the questions.
Ok James. Now I'm not at home. Later I'll be at home on my computer and I can check and answer you.
hi you do not need to add the wow slider in an iframe, here's a demo http://www.x5tuts.com/template/movie-v13
I will provide an online tutorial shortly.
HiYa Jamie...
I only want the slider to be full screen width in the Header, not the entire screen. Ideas?
Hello Giuseppe...
The url of the test site should b: http://jkbsystems.com/slidetest2/index.html
My questions appear on the attached image.
Jamie an online video on youtube would be great, you can also keep adding new video's and we will all greatly appreciate your help.
Hi the demo above that we provided is our movie template but the same principle applies no matter what size you want the slider, here's our new apex slider demo http://www.x5tuts.com/test6/ we have had a few requests on this one so I will release a tutorial for this one as well.
Author
Giuseppe,
I managed to put full screen width slider bellow the header and it works,
Like in your website http://www.ggwebdesign.altervista.org/index.html
the only one problem now left is how do set that remain items like text, picture and etc would be bellow the slider?
See attached file what i mean..
Author
James Becker,
try to insert the code below by following the instructions that you see in the picture attached:
<style>
#imHeaderBg, #imHeader, #imMnMnContainer, #imMnMn {position: fixed; top:0; z-index:100;}
</style>
Giuseppe, Thanks for the reply. Your last tip helprd a little bit, but I want the slider at the very TOP ofthe page and the menu UNDER the slider/header. See attached picture.
Hey!
Inserting WOWSlider is easier than that... besides the iframe method sometimes gets in the way of the menu/header if the height margin collides.
As we work this out, we should be calling the attention of X5 devs to allow us to use custom HTML as a row background that way it i'll be even easier... for everybody
Thanks for the reply Luis... What I want/need is for the slider to ontop of the header and also full with of the browser screen.
hi James, try to follow this. Here measures incorporated 960x800, changing get fullscreen
https://www.youtube.com/watch?v=6xDlDG2SF9Q
Sigh... I give up on a full width slider. No matter what I do I can not get the slider to be the full width of the browser window. The test site can be seen here: http://jkbsystems.com/slidetest2/index.html
I guess I'll just have to wait untill X5 14 Pro to get this feature built in. Ideas??
Hi James.
First you have to use photos that are in high resolution (1920 px width), then when you're in WOWSLIDER you must insert these pictures and you have to select the "FULL WIDTH" option in the "SLIDE SIZE" (see the attached picture to better understand ). Only by choosing the "FULL WIDTH" option in Wowslider your slideshow will adapt exactly to the entire width of each screen
Author
Giuseppe
pls could you comment what slider you are using in your page? http://www.ggwebdesign.altervista.org/
I want to implement something like that, becouse wowslider are inserting own logo and is free only for non commercial use..
thank you!
Hello Grazvydas
For that slide I used WOWSLIDER and that effect similar to a page of a book that opens can also be found in the effects of WOWSLIDER free. For the Wowslider logo I have bought the paid version. But there is a way to delete the logo on the FREE version but I can not explain it here, sorry.
I can tell you that you can achieve some good sites even without external slides full width and complicated codes, but with simple pictures + text, as I have done in this example by copying the style of Dresshop template of Incomedia:
http://www.bozzasito10.altervista.org/shopabbigliamento01/
bye
Author
Giuseppe how did you made the menu when scrolled down "partly" transparent? see picture attached
in WSX5 i found only option transparent or color.
Giuseppe... Thanks for the tip.
I'm almost there! Now to figure out how to remove the space where the header displays.
See: http://jkbsystems.com/slidetest2/index.html
In template settings I have put nothing, see attached picture. Ideas??
Thanks for your time.
--
JamesKB
@Grazvydas S.
You must create a small image in an external graphic software (Photoshop, Gimp ecc). An image of few pixels (example: 50 wide and 60 high) and make it semi-transparent, "playing" on alpha channels in external graphic software. Then you must enter this small semi-transparent image exactly as shown in the screenshot attached.
@Grazvydas, you can use this my small image attached to do some tests
VERY IMPORTANT!!!!
in the code generated by WOWSLIDER for HEAD you must always REMOVE this piece of code that you see crossed in red in the picture attached, because it creates problems and conflicts with the WEBSITE X5 code
@James Becker
James, in the STEP 2 of WEBSITE X5, in the "model structure", you probably need to reduce size of HEADER
@James
I refer to HEIGHT of HEADER!
You have an initial HEADER of 180 px height for higher screen resolutions, reduce header, max 60/70 pixels, and the text will go up to the menu
YAHOO!!!! That did the trick Giuseppe.... Thanks for your time.!! :) :)
Not at all James! bye
Author
Dear Moderators, can you ask developers did they planing to implement Full width slider to WSX5 V13 professional program? if not free maybee with paid object option?
Now you created only partly full width website possibility (by adding parallax and extend effect but header, footer is still fixed).
Or it will be a new future in 2016 Q3 (WSX5 V14?)
They are saving it for next year's version for sure, this is like an annual subscription after all.