Jump to content
ElementaryOS France

Création d'une galerie d'images

By Nyrhu
in Scripting, Coding, Bash

 Share

Recommended Posts

Newbie

Nyrhu

Posted
Posted (edited)

Je vous propose un script permettant de créer des JavaScript insérables dans des pages html.

 

Le script liste les fichiers images (miniatures et images en grand), simultanément, chaque nom de fichier est inséré dans du code html. Le fichier de sortie est un JavaScript, le html est affiché à l'écran via une simple commande "document.write".

 

Vous trouverez l'architecture (et un exemple html) de la galerie dans ma DropBox.

 

Exemple fonctionnel : Le Huitième Déclic

 

#!/bin/bash
workingdir="../gallery"
echo -e "Création du script en cours...\n"
for folder in ${workingdir}/*
  do let $[j+=i]
  i=0
  let $[k+=1] 
  echo 'document.write("\' > "../scripts/script-${folder##*/}.js"
  for fichier in ${folder}/img/*
       do file="${fichier##*/}"
     {
        echo -n '<a href=\"gallery/'${folder##*/}'/img/'${file}'\" rel=\"lightbox['${folder##*/}']\">'
        echo '<img alt=\"\" src=\"gallery/'${folder##*/}'/mini/'${file}'\" /></a>\'
     }  >> "../scripts/script-${folder##*/}.js"
     let $[i+=1] 
  done
  echo " - Galerie traitée : ${folder##*/}"
  echo '")' >> "../scripts/script-${folder##*/}.js"
done
echo -e "\n > Nombre de galeries traitées : $k"
echo " > Nombre d'images traitées : $j"
read

 

- L'affichage des images se fait via un JS dispo dans le dossier CSS.

- Le script se trouve dans le dossier "outils" (avec sa version pour Windows).

- Le dossier "css" contient le nécessaire pour le mode d'affichage.

Edited by Nyrhu
Link to comment
Share on other sites
  • 3 months later...
Newbie

enemesis

Posted
Posted

Dans le même genre :

 

#!/bin/bash

# Vérification des paramètres
# S'ils sont absents, on met une valeur par défaut

if [ -z $1 ]
then
       sortie='index.html'
else
       sortie=$1
fi



# Préparation des fichiers et dossiers

echo '' > $sortie

if [ ! -e miniatures ]
then
       mkdir miniatures
fi



# En-tête HTML

echo '<!doctype html>
<html lang="fr">

<head>
   <link rel="stylesheet" href="../../css/galerie.css" type="text/css" />
   <link rel="icon" type="image/png" href="../../#######.ico" />
   <script src="../../js/jquery-1.10.2.min.js"></script>
   <script src="../../js/lightbox-2.6.min.js"></script>
   <link href="../../css/lightbox.css" rel="stylesheet" />
   <title>######</title>
</head>
  <body>

<section>' >> $sortie



# Génération des miniatures et de la page

for image in `ls *.png *.jpg *.JPG *.jpeg *.gif 2>/dev/null`
do 
   convert -resize 300 -gravity Center -crop 200x200+0+0 $image miniatures/$image
       echo '<a href="'$image'" data-lightbox="roadtrip"><img src="miniatures/'$image'" alt="" /> </a> '>> $sortie
done



# Pied de page HTML

echo '</section>

                   <nav>
                      <span class="bl-next-work"><a href="../index.html">Retour accueil galerie</a></span>
                   </nav>

  </body>
</html>' >> $sortie

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...