Salut stitox et merci pour ton aide ;)
Alors j'ai bien fait comme tu m'as conseillé de faire. Cependant, le problème persiste mais sous une autre forme. Je m'explique:
lorsque je clic sur chacun des blocs, le nivoslider apparaît mais affiche l'icône de chargement sans afficher les images.
Cependant, la navigation du nivoslider indique bien le nombre d'image contenu dans ma boucle while, et je constate qu'il y a bien la transition auto entre mes différents slide (mais sans les images :( ). Je remarque aussi qu'en actualisant la page, les images apparaissent.
Je me demande si le problème ne se cache pas avec le script de masonry qui affiche et cache les différents blocs. J'ai beau cherché, je ne trouve pas (je pense que je suis arrivé au stade ou je n'ai plus assez de recul pour identifier le problème...)
Je vous fait donc part du code.
portfolio.php:
<?php
require "config.php";
mysql_connect(DB_HOST,DB_LOGIN,DB_PASS);
mysql_select_db(DB_BDD);
$cats = array('audio','developpement','design');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Pierre</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<img src="img/logo.png" alt="logo pierre laurens"/>
<div id="nav">
<?php include "menu.php"; ?>
</div>
</div>
<div id="content">
<h1>Portfolio<small style="float: right; word-spacing: 30px; padding-right: 10px;">
<?php foreach($cats as $v): ?>
<a href="#<?php echo $v; ?>"><?php echo $v; ?></a>
<?php endforeach; ?>
</small>
</h1>
<div id="portfolio">
<?php
$sql="SELECT * FROM portfolio";
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
while($data=mysql_fetch_assoc($req)){
$dos = 'images/'.$data"title"].'/min';
$dir = opendir($dos);
while($file = readdir($dir)){
$ext = strtolower(substr($file,-3));
$allow_ext = array("jpg",'png','gif');
if(in_array($ext,$allow_ext)){
?>
<div class="bloc <?php echo $data"cat"]; ?>">
<a class="thumb" href="#projet<?php echo $data"id"]; ?>">
<img src=<?php echo "\"images/".$data"title"]."/min/".$file."\""?> width="290" height="190"/>
</a>
<div class="info" width="890" height="590">
<div class="slider-wrapper theme-default">
<div class="ribbon">
</div>
<div id="slider" class="nivoSlider">
<div class="myslider">
<?php
$dos = 'images/'.$data"title"].'/';
$dir = opendir($dos);
while($file = readdir($dir)){
$ext = strtolower(substr($file,-3));
$allow_ext = array("jpg",'png','gif');
if(in_array($ext,$allow_ext)){
?>
<img src=<?php echo "\"images/".$data"title"]."/".$file."\""?> alt="" title="<?php echo $data"title"]; ?>" />
<?php
}
}
?>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<p><?php echo $data"title"]; ?></p>
</div>
</div>
<h3><?php echo $data"title"]; ?></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis dictum ante, eget tristique nulla pulvinar
vel.</p>
<p> Fusce risus erat, tincidunt eu ultrices sodales, gravida sed lectus. Donec non turpis mauris. Nunc vitae enim viverra
ipsum sodales blandit id at lectus. Proin risus est, venenatis sit amet mollis a, vehicula sit amet ante. Duis condimentum,
urna eget condimentum egestas, massa velit euismod tellus.</p>
</div>
</div>
<?php
}
}
}
?>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/masonry.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.myslider').each(function(){
// initialization des slider<img src="/img/smileys/smile.png">
$(this).nivoSlider({
effect: 'fold',
});
});
});
</script>
</html>
et le main.js:
jQuery(function($){
var portfolio = $('#portfolio');
portfolio.masonry({
isAnimated: true,
itemSelector:'.bloc:not(.hidden)',
isFitWidth:true,
columnWidth:300
});
$('h1 a').click(function(e){
var cls = $(this).attr('href').replace('#','');
portfolio.find('.bloc').removeClass('hidden');
portfolio.find('.bloc:not(.'+cls+')').addClass('hidden');
portfolio.masonry('reload');
portfolio.find('.'+cls).show(500);
portfolio.find('.bloc:not(.'+cls+')').hide(500);
location.hash = cls;
e.preventDefault();
});
var bloc = portfolio.find('.bloc:first');
var cssi = {width:bloc.width(),height:bloc.height()};
var cssf = null;
portfolio.find('a.thumb').click(function(e){
var elem = $(this);
var cls = elem.attr('href').replace('#','');
var fold = portfolio.find('.unfold').removeClass('unfold').css(cssi);
var unfold = elem.parent().addClass('unfold').css(cssf);
portfolio.masonry('reload');
if(cssf == null){
cssf = {
width : unfold.width(),
height: unfold.height()
};
}
unfold.css(cssi).animate(cssf);
})
if(location.hash != ''){
$('a[href="'+location.hash+'"]').trigger('click');
}
})
Voila donc si quelqu'un aurait une idée, je suis preneur :D