Base de données pour gallerie + pagination

13 mars 2011, 19:03

Ah ui ui le problème de la dernière vignette sans image c'est à cause de la dernière |
il faut écrire

Code : Tout sélectionner

14-s.jpg|13-s.jpg|12-s.jpg|11-s.jpg|10-s.jpg

et non

Code : Tout sélectionner

13 mars 2011, 19:14

bon on fait quoi maintenant ?

13 mars 2011, 23:17

J'ai comme l'impression que la mise en place de la galerie avec jquery comme sur alsacreations pose un problème

Pourtant c'est pas très compliqué, j'ai juste fait un copié-coller de leur javascript (bon j'ai quand même regardé 2-3 trucs ^^ mais je suis loin d'être un pro du javascript !), modifié légèrement le HTML et le tour est joué.

Par contre ce n'est "valide" que s'il y a une seule galerie par page, ca marchera même s'il y en a plusieurs mais ce n'est pas génial.
Histoire de id et class, l'id thumbs se répète pour chaque galerie, j'ai essayé de mettre en class mais les images ne s'affichent pas. Il faudrait faire appel à quelqu'un de compétent en javascript !

Voici le code complet de la page, à toi maintenant d'appliquer le CSS que tu veux et d'ajouter d'autre chose sur la page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="fr" />
	<link rel="stylesheet" href="css/design.css" type="text/css" media="screen" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="js/gallery.js" type="text/javascript"></script>

		<title>TEST</title>
</head>
<body>
<?php
//On initialise la connexion à la bdd
try
{
	$db_host = "localhost"; //Lieu où est héberger la BDD

	$db_name = "galeriebdd"; //Nom de la BDD

	$db_login = "root"; //Login de connexion à la BDD

	$db_mdp = "root"; //Mot de passe de connexion à la BDD

	$bdd=new PDO("mysql:host=$db_host;dbname=$db_name",$db_login,$db_mdp);
}
catch(Exception $e)
{
	exit("<h1>Erreur de connexion à la BDD SQL</h1></body></html>");
}

/* mise en place du nombre d'affichage de galeries par page */
$nb_affiche = 1; //Nombre de galeries que l'on veut par page

//On va afficher la/les galeries selon la page où l'on ce trouve
if (isset($_GET['page']) && is_numeric($_GET['page']) && $_GET['page']>0)
{
        //$start nous sert pour savoir où commence l'affichage des galeries selon la page où l'on est
        $start = $_GET['page'] * $nb_affiche - $nb_affiche;

        //On récupère la page sur laquelle on est, nécessaire lors de la pagination
        $page = $_GET['page'];
}
else
{
        $start = 0;
        $page = 1;
}
/* ========================================================= */
//On prepare la requete SQL
$req = $bdd->prepare("SELECT * FROM galerie ORDER BY id LIMIT :start,:nb_affiche");
$req->bindValue(':start',$start,PDO::PARAM_INT);
$req->bindValue(':nb_affiche',$nb_affiche,PDO::PARAM_INT);
$req->execute();

while ($donnees = $req->fetch())
{
?>
	<h1><?php echo $donnees['titre_galerie']; ?></h1>
	
		<ul id="thumbs">

<?php
			/*On affiche toutes les vignettes pour cette galerie
			On crée un tableau des vignettes grâce au séparateur choisi */
			$tableau_vignettes = explode("|",trim($donnees['vignettes']));
			for ($i = 0; $i < count($tableau_vignettes); $i++)
			{
			//On affiche chaque vignette dans une balise li avec son lien permettant de l'afficher au dessus en grand format
?>
			<li>
				<a href="galerie/<?php echo $tableau_vignettes[$i]; ?>">
					<img src="galerie/<?php echo $tableau_vignettes[$i]; ?>" alt="" />
				</a>
			</li>
<?php
			}
?>
		</ul>
		<p>

			<?php echo $donnees['commentaire']; ?>

		</p>
<?php
}
$req->closeCursor();

//On met en place la pagination
$req = $bdd->prepare("SELECT COUNT(*) AS nb_galerie FROM galerie");

$req->execute();

$nb_galerie = $req->fetch();

$nb_galerie = $nb_galerie['nb_galerie']; //On associe le nombre de galeries

$nb_pages = ceil($nb_galerie / $nb_affiche); //On compte le nombre de pages par rapport au nombre de galeries que l'on veut par page

