Galleria di immagini effetto slideshow a tutto schermo come sfondo

[dario85]

Salve, vorrei sapere se è possibile realizzare con joomla un sito che abbia un index contenente una galleria di immagini effetto slideshow a tutto schermo come sfondo.


Grazie mille.

[giovi]

ciao dario, tempo fa realizzai una cosa del genere ma non ebbi il coraggio di pubblicarla su joomla.it per paura di generare incompatibilità ecc... quindi chissà dov'è finita... ma è uscita una cosa stupenda e posso senz'altro darti della dritte su come ottenerla.


Ho utilizzato jquery con il plugin supersized inseriti direttamente nel template, in cui ho specificato una path in modo che le immagini provenienti da una cartella fissa venissero riprodotte sullo sfondo come una galleria. E' un effetto molto gravevole ma è difficile accostare i colori del sito alle varie tonalità delle tante immagini

[giusebos]

Giovi ci dai più info che una cosa interessa anche a me. le immagini possono essere rese coerenti con i colori del sito, semmai il problema è quello se uno volesse abbinare più di una galleria....

Questo tipo di visualizzazione viene utilizzata molto nel mondo dell'arredamento, lo utilizzano sopratutto le aziende che producono cucine:
stosa.it
chateau-dax.it
snaidero.it
effequattro.it
oikoscucine.it

e tante a tante altre come diceva "scippatore di emozioni"

Ho provato varie volte di riprodurre quel "sistema" con joomla ma senza successo.

[giovi]

dovrei avere il materiale da qualche parte ma sicuramente farò prima a ricreare tutto da zero. Con quali metodi hai già provato?
Personalmente ho trovato più diffucoltà a trovare le immagini giuste che vadano bene per ogni risoluzione del sito che incollare quattro righe in un template di joomla


ad ogni modo è possibilissimo inserire più gallerie scegliendo di creare un diverso stile per ogni template in cui modifichi solo la variabile "source" delle immagini!

[giusebos]

avevo riutilizzato pezzi di codice da vari tutorial, ma ho fatto fiasco. Avevo anche cercato qualche template in html da trasformare, ma non ho trovato niente, così mi sono arreso.

[giovi]

iniziate col buttare all'interno dell'head del template questo codice

Codice: [Seleziona]

      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/supersized.css" type="text/css" media="screen" />
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/supersized.3.1.3.min.js"></script>
      <script type="text/javascript"> 
         
         jQuery(function($){
            $.supersized({
           
               //Functionality
               slideshow               :   1,      //Slideshow on/off
               autoplay            :   1,      //Slideshow starts playing automatically
               start_slide             :   1,      //Start slide (0 is random)
               random               :    1,      //Randomize slide order (Ignores start slide)
               slide_interval          :   3000,   //Length between transitions
               transition              :   1,       //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
               transition_speed      :   500,   //Speed of transition
               new_window            :   1,      //Image links open in new window/tab
               pause_hover             :   0,      //Pause slideshow on hover
               keyboard_nav            :   0,      //Keyboard navigation on/off
               performance            :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
               image_protect         :   1,      //Disables image dragging and right click with Javascript
               image_path            :   '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/', //Default image path


               //Size & Position
               min_width              :   0,      //Min width allowed (in pixels)
               min_height              :   0,      //Min height allowed (in pixels)
               vertical_center         :   1,      //Vertically center background
               horizontal_center       :   1,      //Horizontally center background
               fit_portrait            :   1,      //Portrait images will not exceed browser height
               fit_landscape         :   0,      //Landscape images will not exceed browser width
               
               //Components
               navigation              :   0,      //Slideshow controls on/off
               thumbnail_navigation    :   0,      //Thumbnail navigation
               slide_counter           :   0,      //Display slide numbers
               slide_captions          :   0,      //Slide caption (Pull from "title" in slides array)
               slides                :     [      //Slideshow Images
                                          {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}, 
                                          {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}, 
                                          {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'} 
                                    ]
                                   
            });
          });
         
      </script>

i file a cui fa riferimento il codice sono quelli in allegato

[allegato eliminato da un amministratore essendo vecchio più di un anno]

[giovi]

nel tentativo di riesumare il vecchio lavoro ho creato qualcosa di interessante:  http://forum.joomla.it/index.php?topic=160611.0;topicseen

[corradomino]

ciao,

stavo cercando info proprio su questo argomento e allora visto che sono arrivato qua ho copiato il codice che hai postato sopra e incollato in index.php e tutto funziona regolarmente, ma devo dire che stavo lavorando in locale, visto poi che a trasferire in remoto non ci sono riuscito nonostante tanti tentativi, mi sono messo a fare da capo tutto il lavoro direttamente in remoto quindi ho copiato il tuo codice in index.php remoto e caricato il file ma non funziona. mi spiego meglio:

una precisazione. Ho operato nello stesso modo in cui avevo operato in locale quindi sono partito da joomla appena istallato, ho caricato un mio template e poi inserito la slide ma non funzione

cos'altro devo fare?

Grazie
Corrado

[giovi]

ciao corrado, se non puoi pubblicare un link al sito non mi è possibile aiutarti. ad ogni modo puoi provare il template modello funzionante che ho linkato sopra e partire da li per creare tutto il resto!

[corradomino]

allora il site è

http://www.bandalivigno.it

provo anche a caricare il template, però preferivo non cambiare template

ciao
Corrado

[giovi]

intanto comincia ad eliminare uno dei due richiami a jquery, l'hai incluso due volte (una volta localmente una da google api)

[corradomino]

ho ho tolto quello di google api.
intanto ho fatto un confronto tra le cartelle remote e locali, magari ho dimenticato qualche file ma niente, tutto regolare
.

[giovi]

ho ho tolto quello di google api.

Non è vero, osserva tu stesso:

Codice: [Seleziona]

<script type="text/javascript">if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>
      <link rel="stylesheet" href="/templates/senzatitolo/css/supersized.css" type="text/css" media="screen" />
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script type="text/javascript" src="/templates/senzatitolo/js/supersized.3.1.3.min.js"></script>

[corradomino]

tolto

[VeronicaB]

Io ti consiglio semplicemente di scaricarti la template Phoca_Bild e istallarti il relativo componente. Fa si che lo sfondo diventi una gallery.

[giovi]

Io ti consiglio semplicemente di scaricarti la template Phoca_Bild e istallarti il relativo componente. Fa si che lo sfondo diventi una gallery.
----------------------------------------------------
Non si tratta di un componente vero e proprio ma di un'altro template come quello già suggerito

[VeronicaB]

Non ho letto tuta la conversazione ma ti assicuro che la template è collegata al componente Phoca gallery. nelle impostazioni della template ti chiede di scegliere quale categoria della gallery vuoi inserire insieme a tutti i paramentri per la slideshow. Il sito non risulta per niente pesante. Poi tutto dipende da che immagine ci metti.

[giovi]

è un'ottima alternativa ma rimane pur sempre un template il template precedente permette di prelevare foto anche da flickr, da una cartella personalizzata,ecc... ma resta sempre il punto che si tratta di un template.

Se riesco provo a pubblicare un plugin che fa lo stesso, sono solo un pò arrugginito quindi mi ci vorrà del tempo.. appena ho notizie ti fo sapere!