Je suis occupé de construire un site pour une styliste-illustratrice et deux problèmes se posent à moi.
Etant graphiste orienté pré-press à la base mes connaissances en web sont limitées, le php et le javascript sont encore trop flou pour maîtriser leurs manipulations.
Premier problème:
J'utilise un système de présentation nommé Djuve.
Système de défilement d'images avec vignettes.
voir exemple ci-joint:
http://erika.pocketdesigners.be/index.p ... /creation/
Pour éviter lors des rajouts de photos d'avoir la ligne des vignettes qui se rallonge ou se mette sur deux lignes,
comme sur cette exemple:
http://erika.pocketdesigners.be/index.p ... 01/custom/
j'aimerais modifier le code php du pluging pour qu'après 26 vignettes il soit possible de les faire défiler par un système de flèches (gauche droite < >) pouvez-vous m'aider?
Quel code faut-il insérer et à quel endroit ?
voici le code du pluging: exhibait.djuve.php
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<?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><em>{$title}</em><br />{$caption}</p></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 {}
#d-image { };
#text { margin-left: 1em; float: right; width: 200px; }";
#info {width: 800; border: none;}
}
?>
Deuxièmement est-il possible d'insérer un ligne de code définissant le nom "générique" Css des légendes photos: pour l'instant j'utilise le nom suivant :
#p1.pic { … }
qui existe par défaut, mais il est valable pour la première légende de la première photos.
Et je ne trouve pas le nom qui me permettrait de toutes les modifier en une fois. J'imagine qu'il n'à pas été nommé dans le code…? Et je ne souhait pas m'amuser à créer un
#p1.pic { … },
#p2.pic { … },
#p2.pic { … }
et ainsi de suite,... pour chaque légende de chaque photo… ce ne serait pas la solution adéquate.
Dernier point, le système de présentation des légendes propose un titre et un sous titre qui sont présentés sur 2 lignes , est il possible de les avoir sur une ligne. Quel ligne faut-il modifier dans le code pour y arriver?
(présentation par défaut)
Titre:
Sous titre
présentation souhaitée -> Titre: sous titre
Un petit coup de main serait vraiment le bienvenu, j'attend votre réponse avec impatience pour pouvoir terminer ce site.
Si vous avez besoin d'autres informations, demandez le moi.
Merci d'avance pour vos réponses!
ddd