?>
        <p class="pagination">[ Page :
<?php
for ($i=1;$i<=$nb_pages;$i++)
{
        if ($i == $page )
        {
?>
                <span><?php echo $i; ?></span> -
<?php
        }
        else
        {
?>
                <a href="?page=<?php echo $i; ?>"><?php echo $i; ?></a> -
<?php
        }
}
?>
		]</p>
<?php
$req->closeCursor();
?>
</body>
</html>

Comme tu peux le voir le fichier javascript est situé dans le dossier js/ , à toi de voir où tu veux qu'il soit, voici le fichier gallery.js :

Code : Tout sélectionner

jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "images/loader.gif"
  };

  var thumbLinks = $("#"+settings.thumbListId).find("a"),
    firstThumbLink = thumbLinks.eq(0),
    highlight = function(elt){
      thumbLinks.removeClass(settings.activeClass).removeAttr("title");
      elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
    },
    loader = $(document.createElement("img")).attr({
      alt: settings.loaderTitle,
      title: settings.loaderTitle,
      src: settings.loaderImage
    });

  highlight(firstThumbLink);

  $("#"+settings.thumbListId).before(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("img")).attr({
          alt: "",
          src: firstThumbLink.attr("href")
        })
      )
  );

  var imgViewer = $("#"+settings.imgViewerId),
    bigPic = imgViewer.children("img");

  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
        target = $this.attr("href");
      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function(){
          imgViewer.html($(this).fadeIn(250));
        })
        .attr("src",target);
    });

});

Il serait important que tu lise en entier le tutoriel d'alsacreations, pour comprendre un minimum le fonctionnement du javascript dans le cas présent.

Voilà, il me semble n'avoir rien oublié !

14 mars 2011, 00:05

Je te remercie pour ce nouveau coup de main, j'ai hâte de pouvoir utiliser mon mac pour essayer tout ça (pas avant jeudi). Je comptai bien examiner ce tutoriel pour tenter de l'adapter au code existant, mais comme tu as tout fait, et si rapidement...c'est vrai qu'une dizaine d'id thumbs par page ce n'est pas "valide" ou tres orthodoxe, mais si ça marche, c'est l'essentiel non ? J'ai un peu de temps d'ici jeudi pour trouver une autre solution...enfin je verrai

Un grand merci pour ton indispensable contribution, bonne soirée à toi

14 mars 2011, 00:28

Merci, si tu as encore des questions, je suis toujours la

Bonne soirée(nuit ? ^^) et bonne semaine !

18 mars 2011, 16:21

reuh

comme convenu, j'ai testé cette galerie aujourd'hui, et ça ne marche pas
les miniatures s'affichent dans la div "thumbs"
la première de la page, pour les autres, le navigateur ouvre une nouvelle page...
faut que je trouve une galerie gérée par jquery qui autorise plusieurs occurences de div
pas très clair, mais en gros je demanderai à google "multiple instance jquery slideshow thumbnail un café l'addition merci"

on verra bien...

24 mars 2011, 11:29

Bonjour,

j'ai le meme soucis !!!

Dans l'optique de passer mon site (www.tuan-gallery.com)en "tout php" pour une meilleure utilisation, j'ai déjà commencé par le "template" qui est fonctionnel.
Si vous avez jetez un coup d’œil sur mon site, vous pouvez voir qu'ils comportent des centaines de photos; et c'est pour cela que je souhaite mettre tout ça en base de donnée.

