par
ddd » 07 juin 2011, 12:31
Bonjour bonjour,
J'ai une petit souhait lié à un pluging que j'utilise "Djuve" (système de présentation de photos avec vignettes).
ex (site en construction):
http://www.treesign.eu/evenementiel/spectacles/
j'aimerais que les vignettes soient contenue dans un bloc (c'est déjà la cas: #d-thumbs ), mais qu'en fonction de la taille de celui-ci, on puisse via un système de rollover ou de flèches les faire défiler à l'intérieur du bloc si le nombre de vignettes dépassent la capacité de celui-ci.
dans le même esprit que l'exemple ci-joint:
http://troissixzero.fr/shop/swf/scrollc.html
vos conseils me sont précieux, cette étape est importante dans la construction de ce site.
1000 mercis & Bonne soirée
voici le pluging Djuve:
<?php if (!defined('SITE')) exit('No direct script access allowed');
/**
* Djuve
*
* Exhibition format
*
* @version 0.1 (experimental copy&paste)
* @author Kjetil Djuve (http://www.kjetildjuve.com/)
* @based on/mix of: Vaska's Iwakami/Backgrounded/Deux Column Exhibition formats (http://indexhibit.org/)
*/
// defaults from the general libary - be sure these are installed
$exhibit['dyn_css'] = dynamicCSS();
$exhibit['dyn_js'] = dynamicJS();
$exhibit['exhibit'] = createExhibit();
function dynamicJS()
{
return "function show_image(id)
{
$('.pic').hide();
$('#p' + id).fadeIn();
return false;
}";
}
function createExhibit()
{
$OBJ =& get_instance();
global $rs;
$pages = $OBJ->db->fetchArray("SELECT *
FROM ".PX."media, ".PX."objects_prefs
WHERE media_ref_id = '$rs[id]'
AND obj_ref_type = 'exhibit'
AND obj_ref_type = media_obj_type
ORDER BY media_order ASC, media_id ASC");
// content text
if (!$pages) return $s;
$i = 1; $a = ''; $b = '';
$total = count($pages);
// people will probably want to customize this up
foreach ($pages as $go)
{
$title = ($go['media_title'] == '') ? '' : $go['media_title'] . ' ';
$caption = ($go['media_caption'] == '') ? ' ' : $go['media_caption'];
$png = ($go['media_mime'] == 'png') ? " class='png'" : '';
$a .= "\n<a href='#' onclick=\"show_image($i);return false;\"><img src='" . BASEURL . GIMGS . "/sys-$go[media_file]' alt='$caption' title='$title' id='img$i'$png /></a>\n";
$x = getimagesize(DIRNAME . GIMGS . '/' . $go['media_file']);
$off = ($i == 1) ? "style='display: block;'" : "style='display: none;'";
$next = ($i == $total) ? 1 : $i+1;
$b .= "\n<div id='p$i' class='pic' $off><a href='#' onclick=\"show_image($next); return false;\"><img src='" . BASEURL . GIMGS . "/$go[media_file]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot' /></a><p><div id='legende'><h11><div id='legendetitle'>{$title}</div></h11><h12><div id='legendetexte'>{$caption}</div></h12></p></div></div>\n";
$i++;
}
// image
$s .= "<div id='d-image'>\n";
$s .= $b;
$s .= "</div>\n";
$s .= "</div>\n\n";
// thumbs
$s .= "<div id='img-container'>\n";
$s .= "<div id='d-thumbs'>\n";
$s .= $a;
$s .= "</div>\n";
$s .= "<div id='text'>";
$s .= $txt;
$s .= "</div>\n";
// exhibition text make sure process html switch is off - use .css to define 'info' and 'info' class
$s .= "<div id='info'; class='info'>".$rs['content'] ;
$s .= "</div>\n";
$s .= "<div class='clear-both'><!-- --></div>\n\n";
return $s;
}
function dynamicCSS()
{
return "#d-image img {border: 0px solid #f2f2f2; margin: 9px 0px 0px 0px; }
#d-thumbs { margin: 0px 0px 0px 0px;}
#d-thumbs img {padding: 0; border: none; height: 35px; width: 35px; }
#d-image { };
#text { margin-left: 1em; float: right; width: 200px; }";
#info {width: 800; border: none;}
}
?>