Back to top

Autore Topic: [Risolto] Integrazione manuale Plugin jQuery  (Letto 13458 volte)

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
[Risolto] Integrazione manuale Plugin jQuery
« il: 24 Gen 2013, 15:57:09 »
Allora... come da titolo avrei bisogno di integrare e far funzionare un Plugin jQuery "mosaic slide box ".  Adesso ho scaricato i file sorgenti di questo plugin ed ho posizionato tutto all'interno del mio template, fin qui tutto ok !! Ora però viene la parte piu complicata ovvero non riesco davvero a capire come richiamare il plugin e farlo funzionare... sareste cosi gentili da darmi una mano spiegandomi su quali file devo devo inserire il codice !?

Questo è il plugin in questione  http://buildinternet.com/project/mosaic/

Perdonate la mia inesperienza e sicuramente la mia confusione... :)

joomla2.5
« Ultima modifica: 31 Gen 2013, 02:23:14 da cladif »

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #1 il: 24 Gen 2013, 16:03:04 »
Solitamente devi prima di tutto linkare il plugin nell'head del file index.php del tuo template (su google trovi facilmente come fare), stesso discorso per l'eventuale css associato, poi dovrai inserire, sempre nella stessa pagina, il codice jQuery per settare le funzioni e opzioni del plugin (come fare questo dovresti trovarlo nella documentazione nel sito del produttore del plugin).

Ciao.


GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #2 il: 24 Gen 2013, 16:25:31 »
hahaha la vedo molto complicata la cosa....  :D comunque grazie per la risposta !! provo provo e provo..... alla fine credo che dovro in qualche modo capire e venirne fuori, sono 3 giorni che sbatto con questa cosa !!!! altrimenti è meglio che mi do all'ippica ;D

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #3 il: 24 Gen 2013, 16:38:10 »
All'inizio è un po' complicato capire il funzionamento dei plugin jQuery ma poi vedrai che è più semplice di quanto immagini. Studiati bene la documentazione del plugin stesso e vedrai che inserirlo all'interno del template di Joomla è la stessa cosa che inserirlo in una pagina html qualunque.

Ciao.
GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #4 il: 24 Gen 2013, 21:30:31 »
Gix075 non riesco a trovare un punto di inizio.... mi sto perdendo in un bicchiere d'acqua :-\ mi sapete indicare una guida che spiega come procedere?! ho visto in google ma non riesco a trovare nulla che mi fa capire realmente quello che devo fare ! vi ringrazio......
« Ultima modifica: 24 Gen 2013, 21:32:24 da cladif »

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #5 il: 25 Gen 2013, 06:48:48 »
Allora, io posso darti solo qualche input perché questo no è tanto un argomento per un topic quanto proprio di un tutorial. Comunque dando un'occhiata al codice del file demo del plugin che hai segnalato sembra che tu debba eseguire nell'ordine:
  • Inserire nell'head della pagina il file css del plugin "mosaic.css" (dovresti averlo scaricato)
  • Inserire nell'head della pagina il link alla libreria jQuery (va bene anche quella hostata da google)
  • Inserire nell'head della pagina il link al plugin "mosaic.1.0.1.min.js" (dovresti averlo scaricato)
  • Inserire nell'head lo script per assegnare le funzioni del plugin ai div sui quali vuoi che abbia effetto.
Il codice per il punto 4 puoi copiarlo direttamente dal sorgente della pagina di esempio al link: http://buildinternet.com/project/mosaic/1.0/
Occhio che però in quella pagina lo script prevede praticamente tutti gli effetti possibili.
Io ti riporto un esempio con un solo effetto (non so quale sia l'ho preso a caso dall'esempio)

Codice: [Seleziona]
<script type="text/javascript">
$(document).ready(function($){
$('.cover3').mosaic({
                    animation    :    'slide',    //fade or slide
                    hover_x        :    '400px',    //Horizontal position on hover
                    hover_y        :    '300px'        //Vertical position on hover
                });
});
</script>

Nell'html dovrai poi creare dei div (quelli ai quali vuoi assegnare l'effetto del plugin) assegnandogli la classe "cover3"
Es.
Codice: [Seleziona]
<div class="cover3">Box01</div>
<div class="cover3">Box02</div>
<div class="cover3">Box03</div>

