Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : invasion888 05 Dec 2012, 20:50:45
-
Forse un qualche plugin? o qualsiasi cosa?
Mi spiego meglio, voglio qualcosa come questa: http://davidwalsh.name/demo/fx-smoothscroll.php (http://davidwalsh.name/demo/fx-smoothscroll.php) dove al click del menu ... ecc fa uno scrool alla posizione del contenuto....
Nel mio caso volevo qualcosa che al click del menu top cambiava pagina con scrool (orizzontale e verticale) spostandosi per esempio dalla home a chi siamo o altra pagina statica o meno.....
Sinceramente non ho mai visto applicazioni di questo tipo dedicate a joomla, ma sarebbero interessanti e accattivanti.
Mi interesserebbero se esistono anche altri tipi di effetti in js (x es fade) per spostarsi da pagina a pagina.
Grazie Ragazzi. :)
-
quoto la domanda di invasion888.. mi piacerebbe ottenere qualcosa del genere..
sapete se nel frattempo qualcuno ha sviluppato estensioni e/o template con questo genere di effetto?
es. http://unfold.no/ (http://unfold.no/)
in rete si trovano molti esempi di scroll con jquery e simili, ma si parla di spostarsi all'interno della stessa pagina, e non in pagine diverse.
grazie
-
ciao
o scrolli o campi pagina.
ora di pronto non credo che ci sia nulla ma se hai un po di fantasia e conosci un po il php e ccs con il metodo ancore fai tutto e non ti serve nessun js.
questo lo fatto io e de joomla.
qui (http://www.contiwebsolution.com/)
-
Ovvio che si può ;)
Ma ogni effetto si fa in modo diverso; non so dirvi di plugin che lo facciano, ma il mio modo preferito di operare è direttamente via codice, perché garantisce la leggerezza ed efficienza massime;
in particolare quello che hai indicato (smoothscroll) è un plugin jQuery, che utilizzo correntemente in uno dei miei siti:
http://globalmountain.it/index.php/chi-siamo-contatti (http://globalmountain.it/index.php/chi-siamo-contatti)
Come potete vedere al click sul nome di una delle Guide Alpine, si attiva l'effetto...
Vediamo come fare:
1 - Se il vostro template già non la utilizza, occorre integrare la libreria jQuery e la chiamata al noConflict mode, per evitare conflitti con altri effetti nel sito
<!-- Libreria jQuery, jQueryUi e chiamata noConflict -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$.noConflict();
// Il codice che usa la variabile $ di altre librerie può essere messo qui...
</script>
Queste righe vanno messe nella pagina index.php del template che usate, all'interno dei tag <head> e </head>.
Con questo codice integro la libreria dal servizio hosting di google libraries, così evito di averne una copia locale.
La seconda riga carica jQueryUi (per smoothscroll non serve, potete anche non metterla);
2 - Dalla pagina gitHub ufficiale del progetto (https://github.com/kswedberg/jquery-smooth-scroll (https://github.com/kswedberg/jquery-smooth-scroll)) scarico il pacchetto Zip, lo estraggo, prendo il file che mi interessa ovvero "jquery.smooth-scroll.js", e lo modifico per il noConflict mode (si sostituisce in tutto il file il carattere "$" con la stringa "jQuery");
in alternativa prendetelo dal mio sito che è già modificato:
http://globalmountain.it/media/scrollto/jquery.smooth-scroll.js (http://globalmountain.it/media/scrollto/jquery.smooth-scroll.js)
(click col tasto destro -> salva con nome)
Dopodiché ne fate l'upload sul vostro sito, non importa dove, quello che importa è solo che sappiate dove lo mettete (propongo una sottocartella del template che usate, magari chiamatela "js");
3 - anche questo file va integrato tra i tag <head> e </head> della pagina index.php del vostro template, ma assolutamente DOPO la chiamata di jQuery e noConflict:
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
ovviamente va messa col percorso relativo rispetto all'index.php, per cui se non avete messo il file dentro la sottocartella "js" del template, dovete cambiare di conseguenza il percorso;
4 - SmootScroll va attivato con queste righe, che vanno messe immediatamente sotto le precedenti:
<!-- Attivazione smoothscroll -->
<script>
jQuery(document).ready(function() {
jQuery('a.smoothscroll').smoothScroll();
});
</script>
5 - Fatto questo il plugin è attivo; esso agisce sui link HTML <a href=...
Il link deve recare la classe "smoothscroll" e nell'attributo href un ID CSS di un blocco della pagina;
Faccio l'esempio per chiarire riferendomi alla pagina del mio sito che ho linkato sopra:
Ho una barra in cima che contiene i link con i nomi delle Guide fatta così:
(queste parti di codice vanno invece inserite nella pagina, cioé ad esempio in un articolo utilizzando l'editor di joomla in modalità codice (per poter inserire dell'HTML))
<a class="smoothscroll" href="#port358">Adriano</a>
<a class="smoothscroll" href="#port378">Daniele</a>
<a class="smoothscroll" href="#port377">Silvio</a>
Questo crea i link, ovviamente se cliccati non fanno nulla a meno che il plugin non trovi nella pagina dei blocchi con gli ID indicati; nella pagina ho dei DIV che racchiudono ognuno le informazioni di ogni Guida:
<div id="port358">Adriano .... </div>
<div id="port378">Daniele .... </div>
<div id="port377">Silvio.... </div>
E' tutto; cmq questo effetto NON naviga tra le pagine, bensì tra diversi blocchi della stessa pagina
-
Magari sono un po' all'antica ma all'atto pratico questo smoothscroll a cosa serve? Un file js da caricare solo per vedere lo scroll della pagina muoversi invece di arrivare di colpo?
Comunque, per spostarti tra le varie pagine io suggerirei AJAX...nel mentre fa la richiesta della pagina basta fargli fare qualche effettino sul box.
Ci sono varie possibilità di implementare AJAX, e dipendono dalle tue capacità o dal progetto che stai facendo. Spesse volte ho utilizzato Mootools, ma puoi utilizzare jQuery o altri framework JS.
In realtà qua non si usa PHP perchè non c'è nè bisogno.
-
L'effetto può piacere o non piacere, ma se uno lo vuole, gli dico come fare ad averlo ;)
In ogni caso smoothscroll richiede un file da 6,68 Kb, una cosa ridicola che non influisce certo sulle prestazioni della pagina...
-
alla faccia del codice x fare un scrol .
io lo fatto usando i le sole ancore e un una riga di mootols x fare l'effetto allo scrol.
-
Beh, se leggi vedi che anche con jQuery viene fatto con praticamente una sola riga... Ho spiegato tutto il procedimento nel dettaglio anche per integrare le librerie etc... Pure mootools ha bisogno di essere integrata; poi lo fai magari senza un js esterno, ma mootools è parecchio più pesante ;)
-
ma visto che joomla a gia in se mootools xche non usarlo.
-
E' giusto, però dovresti anche indicare come fare per ottenere lo stesso effetto...
Sennò non ci fanno niente...
-
Grazie a tutti per le risposte!
in effetti avevo valutato un paio di soluzioni, tra cui chiamate ajax per sostituire il contenuto della pagina (che voleva dire però mettere pesantemente mano - seppur sovrascrivendolo nel template - alla parte di menu), e l'utilizzo dell'effetto solo su alcune pagine del sito (come i contatti mostrati nell'esempio sopra)
Alla fine avevo optato per: mostrare tutti gli articoli che mi interessano in home page (con la classica vista "elementi in evidenza di tutte le categorie") e creare un menu fittizio con delle ancore..
Sinceramente dopo alcune prove ho rinunciato, non tanto per la complessità, quanto perchè ho intravisto troppi vincoli strutturali e personalizzazioni al sito, e (anche se non sono un "purista") preferisco lasciare il più standard possibile (se ci fosse stato ad esempio un plugin sarebbe bastato disattivarlo per ritornare alla versione "pulita").
Grazie a tutti, specialmente a Cereal___killer (userò sicuramente il tuo tutorial in altri progetti) ;)
-
Di estensioni per joomla con quell'effetto ho visto che ce ne sono, ma non gratuite;
sono gratuite solo quelle che ti aggiungono una singola ancora sulle pagine per ritornare in cima (il cosiddetto scroll to top)...