[Risolto] Integrazione manuale Plugin jQuery

[cladif]

certo... quello l'ho fatto !! adesso sto pensando che non ne verrò mai fuori da questo problema considera mi sono preso 15 giorni di ferie per finire il mio progetto.... credo che dovro prendermi altri due mesi

[Gix075]

Da cladif ... fiducia, è dai momenti di sconforto e difficoltà che nascono i migliori progressi personali. Anche io ogni giorno sbatto la testa su cose  che non conosco e che mi costringono a studiare e studiare, provare e riprovare ancora. Si impara così. Tornando a noi, prima di tutto devi assicurarti che i link portino a dei file, sia i js che i css una volta visto questo vediamo di andare avanti ... un passo alla volta e sempre se ti va di continuare.

Ciao

[cladif]

Gix075 hai ragione non bisogna mai mollare !!!!  Comunque tornando al discorso ho controllato i link

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

non sono sicuro di aver capito bene... intendi verificare il percorso dei link?! se è cosi il percoso è ok
se invece intendi verificare i link nel browser non portano a nessun file...

(confusion)

[Gix075]

Sì intendo dire che devono essere raggiungibili, ma il percorso però se dici che è ok dovrebbe anche portare ai file però. Prova ad inserire in quello stesso file, fuori dal php, un'immagine e vediamo poi di usare lo stesso modo. Sembrerà strano, ma io in locale non ho mai sviluppato quindi non so se ci sono differenze, ma credo di no. Comunque prova. Dai che ci riusciamo!

Un'altra cosa: dal browser lo script esce fuori nell'head della pagina?

[cladif]

ok!! allora adesso i link sono raggiungibili e restituiscono il file dal browser

localhost/nomesito/templates/nome_template/js/mosaic.css

[Gix075]

Bene, almeno questo è ok, ma deduco che ancora non funzioni, giusto? Ma dal browser esce fuori nell'head della pagina anche lo script?

[cladif]

si Gix... adesso dal browser viene fuori sia "mosaic.css" sia "mosaic.1.0.1.min.js"

allora... ho fatto cosi....


category.php
--------------------------------------------------------------------------------------------------------------------------

$pluginScript = "$.noConflict();
jQuery(document).ready(function($) {
$('.bar2').mosaic({
                    animation    :    'slide'        //fade or slide
                });
});
";
JFactory::getDocument()->addStyleSheet("//localhost/nome_sito/templates/nome_template/js/mosaic.css");
JFactory::getDocument()->addScript("//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js");
JFactory::getDocument()->addScript("//localhost/nome_sito/templates/nome_template/js/mosaic.1.0.1.min.js");
JFactory::getDocument()->addScriptDeclaration($pluginScript);


category_item.php
-----------------------------------------------------------------------------------------------------------------------------
<!-- Start K2 Item Layout -->
<div class="mosaic-block bar2<?php echo ucfirst($this->item->itemGroup);


aggiungendo nei div mosaic-block bar2 sembra che accade qualcosa, infatti dietro alle foto nella pagina adesso appaiono dei box anche se senza nessun effetto.

non sono sicuro che sto facendo bene!

[Gix075]

Ottimo cladif se qualcosa accade vuol dire che siamo sulla strada giusta! Ora se riesci a capire che il plugin funziona si tratta di aggiustare il css. Occhio che alla riga

Codice: [Seleziona]

<div class="mosaic-block bar2<?php echo ucfirst($this->item->itemGroup);
dovresti mettere uno spazio tra "bar2" e "<?php..." altrimenti lo script non trova la classe sulla quale agire  in quanto il nome si unirebbe alla classe che iserisce k2.

Dai che andiamo bene!

Buona giornata.

[cladif]

buongiorno Gix !! ho dato lo spazio ed ho sistemato il .css adesso i box dietro le immagini appaiono in maniera corretta ma resta il fatto che il plugin non funziona... ovvero non riesco a visualizzare nessun effetto.

il file mosaic.1.0.1.js non bisogna usarlo?

[Gix075]

I file mosaic.1.0.1.js e mosaic.1.0.1.min.js in teroria sono lo stesso file, ma uno (il primo) è il file normale che si può anche editare, mentre il secondo (il min.js) è la versione minified, ovvero senza spazi inutili e serve a rendere fruibile un file più leggero. Ho notato che gli sviluppatori usano nel file demo online il .min.js mentre nella demo del pacchetto in download il semplice .js
Prova a linkare l'uno e poi l'altro e vedi se ci sono differenze ma a rigor di logica non dovrebbero esserci, ma non si sa mai.
Per prendere però un punto di riferimento tra noi, almeno ci capiamo, tu stai cercando di ottenere il quarto esempio di questa pagina  http://buildinternet.com/project/mosaic/1.0/ giusto? E il box nero adesso lo vedi dietro?

[cladif]

si esatto il quarto esempio! il box che vedo adesso praticamente mi fa come da background su tutta l'immagine che scompare una volta ridimensionato in base alle misure delle foto.


non riesco davvero a capire dove sto sbagliando.......!!!

[Gix075]