Il principio è questo più o meno. Il mio consiglio è quello di provare ad usare il plugin prima su un file html di prova, poi quando ne hai capito il funzionamento provi ad integrarlo nel template di Joomla.
Studiati anche un po' di jQuery che ti aiuta molto (http://jquery.com/) .

Ciao.
GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #6 il: 25 Gen 2013, 13:20:01 »
Gix075 ti ringrazio tantissimo per la tua disponibilità !!!!

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #7 il: 26 Gen 2013, 22:46:03 »
mi chiedevo una cosa...!!! Ma il procedimento per inserire jquery è lo stesso per tutti i template?e volevo chiedere anche se il codice ve inserito in index.php oppure in index.html !?    ::)
« Ultima modifica: 26 Gen 2013, 23:57:07 da cladif »

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #8 il: 27 Gen 2013, 08:03:29 »
I link e lo script vanno inseriti nel file index.php e il procedimento è più o meno sempre lo stesso per ogni template ... in teoria.  Dico in teoria perché a volte si possono generare conflitti tra script diversi e librerie diverse o cumunque devi saper adattare gli script alle classi che hai nel template e quelle di moduli ed estensioni varie. Calcola che Joomla usa Mootools come libreria javascript e con jQuery spesso si creano problemi ma ci sono soluzioni anche a questo. Usare javascript in generale non è poi così difficile, soprattutto i plugin jQuery, ma se non hai un minimo di infarinatura sui concetti base, ti sarà comunque difficile capire bene come procedere. Per questo ti ho consigliato di studiare un po' di jQuery in quanto è da lì che poi capisci come usare al meglio un plugin.
Comunque se hai ancora problemi chiedi pure e vedrai che ne veniamo a capo. Se tu avessi dei link da mostrare sarebbe più semplice per me darti una mano.

Ciao.
GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #9 il: 27 Gen 2013, 12:06:20 »
ciao Gix075 ! sto seguendo i tuoi consigli... in effetti comprendere il funzionamento di jquery aiuta infatti ho fatto qualche piccolo passo adesso riesco ad ottenere il plugin sul mio sito anche se in maniera disordinata, praticamente ancora non sono riuscito a farlo funzionare però diciamo che già questo mi fa pensare che sono sulla strada giusta... la pratica poi farà il resto....
Adesso quello che mi chiedo è come inserire questo plugin in K2 praticamente deve funzionare solo nella schermata degli articoli di apertura, quindi suppongo che i <div class="cover3">Box01</div> vanno nell' html di com_k2 giusto?
Scusa se approfitto della tua disponibiltà!

dimenticavo... il sito è ancora in locale non posso postare un link.
« Ultima modifica: 27 Gen 2013, 12:19:30 da cladif »

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #10 il: 27 Gen 2013, 12:25:16 »
Allora, se lo inserisci nel file index.php del template, per quanto non serva, sia le librerie che lo script verranno sempre caricati e questo non è bene se non ti serve.
La cosa migliore da fare è inserire il tutto in un override di k2 se è solo lì che ti serve. Vai a questo link e scaricati il pacchetto per ovverride della tua versione di k2.
http://getk2.org/documentation/tutorials/item/77-k2-template-override-package-comparison
Poi fammi capire bene per schermata iniziale cosa intendi se una categoria o i featured o altro così andiamo per gradi.

Ciao
GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #11 il: 27 Gen 2013, 13:06:25 »
Praticamente tutti gli articoli del sito sono gestiti interamente da k2 in questo modo... 

Pagina presentazione articoli "che poi sarebbero annunci" clicchi sulla foto ed entri nell'articolo completo.

 :D l'illustrazione grafica mi sembrava il modo piu efficace per farti capire di che cosa ho bisogno...



Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #12 il: 27 Gen 2013, 15:04:30 »
Allora, io proverei questa strada. Attenzione perché stiamo andando un po' alla cieca, quindi prima di tutto parliamo di ovveride, così non facciamo danni a K2.
Quindi, se già non l'hai fatto,
  • Crea una cartella "js" all'interno della quale inserirai i file del plugin, sia il .js che il .css.
  • Crea una cartella di nome "html" all'interno della cartella del tuo template. All'interno della cartella html ci copi tutta la cartella "com_k2" quella che trovi nel pacchetto che ti ho consigliato di scricare nella risposta precedente.
  • Nella cartella  com_k2 apri i file default/category_item.php e default/category.php
