CONTENT SLIDER 3
RESPONSIVE
Progetto FREE
In esecuzione ALTERNATIVA 1In questo progetto focalizzeremo la nostra attenzione sul solo Content Slider.
Questo oggetto tanto utile ma che di responsive non ha nulla , così come viene fornito non serve a niente se non ad amplificare un taglio netto di immagini a risoluzioni device mobili.
E' possibile intervenire in molti modi compreso un adattamento vicino o prossimo al responsive.
In questo tutorial siamo andati oltre l'adattamento grafico. Partendo da una base metodica postata dal moderatore kolasim, è stato raggiunto un risultato del 100% in responsive con l'aggiunta di istruzioni If-Else.. Si tratta solo di prendere e inserire immagini giuste in rapporto al ridimensionamento.
PROGETTO:
Difficoltà:
- Nulla per un utente avanzato
- Media per un utente alle prime armi come smanettone
- Alta per un neofita.
SEI PRONTO? OK! Segui le istruzioni passo passo. Hai 2 alternative. Scegli quella che fa al caso tuo.
ALTERNATIVA 1
PREPARAZIONE DEI BREAK POINT:
- VAI AL PASSO 2 - MODELLO - ICONA RESPONSIVE DESIGN
. - Realizza una struttura come nell'immagine seguente (devi avere una versione X5PRO per farlo)
OBBLIGATORIA SE VUOI SFRUTTARE QUESTO ESEMPIO ) ►►► SCARICA IL LAYOUT PRE-FORMATTATO
CREA ORA LA TUA PAGINA TEST (PASSO 3 ► NUOVA PAGINA)
INSERISCI NEL PROGETTO UN CONTENT SLIDER 
NELLE OPZIONI DELL'OGGETTO INSERITO METTI UN TITOLO , UNA DESCRIZIONE E UN PULSANTE CONTATTI (che punterà alla vostra pagina contatti).
NELLE OPZIONI DEL CONTENT SLIDER METTI UN OWERLAY DI SFONDO AL 40%; Percentuale che potrà variare in base alle preferenze personali.
LASCIA DI DEFAULT LE IMPOSTAZIONI TITOLO,DESCRIZIONE E PULSANTE. Le misure vengono raccolte nel codice.
SETTA LA DIMENSIONE DELLO SLIDER A 700PX COME ALTEZZA E LASCIA 50% COME IMMAGINE
INSERISCI DUE IMMAGINI DA 1920 X 700PX
(per provare puoi utilizzare le immagini dell'esempio scaricandole dalla posizione corrente con tasto dx e poi salva immagine)
VAI AL PASSO 3 MAPPA, SELEZIONA LA TUA PAGINA TEST E FAI CLICK IN ALTO SU PROPRIETÀ
VAI SU ESPERTO E POI SU CODICE - PRIMA DELLA CHIUSURA DEL TAG HEAD E INSERISCI IL LISTATO DI CODICE CHE SEGUE: ATTENZIONE IN NERETTO TI HO LASCIATO L'ID CHE ANDRÀ SOSTITUITO CON QUELLO TUO CHE DOVRAI ACQUISIRE TRAMITE ISPEZIONE CODICE DAL BROWSER CHROME.
CODICE - PRIMA DELLA CHIUSURA DEL TAG HEAD | ||
<script> $(document).ready(function () { /** --- resize ratio x WSx5 ContenSlider by KolAsim Modificato da Max--- **/ ritardoK = 2; // secondi di ritardo; wK = 1920; // larghezza immagine (valore pixel (o rapporto razionale W)); hK = 720; // altezza immagine (valore pixel (o rapporto razionale H)); setTimeout(function () { //K1>; ridimensionaK(); }, ritardoK * 200); //K1<<; }); //K<<; $(window).on('resize', ridimensionaK); //Kr > | << //---------------f K2----------------------------- function ridimensionaK() { //K2>; setTimeout(function () { //K3>; wwK = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; ratio = Math.round(wwK / wK * 100) / 100; CShK = hK * ratio; $("#imPageRow_1,#imCell_9, #imCell_9 div").css('max-height', CShK); $("#imStickyBar_imObjectImage_02_container img").css({ "width": "35vW", "max-width": "210px" }); // x LOGO; // Controlli specifici per larghezza finestra if (wwK <= 600) { $(".content-slider.slide-txt-block-content.slide-animated-content.slide-title").css("font-size", "4.5vw"); $(".content-slider.slide-txt-block-content.slide-animated-content.slide-description").css("font-size", "3.8vw"); } else if (wwK <= 720) { $(".content-slider.slide-txt-block-content.slide-animated-content.slide-title").css("font-size", "3.9vw"); $(".content-slider.slide-txt-block-content.slide-animated-content.slide-description").css("font-size", "3.4vw"); } else if (wwK <= 960) { $(".content-slider.slide-txt-block-content.slide-animated-content.slide-title").css("font-size", "4.5vw"); $(".content-slider.slide-txt-block-content.slide-animated-content.slide-description").css("font-size", "3.5vw"); } else if (wwK <= 1149) { $(".content-slider.slide-txt-block-content.slide-animated-content.slide-title").css("font-size", "4.6vw"); $(".content-slider.slide-txt-block-content.slide-animated-content.slide-description").css("font-size", "2.8vw"); } else { $(".content-slider.slide-txt-block-content.slide-animated-content.slide-title").css("font-size", "3vw"); $(".content-slider.slide-txt-block-content.slide-animated-content.slide-description").css("font-size", "2vw"); } }, 0); //K3<<; } //K2<<; </script> |
SALVA TUTTO
PROVA IL CONTENT SLIDER SIMULANDO IL RESTRINGIMENTO DEL BROWSER SIA IN ANTEPRIMA CHE SU UNO DEI BROWSER CHE IL SOFTWARE METTE A DISPOSIZIONE.
SE TUTTO E' ANDATO BENE DOVRESTE AVER CREATO UN CONTENT SLIDER RESPONSIVE COME QUELLO CHE VEDETE RAPPRESENTATO SU QUESTA PAGINA.
LE VARIABILI DA MODIFICARE IN BASE ALL'ALTEZZA SUL LISTATO DEL CODICE SONO:
wK = 1920; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 720; // altezza immagine (valore pixel (o rapporto razionale H));
Quindi se l'immagine è 1920x800 la variabile hk diventerà 800
TUTORIAL TERMINATO
ALTERNATIVA 2
Applicando il listato del moderatore Kolasim non sarà indispensabile avere dei break-point specifici. Basterà seguire tutti i restanti passaggi partendo dalla creazione di una pagina TEST e inserire quest'altro codice al posto di quello elencato superiormente che è questo.▼
in neretto gli id da cambiare con i vostri che troverete con ispeziona codice dal browser chrome.
CODICE - PRIMA DELLA CHIUSURA DEL TAG HEAD | ||
<script> $( document ).ready(function() {// K>; /** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/ ritardoK = 2; // secondi di ritardo; wK = 1920; // larghezza immagine (valore pixel (o rapporto razionale W)); hK = 720; // altezza immagine (valore pixel (o rapporto razionale H)); setTimeout(function(){//K1>; ridimensionaK(); }, ritardoK * 300); //K1<<; }); //K<<; $(window).on('resize', ridimensionaK);//Kr > | << //---------------f K2----------------------------- function ridimensionaK() {//K2>; setTimeout(function(){ //K3>; wwK= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; ratio=Math.round(wwK/wK*100)/100; CShK=hK*ratio; $("#imPageRow_1,#imCell_9, #imCell_9 div").css('max-height', CShK); $(".slide-title").css("font-size","5vW"); // x TITOLO $(".slide-description").css("font-size","2vW"); // x DESCRIZIONE; $("#imStickyBar_imObjectImage_02_container img").css("width","35vW") ; // x LOGO; $("#imStickyBar_imObjectImage_02_container img").css("max-width","210px") ; // x LOGO; }, 0); //K3<<; } //K2<<; </script> |
COMMENTA ▼
Non sono presenti ancora recensioni.