WebSite X5Help Center

 
Enrico -
Enrico -
User

Come implementare uno slider wowSlider, AmazingSlider, Flexslider responsive  it

Autor: Enrico -
Visitado 2453, Seguidores 3, Compartilhado 0  

Come posso implementare su WSX5 uno slider responsive (FlexSlider, Wowslider, AmazingSlider), in modo che lo slider appaia come un'intestazione della pagina, dove abbiamo il menù sopra ed il contenuto della pagina subito sotto?

Publicado em
8 RESPOSTAS - 2 ÚTEIS - 1 CORRIGIR
Enrico -
Enrico -
User
Autor

In questa guida spiegherò come implementare su WSX5 uno slider responsive (FlexSlider, Wowslider, AmazingSlider), in modo che lo slider appaia come un'intestazione della pagina, dove abbiamo il menù sopra ed il contenuto della pagina subito sotto.

ps. con questa guida il menu apparirà sovrapposto allo slider in alto, quindi se la sovrapposizione non vi piacesse basta che modifichiate le foto per avere uno spazio tra il bordo alto della foto e l'inizio dell'immagine (vedi foto allegata).

1. In una nuova pagina del sito che chiameremo (ad es.) slide e che imposteremo come nascosta nel menu del sito, inseriamo i codici forniti dai programmi WowSlider o AmazingSlider, nei rispettivi campi (solitamente un primo codice nel campo Prima della chiusura del tag Head ed un secondo Dopo l'apertura del Tag Body, poi bisogna aggiungere i relativi file dello slider);

2. Nella pagina dove vogliamo che appaia lo slider inseriamo questi codici nei rispettivi campi:

--> Proprieta Pagina | Sezione Esperto | 3^selezione: Prima della chiusura del tag HEAD

<style>
#imContent{
   top: -100px;
}
</style>

<style> #div_iframe {position:absolute;top:0px;width:100%; z-index:2} </style>
<script>function h_iframeK(){
var ww =1399; // larghezza immagini;
var hh =738; // 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>

--> Proprieta Pagina | Sezione Esperto | 5^selezione: Dopo l'apertura del tag BODY 

<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="200" 
src="http://www.miosito.it/slide.html
scrolling="no" frameborder="no"> </iframe> </div> 

Ovviamente vanno modificate le dimensioni nel primo codice (numeri in grassetto) dove va inserita la risoluzione delle immagini del vostro slideshow (solitamente dovreste avere immagini con risoluzioni uguali). Lo stesso va fatto con il secondo codice dove va inserito l'indirizzo del vostro sito web.

Qui potete trovare un precedente post di una variante di questa implementazione (però non responsive):

https://helpcenter.websitex5.com/pt/post/135566

Ringrazio i gentilissimi KolAsim e Mirko che mi hanno aiutato a risolvere questo problema.

Ler mais
Publicado em de Enrico -
Giancarlo B.
Giancarlo B.
User

Grazie Enrico F. per avere condiviso le info .

Ler mais
Publicado em de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... condivido, ... ... e certamente grazie e ben accetto al di fuori dell'assistenza qualsiasi contributo condivisione con la Comunity, (lo spirito: avere=dare|dare*avere)wink ... ...
... per chi volesse provare il codice senza nessun impegno, potrebbe utilizzare l'URL diretto alla DEMO di Maximage, (v.Mirko):
http://www.aaronvanderzwan.en/maximage/examples/basic.html
... immagini in rapporto 4:3 (1400x1050), ma permette qualsiasi personalizzazione del rapporto, essendo le immagini sempre centrate, l'ideale...
... immagini con la parte importante centrata sulla linea orizzontale sarebbero quelle più adatte; ...ovviamente, la realizzazione dello slideshow indipendente dalle pafine del progetto sarebbe da preferire e semplificherebbe uleriormente...
... nel codice riportato nel post di apertura, l'ultimo rilevamento dinamico nel JS [document.getElementById('imHeader')***] potrebbe non servire a seconda del tipo di intestazione e di menu utilizzato nel progetto, e quindi da valutare...

_________________

ps: ... sarebbe utile anche riportare appresso i link di lemonsong/stesil e Mirko, utilissimi per scopi simili, in quanto essendo stato chiuso il topic di origine ne sono andati persi i riferimenti, in modo che questo Argomento, ed a memoria, possa essere indicato/linkato/valutato e ad esempio per tutti...

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Enrico -
Enrico -
User
Autor

Assolutamente KolAsim (ho lasciato aperto questo topic apposta perchè sapevo che mi sarei dimenticato qualcosa).

Innanzitutto a questi link potete trovare altri esempi pratici si Mirko che fanno lo stesso lavoro:

http://www.mirboprova.altervista.org/wowslider12/

http://www.mirboprova.altervista.org/wowslider12Pro-scroll/

Mentre qui (grazie a Lemonsong) alcuni suggerimenti ed altre utilizzi da Quelludelcucuzzolo:

http://quellidelcucuzzolo.blogspot.it/2016/07/template-tamarillo-website-x5-12.html#bc_0_11M

http://quellidelcucuzzolo.blogspot.it/2015/04/template-composite-website-x5-11.html#bc_0_70M

Ler mais
Publicado em de Enrico -
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...  Risultati immagini per pollice in su ... 

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Enrico -
Enrico -
User
Autor

Mi è venuto in mente un questito però..

Ho notato che quando carica la pagina le foto dello slide (in quanto più pesanti) si caricano dopo il caricamento del resto della pagina e durante il lasso di tempo in cui le immagini dello slideshow non ci sono, il resto della pagina (che nel frattempo è già stata scaricata) si sovrappone al menu (allegato).

E' possibile "bloccare" quella finestra iframe subito al caricamento della pagina così che appaia bianca finchè non si è caricato lo slider (insomma che ci siano già le distanze giuse)?

Grazie

Ler mais
Publicado em de Enrico -
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... non usare immagini PNG, sei volte più pesanti del JPG, ed anche queste meglio se molto leggere, e comunque di peso possibilmente inferiore ai 300 KB , e prova anche ad assegnare un altezza maggiore all'intestazione...

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Enrico -
Enrico -
User
Autor

Ottimo, alleggerendo un po' le immagini e mettendo l'intestazione a 50px si risolve. Grazie mille ancora ;)

Ler mais
Publicado em de Enrico -