Bene, dando un'occhiata al codice demo, credo sia necessario ora costruire la parte html che subirà l'effetto del plugin. Fino ad ora ci siamo occupati del div padre ma forse bisogna replicare la struttura che gli hanno dato loro,  ovvero questa:

Codice: [Seleziona]

<div class="mosaic-block bar2">
            <a href="http://www.nonsensesociety.com/2010/12/i-am-not-human-portraits/" target="_blank" class="mosaic-overlay">
                <div class="details">
                    <h4>I Am Not Human - Unique Self Portraits</h4><br/>
                    <p>via the Nonsense Society (photo credit: Dan Deroches)</p>
                </div>
            </a>
            <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/desroches.jpg"/></div>
        </div>
Devi farti un bel po' di lavoro di ovveride, nel file category_item.php, cercando di prendere dati da k2 e inserendoli in questa struttura.
Ti faccio un esempio:
questa riga

Codice: [Seleziona]

<div class="details">
      <h4>I Am Not Human - Unique Self Portraits</h4><br/>
      <p>via the Nonsense Society (photo credit: Dan Deroches)</p>
</div>
la ottieni così, facendoci comparire il titolo del post

Codice: [Seleziona]

<div class="details">
      <h4><?php if ($this->item->params->get('catItemTitleLinked')): ?>
            <a href="<?php echo $this->item->link; ?>">
              <?php echo $this->item->title; ?>
          </a>
          <?php else: ?>
          <?php echo $this->item->title; ?>
          <?php endif; ?></h4><br/>
      <p>via the Nonsense Society (photo credit: Dan Deroches)</p>
</div>

Questo lavoro è un po' lungo ma dovrai comunque farlo. Se non ti è chiaro qualcosa ovviamente chiedi.

[cladif]

Giusto un paio di cose voglio chiederti!! 

Questo lavoro va fatto per tutti gli articoli presenti nelle categorie giusto?
Posso usare le immagini gia caricate in k2 oppure devo fare una cartella contenente tutte le immagini e linkarle poi nei div?
Ultima cosa  quando inserisco i div come da esempio il titolo e crditi appaiono sopra l'immagine e non dentro con il plugin come dovrebbe essere e questo mi fa pensare che ci sia qualche cosa di sbagliato.

<div class="details">
      <h4>I Am Not Human - Unique Self Portraits</h4>

      <p>via the Nonsense Society (photo credit: Dan Deroches)</p>
</div>

cmq Gix mi devi far sapere di dove sei che ti lascio una cena pagata !! ti sto stressando cosi tanto !!

[Gix075]

No, lo devi fare una sola volta, nel file category_item.php
Praticamente è il file category.php che esegue il ciclo nelle categorie e richiama gli item "impaginandoli" attraverso il file category_item.php (che funge come sorta di template per il singolo item).
Il file category.php è quello che determina la comparsa dei blocchi titolo di categorie e sottocategorie, la divisione in articoli principali e secondari, il numero di colonne ecc... mentre il file  category_item.php si occupa del singolo articolo richiamato all'interno della visualizzazione della categoria. Spero di essermi spiegato bene, che spesso sono troppo contorto quando scrivo di queste cose.

Per la cena figurati ... anzi, mi hai fatto conoscere questo plugin che prima  o poi userò. Quello che mi dispiace è non avere il tempo in questi giorni di metterci le mani e provare questa integrazione con K2.
Comuque sono di Perugia.

Ciao

[cladif]

Ciao Gix075 !!! dopo ore e ore di prove alla fine sono riuscito ad ottenere qualcosa... adesso riesco a visualizzare il plugin in funzione sul sito..... hahah ma i problemi per me non sono finiti...!!! Adesso quello che non capisco è come assegnare il plugin ad ogni foto presente sulla pagina.. perchè quello che ottengo ora è la stessa foto con le stesse descrizione su tutti gli articoli del sito.. questo sicuramente perche non ho capito bene il concetto di override nel .php
spero di essermi spiegato!

questo è il mio .php sicuramente sbagliato....

Codice: [Seleziona]

<?php
/**
 * @version        $Id: category_item.php 1689 2012-10-05 15:18:57Z lefteris.kavadas $
 * @package        K2
 * @author        JoomlaWorks http://www.joomlaworks.gr
 * @copyright    Copyright (c) 2006 - 2011 JoomlaWorks, a business unit of Nuevvo Webware Ltd. All rights reserved.
 * @license        GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
 */
// no direct access
defined('_JEXEC') or die;
// Define default image size (do not change)
K2HelperUtilities::setDefaultImage($this->item, 'itemlist', $this->params);
?>
<!-- Start K2 Item Layout -->
<div class="mosaic-block bar2 <?php echo ucfirst($this->item->itemGroup); ?><?php echo ($this->item->featured) ? ' catItemIsFeatured' : ''; ?><?php if($this->item->params->get('pageclass_sfx')) echo ' '.$this->item->params->get('pageclass_sfx'); ?>">

<body>     
      <div class="mosaic-block bar2">
            <a href="http://www.nonsensesociety.com/2010/12/i-am-not-human-portraits/" target="_blank" class="mosaic-overlay">
                <div class="details">
                    <h4>I Am Not Human - Unique Self Portraits</h4>[br /]
                    <p>via the Nonsense Society (photo credit: Dan Deroches)</p>
                </div>
            [/url]
            <div class="mosaic-backdrop"></div>
        </div>

