Ecco allora questo breve tutorial. In realtà la cosa è proprio semplicissima ed utilizza le proprietà dei css3, ormai ampiamente supportate da tutti i browser moderni.

Niente javascript, jquery, mootools, flash o qualsiasi altro script. Quindi massima leggerezza e compatibilità.

 Si prende una immagine di adeguata dimensione e fattezza e la si incolla in un modulo di tipo html personalizzato. Si pubblica questo modulo in una adeguata posizione del template. Io nel protostar l'ho pubblicata nella posizione debug. Dobbiamo aver cura di inserire l'immagine dentro un div avente una determinata classe a scelta. Io l'ho chiamata apina.Poi la dobbiamo solo formattare con un  paio di regolette css che, se ispezionate il codice con firebug, dovreste scoprire da soli.

Con questa:

div.apina {
  bottom: -210px; <-- la sposto fuori dallo schermo a sinistra
  left: -130px;  <-- la sposto sotto lo  schermo
  position: fixed; <-- la costringo in una posizione assoluta e fissa nel monitor anche allo scrolling
  transform: scale(0.6) rotate(45deg); <--- la riduco al 60 per cento e la piego di 45 gradi
  transition-duration: 0.5s; <-- stabilisco in mezzo secondo il tempo dell'animazione
  z-index: 100; <--- la tengo sopra agli altri elementi nella pagina
}

mentre con questa:

al puntatore del mouse sopra l'immagine avverrà il cambiamento. Vi sarà adesso chiaro che potrete giocare in diversi modi con questi valori per ottenere l'effetto desiderato. Io ho linkato all'immagine un mio sito esterno ma potrete ovviamente linkare anche pagine dello stesso sito, ad esempio per mandare l'utente in una speciale pagina.

Buone animazioni!

Alla prossima.

tonicopi

Beh, la risposta è semplice. Ti basterà copiare il codice che troverai sotto la slideshow, incollarlo in un tuo articolo e cambiare i percorsi, i titoli e le descrizioni delle immagini.

Dovrai però usare il template di default Protostar, o altro che utilizzi lo stesso framework, il bootstrap, che è integrato in Joomla 3.

Io trovo davvero interessanti queste caratteristiche perchè ci permettono di realizzare un bel sito web senza bisogno di installare altre estesnioni, il che vuol dire maggior velocità e. soprattutto, maggior sicurezza.

Gustiamoci adesso queste belle immagini. Volutamente hanno altezza diversa perchè volevo testare il comportamento della slideshow. Esame passato, direi!

Fagiano

Descrizione prima immagine....

Farfalla

Descrizione seconda immagine...

Cigni

Descrizione terza immagine...

Ancora farfalle

Descrizione quarta immagine...

Pesce

Descrizione quinta immagine...

Farfalla e scorpione

Descrizione sesta immagine...

Pappagallo

Descrizione settima immagine...

‹ ›

Ecco qui il codice utilizzato per questa slideshow:

<div id="mySlide" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><img src="/joomla35/images/slide/01.jpg" />
<div class="carousel-caption">
<h4>Fagiano</h4>
<p>Descrizione prima immagine....</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/02.jpg" />
<div class="carousel-caption">
<h4>Farfalla</h4>
<p>Descrizione seconda immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/03.jpg" />
<div class="carousel-caption">
<h4>Cigni</h4>
<p>Descrizione terza immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/04.jpg" />
<div class="carousel-caption">
<h4>Ancora farfalle</h4>
<p>Descrizione quarta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/05.jpg" />
<div class="carousel-caption">
<h4>Pesce</h4>
<p>Descrizione quinta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/06.jpg" />
<div class="carousel-caption">
<h4>Farfalla e scorpione</h4>
<p>Descrizione sesta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/07.jpg" />
<div class="carousel-caption">
<h4>Pappagallo</h4>
<p>Descrizione settima immagine...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#mySlide" data-slide="prev">‹</a> <a class="right carousel-control" href="#mySlide" data-slide="next">›</a></div>

Qui potete vedere le posizioni modulo del template di default di Joomla! 3:  il Protostar.
Sono un articolo ed occupo il 50% dello spazio disponibile. Ma se mancassero moduli nella colonna di destra o di sinistra andrei ad occupare anche quello spazio arrivando al 75%.
Mentre se mancassero moduli in entrambe le colonne occuperei tutto lo spazio disponibile arrivando al 100%.

 +span3 se NO moduli a sinistra+ span3 se NO moduli a destra

Potete vedere qui un esempio della responsività delle immagini inserite normalmente in un vostro qualsiasi articolo. Se restringete il vostro monitor esse si adatteranno automaticamente alla nuova dimensione, anche a quella molto piccola di uno smartphone.

Io trovo decisamente utile questa caratteristica che ci consente di inserire immagini belle grandi nei nostri articoli senza preoccuparci di nient'altro: ci penserà il bootstrap a ridimensionarle a dovere!

Ho scoperto però che le immagini inserite invece negli articoli usando l'apposita funzione dei parametri di Joomla! non assumono questa caratteristica come potete provare qui, dove l'immagine non si adatta alle mutate dimensioni del monitor.

All components are also used in the administrator area of your website. In addition to the ones listed here, there are components in the administrator that do not have direct front end displays, but do help shape your site. The most important ones for most users are

• Media Manager
• Extensions Manager
• Menu Manager
• Global Configuration
• Banners
• Redirect

Media Manager

The media manager component lets you upload and insert images into content throughout your site. Optionally, you can enable the flash uploader which will allow you to to upload multiple images. Help

Extensions Manager

The extensions manager lets you install, update, uninstall and manage all of your extensions. The extensions manager has been extensively redesigned, although the core install and uninstall functionality remains the same as in Joomla! 1.5. Help

Menu Manager

The menu manager lets you create the menus you see displayed on your site. It also allows you to assign modules and template styles to specific menu links. Help

Global Configuration

The global configuration is where the site administrator configures things such as whether search engine friendly urls are enabled, the site meta data (descriptive text used by search engines and indexers) and other functions. For many beginning users simply leaving the settings on default is a good way to begin, although when your site is ready for the public you will want to change the meta data to match its content. Help

Banners

The banners component provides a simple way to display a rotating image in a module and, if you wish to have advertising, a way to track the number of times an image is viewed and clicked. Help

Redirect

The redirect component is used to manage broken links that produce Page Not Found (404) errors. If enabled it will allow you to redirect broken links to specific pages. It can also be used to manage migration related URL changes. Help

This module shows a list of the calendar months containing archived articles. After you have changed the status of an article to archived, this list will be automatically generated. Help