WebSite X5Help Center

 
Grazvydas S.
Grazvydas S.
User

Full srceen slider  en

Auteur : Grazvydas S.
Visité 7121, Followers 5, Partagé 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.

Posté le
46 RéPONSES - 2 UTILE
Farhad S.
Farhad S.
User

Yes i think that is a good idea

Lire plus
Posté le de Farhad S.
Theresia H.
Theresia H.
User

Yes, I support this idea.

Lire plus
Posté le de Theresia H.
Luis S.
Luis S.
User

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/fr/post/155958

Lire plus
Posté le de Luis S.
V. Sezer
V. Sezer
User

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

Lire plus
Posté le de V. Sezer
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
V. Sezer
V. Sezer
User

many thanks Giuseppe. Now i can see the picture behind of it.

Lire plus
Posté le de V. Sezer
Giuseppe Guida
Giuseppe Guida
User

Ok Sezer, you tell me if you managed to do it.

Bye

Lire plus
Posté le de Giuseppe Guida
Grazvydas S.
Grazvydas S.
User
Auteur

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

Lire plus
Posté le de Grazvydas S.
Giuseppe Guida
Giuseppe Guida
User

Please Grazvydas S., I hope you can manage to enter the full width slideshow in Website

Lire plus
Posté le de Giuseppe Guida
Grazvydas S.
Grazvydas S.
User
Auteur

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?

Lire plus
Posté le de Grazvydas S.
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Excuse me for my english but I'm Italian.  More than this it's impossible for me

Lire plus
Posté le de Giuseppe Guida
Sean B.
Sean B.
User

I back this up. Btw Can we have the slider for top banner only at this time?

Lire plus
Posté le de Sean B.
James Becker
James Becker
User

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

Lire plus
Posté le de James Becker
James Becker
James Becker
User

Sorry.....  here are the questions.

Lire plus
Posté le de James Becker
James Becker
James Becker
User

Sorry.....  here are the questions.

Lire plus
Posté le de James Becker
Giuseppe Guida
Giuseppe Guida
User

Ok James. Now I'm not at home. Later I'll be at home on my computer and I can check and answer you.

Lire plus
Posté le de Giuseppe Guida
James Becker
James Becker
User

HiYa Jamie...

I only want the slider to be full screen width in the Header, not the entire screen. Ideas?

Lire plus
Posté le de James Becker
Sean B.
Sean B.
User

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.

Lire plus
Posté le de Sean B.
Jamie B.
Jamie B.
User

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.

Lire plus
Posté le de Jamie B.
Grazvydas S.
Grazvydas S.
User
Auteur

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

Lire plus
Posté le de Grazvydas S.
Grazvydas S.
Grazvydas S.
User
Auteur
Grazvydas S.
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? at the moment text and others object are at the samle level like slider and its overlaping ea other.. See attached file what i mean..
Lire plus
Posté le de Grazvydas S.
Giuseppe Guida
Giuseppe Guida
User

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>

Lire plus
Posté le de Giuseppe Guida
James Becker
James Becker
User

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.

Lire plus
Posté le de James Becker
Luis S.
Luis S.
User

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 undecided

Lire plus
Posté le de Luis S.
James Becker
James Becker
User

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.

Lire plus
Posté le de James Becker
A. Kris
A. Kris
User
James Becker
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

Lire plus
Posté le de A. Kris
James Becker
James Becker
User

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. frown 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??

Lire plus
Posté le de James Becker
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Grazvydas S.
Grazvydas S.
User
Auteur

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!

Lire plus
Posté le de Grazvydas S.
Giuseppe Guida
Giuseppe Guida
User

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.

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Grazvydas S.
Grazvydas S.
User
Auteur

Giuseppe how did you made the menu when scrolled down "partly" transparent? see picture attached
in WSX5 i found only option transparent or color.

Lire plus
Posté le de Grazvydas S.
James Becker
James Becker
User

Giuseppe... Thanks for the tip.

I'm almost there!   smile   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

Lire plus
Posté le de James Becker
Giuseppe Guida
Giuseppe Guida
User

@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.

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

@Grazvydas, you can use this my small image attached to do some tests

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

@James Becker

James, in the STEP 2 of WEBSITE X5, in the "model structure", you probably need to reduce size of HEADER

Lire plus
Posté le de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

@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

Lire plus
Posté le de Giuseppe Guida
James Becker
James Becker
User

YAHOO!!!! That did the trick Giuseppe.... Thanks for your time.!!  :)  :)

Lire plus
Posté le de James Becker
Giuseppe Guida
Giuseppe Guida
User

Not at all James! wink bye

Lire plus
Posté le de Giuseppe Guida
Grazvydas S.
Grazvydas S.
User
Auteur

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

Lire plus
Posté le de Grazvydas S.
Luis S.
Luis S.
User

They are saving it for next year's version for sure, this is like an annual subscription after all.

Lire plus
Posté le de Luis S.