En théorie j'ai saisi, inclure les photos dans la base de donnée (création de 2 tables, une table "pays" et une autre "photos"), ont relis avec les jointures, l'id propriétaire (je sais pas si je m'exprime correctement)

table pays
id pays
1.australie
2.usa
3.venise
4.cuba
5.etc

table photos
id id_pays liens_images vignettes
1 3 photos_1.jpg min/photos_1.jpg
2 1 photos_2.jpg min/photos_2.jpg
3 etc..
4
5

En fait mon soucis est que je ne sais pas rentrer ça dans la base de donnée. attribut, commentaire, valeur/defaut etc....

Après pour la suite je vois a peu près, je mets dans ma page "pays.php" le code adéquat.
Une boucle while qui lit le tableau et qui affiche x photos par page

merci par avance

24 mars 2011, 15:19

Salut,
Pour rentrer les données dans la bdd tu as plusieurs façons de le faire.
Soit tu crée une page d'administration avec un formulaire pour ajouter/modifier des images, ou alors tu peux ajouter directement les informations via phpmyadmin (ou un autre du même genre)

24 mars 2011, 15:52

Bonjour, et merci pour ta réponse

Je souhaite rentrer les infos par phpmyadmin. Je ne veux stocker que les liens, d'après ce que j'ai pu lire, c'est le mieux
Comment dois je procéder ?

24 mars 2011, 16:12

Resalut,
Vu que ce serai un peu long de tout bien expliquer ici, je te donne le lien d'un tutoriel qui explique comment créer une table, jusqu'à l'ajout et la modification des informations dans cette table.
http://www.siteduzero.com/tutoriel-3-14 ... admin.html

Tu trouveras surement beaucoup d'autre chose qui pourront t'aider sur ce site.

24 mars 2011, 16:45

Oui j'ai déjà lu, c'est comme ca que j'ai vu l'histoire de "l'id proprietaire" qui ici sera mon "id_pays"
D'apres ce que j'ai compris mes pays je n'en mets pas un par champs, ils seront tous dans le meme, idem pour les photos
ou
je rentre un pays par champs

et dans la table photos, je rentre une photo par champs (enfin la photo et sa vignette)

J'ai l'impression de m'embrouiller de plus en plus

24 mars 2011, 16:54

Comme tu voulais le faire au début ca semblé bien.
Une table PAYS et une Table PHOTOS.
Je pense que ca sera plus pratique ensuite pour savoir le nombre de pays que tu as !

24 mars 2011, 17:08

Oui voila, ce doit être la meilleure façon, et c'est malheureusement là que je m'embrouille, puisqu on utilise pas un champs par pays et par photos,
donc je ne vois pas comment placer tout ça via phpmyadmin
Sur le siteduzero ils expliquent en remplissant par champs (pour avoir des commentaires, le titre, une note etc...)

24 mars 2011, 18:18

Je veux bien t'expliquer comment faire, mais le mieux serai de refaire un autre topic histoire de pas trop dévié de celui la, si jamais Stoff a rebesoin d'aide etc.

Merci

26 mars 2011, 12:13

salut misterflo

comme convenu, je poste ici le code du .js modifié (par Nadox, de developpez.net)

Code : Tout sélectionner

 jQuery(function($){
	// définition du plugin
	$.fn.jquery_gallery = function(options) {
 
	  // définition des paramètres par défaut
	  var defaults = {
		activeClass: "active",
		activeTitle: "Photo en cours de visualisation",
		loaderTitle: "Chargement en cours",
		loaderImage: "img/ajax-loader.gif"
	  };
 
	  // mélange des paramètres fournis et des paramètres par défaut
      var settings = $.extend(defaults, options);
 
 
		function initGallery(ul)
		{
		  var thumbLinks = $(this).find("a"),
			  firstThumbLink = thumbLinks.eq(0),
			  highlight = function(elt){
				thumbLinks.removeClass(settings.activeClass).removeAttr("title");
				elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
			  },
			  loader = $(document.createElement("img")).attr({
				alt: settings.loaderTitle,
				title: settings.loaderTitle,
				src: settings.loaderImage
			  });
 
		  highlight(firstThumbLink);
			var imgViewer = $(document.createElement("p")).attr("class","viewer")
				.append(
				$(document.createElement("img")).attr({
				  alt: "",
				  src: firstThumbLink.attr("href")
				})
			  );
			$(this).after(imgViewer);
 
			var bigPic = imgViewer.children("img");
 
		  thumbLinks
			.click(function(e){
			  e.preventDefault();
			  var $this = $(this),
				  target = $this.attr("href");
			  if (bigPic.attr("src") == target) return;
			  highlight($this);
			  imgViewer.html(loader);
			  bigPic
				.load(function(){
				  imgViewer.html($(this).fadeIn(250));
				})
				.attr("src",target);
			});
		}
 
		$(this).each(initGallery);
 
        // interface fluide
        return $(this);
	};
 
	// utilisation du plugin
	$(document).ready(function() {
		$(".thumbs").jquery_gallery({
			activeClass: "ssg_active",
			activeTitle: "photo en cours de visualisation",
			loaderTitle: "chargement en cours",
			loaderImage: "img/ajax-loader.gif"
		});
	});
});

ça peut toujours intéresser quelqu'un ici, bien qu'il ne s'agisse pas de php...

pour ma part, je vais essayer d'utiliser une pagination jquery comme sur cet exemple

http://d-scribe.de/webtools/jquery-pagi ... ptions.htm

bonne journée, et encore merci pour ton aide

Base de données pour gallerie + pagination

Qui est en ligne