Slide per immagini

In rete si trovano molti script per fare delle gallerie di immagini: gli slide. Tra i tanti che ho provato, quello che trovo più semplice, a mio giudizio, è questo che vi presento.

Naturalmente utilizza dei javascript che servono per dare degli effetti particolari.
Perché funzioni correttamente, quindi, c'è bisogno di avere questi script, che vanno inseriti nella pagina.

Per il sito spiegato in queste pagine, che è in PHP, gli script sono su file a parte con estensione .js e si trovano in una cartella dedicata; perciò sono richiamati nel file config.php che abbiamo già analizzato in "struttura".

La sintassi per richiamare i javascript per questo slide, è la seguente:

box 001

prima della chiusura del tag </head>

<!--START - js e css per lo slide-->

<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/custom.js"></script>
<script type="text/javascript" src="jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="jquery/fancybox_params.js"></script>

il css dedicato:

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.style.css" media="screen" />

questo piccolo script va inserito di seguito nella stessa pagina :

<script type="text/javascript">
$(document).ready(function() {
$(
"a.group").fancybox();
});

</script>

<!--END slide-->

I javascript per questo tipo di slide sono diversi, tra cui una libreria, ma per fortuna, in questo caso, a noi non serve conoscere il javascript perché non vanno modificati.

La stringa di codice per questo slide con le tre immagini che vedete sotto, è la seguente:

box 002
 

sintassi

<!--TABLE con ID dedicato allo slide - essendo un ID può essere scritto solo volta per pagina -->
<table id="wrap">
<tr>
<td>
<a class="group" rel="group" title="Calla" href="images/Dcalla.png">
<img src="images/thumbs/Dcalla.png" title="Calla" alt="Calla" border="0" width="150" height="150" /></a>
</td><!--chiusura e apertura celle TD perché siano affiancate-->
<td>
<a class="group" rel="group" title="Camelia" href="images/Dcamelia.png">
<img src="images/thumbs/Dcamelia.png" title="Camelia" alt="Camelia" border="0" width="150" height="150" /></a>
</td><!--chiusura e apertura celle TD perché siano affiancate-->
<td>
<a class="group" rel="group" title="Calla" href="images/DfioriCampo.png">
<img src="images/thumbs/DfioriCampo.png" title="Fiori di campo" alt="Fiori di campo" border="0" width="150" height="150" /></a>
</td><!--chiusura cella TD-->
</tr><!--chiusura riga TR-->
</table><!--chiusura tabella -->

come potete vedere le righe sono uguali a coppia, cambia solo il nome dell'immagine (ed eventualmente il percorso).

per una maggiore chiarezza, analizziamo le due righe che servono per lo slide.

box 003
 

analisi della stringa

riga 1 - richiamo dell'immagine grande
codicedescrizione - iconamodificabile | iconaopzionale | iconanon toccare e/o obbligatorio
<a class="group" icona apertura del tag "a" con assegnata la classe "group"
rel="group" icona attributo "rel" (tipo di relazione instaurata tra la risorsa attuale e quella linkata) con assegnata la stessa classe "group" del tag "a".
title="Calla" attributo "title", qui si scrive la didascalia che compare sotto l'immagine ingrandita, in questo caso "Calla"icona
href="images/Dcalla.png"> attributo "href" con assegnata l'immagine e il percorso per l'immagine grande, in questo caso: "images/Dcalla.png", dove
  • "images" la cartellaicona
  • "Dcalla.png" l'immagineicona
riga 2 - visualizzazione della miniatura nella pagina
codicedescrizione - iconamodificabile | iconaopzionale | iconanon toccare e/o obbligatorio
<img src="images/thumbs/Dcalla.png" tag "img" con attributo "src" e il percorso della miniatura:
  • "images" cartella,icona
  • "thumbs" sottocartella dentro "images",icona
  • "Dcalla.png" la miniatura,icona