</body>     
     

questo div carica le immagini attraverso un link " <img src="http:// ecc..." se io volessi usare quelle già caricate in k2 assegnando soltanto l'ID dell'articolo dove il plugin deve agire .. cosa devo fare?

[Gix075]

Ti compaiono sempre le stesse in quanto tu ora non hai un file che fa riferimento ai post di K2 ma hai del codice "di prova". Il fatto che le immagini compaiano più volte è dovuto al fatto che il file category.php richiama il file category_item.php tante volte quanti sono i post di K2 per quella categoria.
Ora che però sei riuscito a caricare il plugin, devi completare l'override adattando la struttura html necessaria al plugin con i dati provenienti da K2.
Se guardi il file originale category_item.php ciò che richiama i dati relativi al titolo del post sono le righe che vanno dalla 35 alla 64, l'immagine dalla 113 alla 123, l'introtext dalla 125 alla 130. Quindi non devi far altro che prendere i pezzi che ti servono ed infilarli dentro la struttura html che hai fatto. Quella che nel codice che hai postato sta dentro ai tag body (che devono scomparire).
Spero di essermi spiegato, altrimenti chiedi liberamente.

Ciao

[cladif]

ho capito probabilmente perchè ho avuto tutte queste difficoltà ad installare il plugin.... praticamente io ho integrato il plugin su una nuova installazione di joomla.. giusto per evitare casini !!! infatti non ho avuto grossi problemi a farlo funzionare  ma adesso sto provando ad inserirlo nel mio sito attuale e non funziona !!!!  adesso mi chiedo...  anche se si usa il no conflict potrebbe essere che cè qualche altro plugin che disturba e non permette il funzionamento?

comunque a parte questo problemino che cerco di risolvere.. credo di aver capito adesso il funzionamento


questo è il codice che sto usando..

Codice: [Seleziona]

!-- Start K2 Item Layout -->
<div class="catItemView group <?php echo ucfirst($this->item->itemGroup); ?><?php echo ($this->item->featured) ? ' catItemIsFeatured' : ''; ?><?php if($this->item->params->get('pageclass_sfx')) echo ' '.$this->item->params->get('pageclass_sfx'); ?>">
     
      <div class="mosaic-block bar2">
            <a href="http://www.nonsensesociety.com/2010/12/i-am-not-human-portraits/" target="_blank" class="mosaic-overlay">
                <div class="details">
        <?php if($this->item->params->get('catItemTitle')): ?>
            <a href="<?php echo $this->item->link; ?>">
              <?php echo $this->item->title; ?>
          </a>
          <?php else: ?>
          <?php echo $this->item->title; ?>
          <?php endif; ?>
                </div>
            </a>
            <div class="catItemImageBlock">
          <span class="catItemImage">
            <a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
                <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
            </a>
          </span>
          <div class="clr"></div>

        </div>     

[Gix075]

Certo che può essere, perchè infatti non mi copi quello che sta dentro l'head della pagina quando fai visualizza sorgente da Firefox, così vediamo come stanno le cose?

[cladif]

credo sia un problema mio... praticamente sto notando che il plugin non funziona solo con una categoria con le altre va bene... strana questa cosa !!!  comunque adesso provo prima a reimpostare tutte le categorie e sotto categorie e veiamo cosa succede..

aaa certo ho capito... non funziona in quella categoria perche cè un plugin  jquery "slider immagini"

[cladif]

ci sono finalmete !!!!!  era ora... tutto funziona bene tranne l'ultima cosa... cosi poi posso mettere risolto nel titolo del post.

Non riesco ad inserire il testo introduttivo, ho provato in tutti i modi ma non vuole apparire! le immagini e i ltitoli vanno bene cmq questo è il codice che uso non so se potrebbe esserci qualche cosa di sbagliato..

Codice: [Seleziona]

<!-- Start K2 Item Layout -->
<div class="catItemView group<?php echo ucfirst($this->item->itemGroup); ?><?php echo ($this->item->featured) ? ' catItemIsFeatured' : ''; ?><?php if($this->item->params->get('pageclass_sfx')) echo ' '.$this->item->params->get('pageclass_sfx'); ?>">
         <div class="mosaic-block bar2">
            <a target="_blank" class="mosaic-overlay">
                <div class="details">
        <?php if($this->item->params->get('catItemTitle')): ?>
            <a href="<?php echo $this->item->link; ?>">
              <?php echo $this->item->title; ?>
          </a>
          <?php else: ?>
          <?php echo $this->item->title; ?>
          <?php endif; ?>
                </div>
            </a>
         <div class="catItemImageBlock">
          <span class="catItemImage">
            <a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
                <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
            </a>
          </span>
         <div class="clr"></div>
            </a>
        <?php if($this->item->params->get('catItemIntroText')): ?>
         <div class="catItemIntroText">
          <?php echo $this->item->introtext; ?>
             </div>
        <?php endif; ?>
    </div>