• F
    User Newbie •

    Inserire effetto Lightbox

    Ciao a tutti, come inserisco un effetto lightbox su questo codice.
    Grazie

    <?php
    #######################
    # #
    # Fotogallery. #
    # Per configurarla #
    # vai nel file: #
    # config_gallery.php #
    # #
    #######################

        // Inclusione del file config_gallery.php per aquisire le variabili.
    include("config_gallery.php");
    
    // Recupero della variabile passata in get.
    // il valore "index" rappresenta l'indice della fotogallery, "view" la visualizzazione della singola foto.
    @$mode = $_GET['mode'];
    
    // Definizione delle variabili in base al valore di $mode
    if ($mode == "index" || empty($mode) || !isset($mode))
    {
        $quanto = $thumb_width;
    }
    elseif ($mode == "view")        
    {
            $quanto = $photo_width;
            $destination_path = $dir;    
    }
        
    // Aumenta la memoria utilizzabile fino a 128mb e il timeout a 4 minuti. 
    // Questo ci consente di creare le miniature senza avere un errore di timeout dal server
    ini_set("memory_limit", "256M"); 
    set_time_limit(240);    
                
    // Se non esiste la cartella di destinazione delle miniature (vedi config_gallery.php) ne si forza la creazione
    if (!file_exists($destination_path)) 
    {
        mkdir($destination_path , 0077);
    }
    
    // Apertura della directory in cui sono contenute le foto a dimensione originale
    if ($handle = opendir($dir)) 
    {
       $i = 1; //Inizializzazione dell'indice
       // Letttura delle immagini conenute nella cartella $dir 
       while (false !== ($file = readdir($handle))) 
       {
                   list($width, $height, $type, $attr) = @getimagesize($dir.$file);        
            
                // Se è una immagine "JPEG" continuo con la sua elaborazione 
                // altrimenti si passa alla foto successiva
                if($type == 2)
                {
                       // Elaborazione delle nuove dimensioni (altezza e larghezza) in proporzione.
                       // Ciò consente di non alterare la qualità della immagine.
                       if($width > $height)
                       {  
                           $new_width = $quanto;
                           $new_height = ($quanto * $height) / $width;
                           $new_height = number_format($new_height, 0);
                       }      
                       elseif($height > $width)
                       {  
                           $new_height = $quanto;
                           $new_width = ($quanto * $width) / $height;
                           $new_width = number_format($new_width, 0);
                       }
                       elseif($height == $width)
                       {
                           $new_width = $quanto;
                           $new_height = $quanto;
                       }
                       
                       //Se si sta visualizzando una singola foto e questa è già stata ridimensionata si ignora questo passaggio, altrimenti la foto viene ridimensionata.
                       // L'"if" controlla se la foto in questione ha già le dimensioni desiderate. Se le dimensioni non sono uguali a quelle volute, verrà ridimensionata.
                       if ($mode == "view") 
                       {    
                           if ($new_height != $height && $new_width != $width) 
                           {
                                isset($compression) ? $compression = $compression : $compression = 100; // In cso non sia settata la compressione (vedi config_gallery.php) gli si assegna il valore di default
                                $destimg=imagecreatetruecolor($new_width,$new_height) or die("Problemi nelle creazioni dell'immagine");// Creazione Immagine
                                $srcimg=ImageCreateFromJPEG($dir.$file) or die("Problemi nell'aprire l'immagine"); //Apertura Immagine Originale
                                ImageCopyResampled($destimg,$srcimg,0,0,0,0,$new_width,$new_height,ImageSX($srcimg),ImageSY($srcimg)) or die("Problemi nel ridimensionamento"); //Ridimensionamento Nuova Immagine
                                ImageJPEG($destimg, $destination_path.$file, $compression) or die("Problemi nel salvataggio"); //Salvataggio Nuova Immagine
                           }                           
                       }  
                       //Se si sta visualizzando l'indice delle foto (contenente le miniature) e queste sono già state ridimensionate si ignora questo passaggio, altrimenti la foto viene ridimensionata.
                       // l'"if" controlla se esiste già una miniatura, chiamata con lo stesso nome della foto originale, presente nella cartella di destinazione. Se non esiste viene creata la minatura
                       elseif (empty($mode))  
                       {
                           if (!file_exists($destination_path.'/'.$file)) //Se la miniatura non esiste verrà creata altrimenti si ignora questo passaggio
                              {
                                isset($compression) ? $compression = $compression : $compression = 100; // In cso non sia settata la compressione (vedi config_gallery.php) gli si assegna il valore di default
                                $destimg=imagecreatetruecolor($new_width,$new_height) or die("Problemi nelle creazioni dell'immagine");// Creazione Immagine
                                $srcimg=ImageCreateFromJPEG($dir.$file) or die("Problemi nell'aprire l'immagine"); //Apertura Immagine Originale
                                ImageCopyResampled($destimg,$srcimg,0,0,0,0,$new_width,$new_height,ImageSX($srcimg),ImageSY($srcimg)) or die("Problemi nel ridimensionamento"); //Ridimensionamento Nuova Immagine
                                ImageJPEG($destimg, $destination_path.$file, $compression) or die("Problemi nel salvataggio"); //Salvataggio Nuova Immagine                               
                              }
                          }
                       
                        $image * = $file; //Creazione dell'array contenente le immagini
                           $i++; //Incremento dell'indice
                 }
            }     
           // Chiusura della cartella $dir
           closedir($handle);  
    }
    else 
    {
        // Se vi è un errore nell'aprire la cartella $dir allora viene stampato a video seguente paragrafo
        echo "<p align=\"center\">
                Impossibile eseguire lo script. 
                <br /> 
                Accertati di aver impostato correttamente i parametri e
                che la cartella (nome: \"<b>$dir</b>\" ) in cui sono contenute le foto esista
             </p>";
    }
    
    //Se si sta visualizzando l'indice allora utilizzo la paginazione propria dell'indice
    if ($mode == "index" || empty($mode) || !isset($mode)) 
    {
        ########################
        #   Paginazione per       #
        #  la visualizzazione  #
        #      dell'indice       #
        ########################
        
        // Se si è scelto di utilizzare la paginazione (vedi file config_gallery.php) allora vengono stampati i links.
        // Altrimenti verranno visualizzate tutte le immagini nella stessa pagina.         
        if (empty($numperpagina)) 
        {
            $numperpagina = count($image);
        }
        isset($_GET['page']) ? $pageNum = $_GET['page'] : $pageNum = 1;
        
        $inizio = ($pageNum - 1) * $numperpagina; 
        $fine = $inizio + $numperpagina;
        
        $i = 1; //inizializzo l'indice
        foreach ($image as $id => $nome)
        {
            if ($i > $fine)
            {  
              break;
            }
         
            if ($i >= $inizio)
            {   // stampa la miniatura
			 
                echo " <a class=\"example-image-link\" href=\"?id=$i&amp;from=$pageNum&amp;mode=view\"><img class=\"example-image\" src=\"".$destination_path.$nome."\" title=\"data-title=\"" .$nome."\" border=\"0\" alt=\"foto\" /></a>";
		?>	              
        		 	<a class="example-image-link" href="?id=<?php echo $i; ?>&amp;from=<?php echo$pageNum; ?>&amp;mode=view" data-lightbox="example-1"><img class="example-image" src="<?php echo "" .$destination_path.$nome . "" ; ?>\ alt="image-1" /></a>
                  
                  <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>  
                    
                    
                    
		<?php
         }
        
	 	
		
		       
            $i++; // incremento dell'indice
        }
        
        if ($fine > count($image))
        { 
            $fine = count($image);
        }    

        // Conto delle pagine
        $maxPage = ceil(count($image)/$numperpagina);
        
        // Creazione link per accedere ad ogni pagina
        $self = $_SERVER['PHP_SELF'];
        $nav  = '';
        for($page = 1; $page <= $maxPage; $page++)
        {
           if ($page == $pageNum)
           {
              $nav .= " $page "; 
           }
           else
           {
             $nav .= " <a href=\"?page=$page\" title=\"Pagina $page di $maxPage\">$page</a> ";   
           }
        }
        
        // Creazione links Previous e Next
        // e quelli First page e Last page
         
        if ($pageNum > 1)
        {
        $page  = $pageNum - 1;
           $prev  = " <a href=\"?page=$page\" title=\"Pagina $page di $maxPage\"><< precedente</a> ";
        }
        else
        {
           $prev  = ''; // se siamo nella 1° pag non mostriamo Prev
        }
        
        if ($pageNum < $maxPage)
        {
        $page = $pageNum + 1;
           $next = " <a href=\"?page=$page\" title=\"Pagina $page di $maxPage\" >successivo >></a> ";
        }
        else
        {
           $next = ''; // siamo nell' ultima pag, nn mostriamo Next
        }


        // mostra i links di navigazione
        echo "<br />Pagine: ", $prev . $nav . $next ;
        //print_r($image);
    }
    
    //Se si sta visualizzando a singola foto allora utilizzo la paginazione per visualizzare i link "precedente", "torna indietro" e "successiva"
    elseif ($mode == "view")
    {
        ########################
        #   Paginazione per    #
        #  la visualizzazione  #
        #  della singola foto  #
        ########################
        
        //Aquiusizione dell'id della foto. Default: 1
        isset($_GET['id']) ? $id = $_GET['id'] : $id = 1 ;
        
        //Stampa a video della foto
        echo "<img src=\"".$dir.$image[$id]."\" title=\"\" alt=\"".$image[$id]."\" />";
        echo "<br />".$image[$id];
        
        //Categoria da cui si proviene
        if (isset($_GET['from']))
        {
            $from = $_GET['from'];
        }
        else $from = 1;
        
        //Link Foto Precedente
        if ($id == 1)
        {
            $precedente = ""; //Se siamo nella prima pagina non mostriamo il link alla foto precedente
        }
        else 
        {
            $prev = $id - 1;
            $precedente = "<a href=\"?id=$prev&amp;from=$from&amp;mode=view \"><< Foto precedente</a>";
        }
        
        // Link Foto Successiva
        if ($id == count($image))
        {
            $successiva = ""; //Se siamo nella ultima pagina non mostriamo il link alla foto successiva
        }
        else 
        {
            $next = $id + 1;
            $successiva = "<a href=\"?id=$next&amp;from=$from&amp;mode=view \">Foto successiva >></a>";
        }
        
        //Stampa paginazione
        echo "<br /><br />".$precedente."&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"?page=$from\">Indice foto</a>&nbsp;&nbsp;&nbsp;&nbsp;".$successiva;        
    }

    ?>:gtsad:

    0
  • G
    User Attivo •

    Puoi partire da un sistema già esistente, tipo:

    Prima lo usi in una pagina di prova, lo adatti alle tue necessità, e poi devi fare in modo di generare il codice necessario via php..

    Oppure, punta su jquery, e gioca con le funzioni .html() - .show() (o fadein) - .hide() (o fadeout).

    0
  • F
    User Newbie •

    CIao, grazie per la risposta.
    Ma ci ho provato, ma non capisco dove devo posizionare le jquery....

    0
  • G
    User Attivo •

    Il file della libreria jquery lo richiami col tag html <script> nell'head.

    Il codice puoi metterlo in fondo prima della chiusura del tag </body>, sempre con il tag <script>, esterno o interno alla pagina.

    0
Effettua l'accesso per rispondere