nota: la miniatura ha lo stesso nome dell'immagine grande perché si trova in una cartella diversa, è preferibile usare lo stesso nome per non fare confusione, mettendo le miniature in una sottocartella
title="Calla" attributo "title" - icona - serve per alcuni browser per avere un nome da dare all'immagine
alt="Calla" attributo "alt" - iconaOBBLIGATORIO - se manca, il validatore da errore, può essere anche vuoto: "", oppure con il nome da dare all'immagine: "Calla"
border="0" /> attributo "border" - iconaOBBLIGATORIO - se viene omesso, il validatore da errore, Questo attributo serve per assegnare o meno un bordo alla miniatura: se "0" significa nessun bordo, se "1" significa un bordo spesso 1 pixel, se "2" bordo di 2 pixel, e via di seguito;
chiusura del tag "img", essendo un tag che non ha un proprio tag di chiusura come ad esempio <a>.... </a>, si chiude con uno spazio e una slash "/" e con il simbolo di maggiore ">"
width="150" attributo "width" - icona - larghezza in pixel della miniatura, in questo caso è 150 pixel; questa misura si può omettere se la miniatura ha delle misure che vi aggradano, se invece volete una misura diversa, si può mettere solo o la larghezza (width) o l'altezza (height), in questo modo avrete l'immagine che rimane proporzionata sia in altezza che in larghezza.
height="150" attributo "height" - icona - altezza in pixel della miniatura, in questo caso è 150 pixel. Vale lo stesso discorso dell'attributo "width"
</a> iconachiusura del tag "a"
box 004
 

Esempio

Cliccate sulle miniature per vedere l'effetto.
Le prime due miniature hanno le misure cambiate tramite gli attributi "width" e "height": la prima è portata a 100 pixel di width e omesso height, la seconda a 200 pixel di height e omesso width, essendo immagini quadrate, si nota subito che le proporzioni delle immagini sono state rispettate.
Nella terza miniatura sono stati omessi entrambi gli attributi, cosicché l'immagine assume di default le misure reali che sono 150 x 150 pixel

come avrete visto, cliccando sulla miniatura si apre l'immagine grande e il fondo si ombreggia, questo effetto di ombra è dato dal css per il colore, e dal javascript per l'effetto trasparenza.
Lateralmente, passando con il mouse, ci sono i pulsanti per mandare avanti icona o indietro iconale immagini, in alto a destra la crocetta icona per chiudere l'immagine.

box 005
 

Riepilogo

preparazione ambiente di lavoro

  • creare la cartella iconajquery
  • inserire all'interno tutti i js dello slide - box 001
  • aprire la cartella iconacss
  • inserire all'interno tutti i css dello slide - box 001
  • all'interno della cartella iconacss, aprire o creare la cartella icona images_js
  • inserire le immagini del layout dello slide

prima della chiusura </head>

  • scrivere nel file config.php i vari js comprese le poche righe dello script - box 001
  • aggiungere i css dedicati - box 001

chiudere il file config.php

creare la pagina e la tabella

  • creare la pagina che ospiterà le immagini
    • nota (1): se la pagina deve essere letta dal menù dedicato, ricordarsi di dare il nome del file con il prefisso - menù "struttura" step n. 9 - box 011
  • (1) - aprire il tag "table" assegnando l'ID "wrap" - box 002
    • nota (2): come spiegato in precedenza, l'ID è univoco per pagina, vale a dire che si può assegnare solo una volta al tag "table"
  • (2) - aprire riga "tr" e cella "td" - box 002
  • (3) - scrivere il codice che richiama l'immagine grande - box 002:

    <a class="group" rel="group" title="Didascalia dell'immagine" href="percorso_immagine_grande.png">

    scrivere il codice che richiama la miniatura - box 002:

    <img src="percorso_miniatura.png" title="nome immagine" alt="nome immagine" border="0" width="largh.in px miniatura" height="alt.in px miniatura" /></a>

    • nota (3): le due righe vanno sempre scritte nella STESSA cella
    le parti evidenziate sono quelle modificabili

  • (4) - chiudere la cella "/td" - aprire e chiudere tante celle "td" per quante miniature volete sulla stessa riga, alla fine della riga chiudere anche la "/tr";

  • per le righe sucessive ripetere la stessa sequenza dal punto: (1) al punto (4), mantenedo sempre lo stesso numero di celle.
    Finito l'inserimento, chiudere l'ultima "/td", "/tr", e la tabella "/table"

  • salvare la pagina in .php e con nome come spiegato alla nota (1)
I siti di MIKE, grande amico e sempre disponibile a dare un aiuto e che mi ha aiutato ad elaborare molte parti ed esempi di questo sito. Per approfondire meglio il php e anche il vba, vi consiglio di visitare i suoi siti e il nostro forum per i vostri quesiti
il VBA di Mike gli appunti di Mike il forum di Nel-Web di Loretta B.
copyright©2013 Loretta B.