Nel file category_item.php dovrai semplicemente (alla linea 19)  inserire la classe "cover3" nel div del singolo articolo.
Codice: [Seleziona]
<div class="catItemView cover3 group<?php ... 
Nel file category.php invece il lavoro è un po' più lungo. Alla riga 12 (mi raccomando inserisci tutto tra defined('_JEXEC') or die; e ?>) inserisci le seguenti righe:

Codice: [Seleziona]
$pluginScript = "$.noConflict();
jQuery(document).ready(function($) {
$('.cover3').mosaic({
                    animation    :    'slide',    //fade or slide
                    hover_x        :    '400px',    //Horizontal position on hover
                    hover_y        :    '300px'        //Vertical position on hover
                });
});
";
JFactory::getDocument()->addStyleSheet("templates/yourtemplatename/js/mosaic.css");
JFactory::getDocument()->addScript("//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js");
JFactory::getDocument()->addScript("templates/yourtemplatename/js/mosaic.1.0.1.min.js");
JFactory::getDocument()->addScriptDeclaration($pluginScript);

Controlla bene queste ultime quattro righe perchè ci sono i link ai file .css e .js
Assicurati che siano corretti.

Non è detto che facendo questo tutto funzioni a dovere. Bisognerà fare qualche prova e aggiustamenti di css perché magari lo stile di K2 non si sposa con quello del plugin o magari c'è altro (anche qualche mio errore dato che non ho potuto fare prove). Fammi sapere.
GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #13 il: 28 Gen 2013, 12:14:15 »
Ciao Gix075 !! ho eseguito tutti i passaggi che mi hai detto controllato i link ecc... ma non funziona!
Ho attivato anche "css override" da gestione template 
nella cartella js del mio plugin ci sono due file il primo è mosaic.1.0.1.min.js e il secondo mosaic.1.0.1.js questo in che modo va inserito?
Scusa se sto facendo diventare pazzo anche te.... ;D   
« Ultima modifica: 28 Gen 2013, 12:45:44 da cladif »

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #14 il: 28 Gen 2013, 12:29:05 »
Allora, io ho scaricato il pacchetto e controllato la cartella js ma non ci ho trovato altro che i file .js e non .php
C'è però una cosa, che è un mio errore ed è il link alla versione 1.9 di jQuery. Prova a sostituire quella riga con questa:
Codice: [Seleziona]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>che è poi la versione che usano loro sul file di demo che trovi nel pacchetto download. Prova e vediamo se è questo il problema.

Ciao
GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #15 il: 28 Gen 2013, 12:45:04 »
scusa ho sbagliato io...... i due file sono .js non php :P cavolo ho dormito poco... si vede.

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #16 il: 28 Gen 2013, 12:46:51 »
ho gia provato!! ma il risultato è lo stesso il plugin non appare prorio sul mio sito

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #17 il: 28 Gen 2013, 13:26:30 »
Senti ma quando vai sulla pagina di k2 e guardi il codice della pagina, li vedi i riferimenti al plugin? Se li provi portano a dei file?
GildoGiuliani.eu Visual Producer

Offline cladif

  • Nuovo arrivato
  • *
  • Post: 46
  • Sesso: Maschio
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #18 il: 28 Gen 2013, 14:05:45 »
I riferimenti al plugin nel codice di k2 ci sono..
testandoli nel modo in cui avevi detto tu non portano a nessun file..
                                                    ("/templates/my_template/js/mosaic.1.0.1.min.js");
aggiungendo    ("http://localhost/templates/my_template/js/mosaic.1.0.1.min.js"); mi conduce al file (anche se non so se in questo modo è corretto!!)  ma il plugin non funziona ugualmente.
« Ultima modifica: 28 Gen 2013, 14:18:22 da cladif »

Offline Gix075

  • Appassionato
  • ***
  • Post: 258
  • Sesso: Maschio
  • Etiam si omnes Ego non!
    • Mostra profilo
Re:Integrazione manuale Plugin jQuery
« Risposta #19 il: 28 Gen 2013, 14:21:17 »
Ok , nel mio post, scusa che non l'ho specificato, "my_template" stava a significare il nome del tuo template, quindi devi cambiarlo. Ho usato quello in quanto non potevo conoscere il nome del tuo template. Prova a cambiarlo.

Ciao.
GildoGiuliani.eu Visual Producer

 



Web Design Bolzano Kreatif