Se connecter / S'enregistrer
Votre question

Pluging Djuve - défilement vignettes ?

Tags :
  • Programmation
Dernière réponse : dans Programmation
7 Juin 2011 11:51:34

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:

  1. <?php if (!defined('SITE')) exit('No direct script access allowed');
  2.  
  3. /**
  4. * Djuve
  5. *
  6. * Exhibition format
  7. *
  8. * @version 0.1 (experimental copy&paste)
  9. * @author Kjetil Djuve (http://www.kjetildjuve.com/)
  10. * @based on/mix of: Vaska's Iwakami/Backgrounded/Deux Column Exhibition formats (http://indexhibit.org/)
  11. */
  12.  
  13.  
  14. // defaults from the general libary - be sure these are installed
  15. $exhibit['dyn_css'] = dynamicCSS();
  16. $exhibit['dyn_js'] = dynamicJS();
  17. $exhibit['exhibit'] = createExhibit();
  18.  
  19. function dynamicJS()
  20. {
  21. return "function show_image(id)
  22. {
  23.  
  24. $('.pic').hide();
  25. $('#p' + id).fadeIn();
  26. return false;
  27. }";
  28. }
  29.  
  30. function createExhibit()
  31. {
  32. $OBJ =& get_instance();
  33. global $rs;
  34.  
  35. $pages = $OBJ->db->fetchArray("SELECT *
  36. FROM ".PX."media, ".PX."objects_prefs
  37. WHERE media_ref_id = '$rs[id]'
  38. AND obj_ref_type = 'exhibit'
  39. AND obj_ref_type = media_obj_type
  40. ORDER BY media_order ASC, media_id ASC");
  41.  
  42. // content text
  43.  
  44.  
  45. if (!$pages) return $s;
  46.  
  47. $i = 1; $a = ''; $b = '';
  48.  
  49. $total = count($pages);
  50.  
  51. // people will probably want to customize this up
  52. foreach ($pages as $go)
  53. {
  54. $title = ($go['media_title'] == '') ? '' : $go['media_title'] . ' ';
  55. $caption = ($go['media_caption'] == '') ? ' ' : $go['media_caption'];
  56.  
  57. $png = ($go['media_mime'] == 'png') ? " class='png'" : '';
  58.  
  59. $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";
  60.  
  61. $x = getimagesize(DIRNAME . GIMGS . '/' . $go['media_file']);
  62.  
  63. $off = ($i == 1) ? "style='display: block;'" : "style='display: none;'";
  64.  
  65. $next = ($i == $total) ? 1 : $i+1;
  66.  
  67. $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";
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78. $i++;
  79. }
  80. // image
  81. $s .= "<div id='d-image'>\n";
  82. $s .= $b;
  83. $s .= "</div>\n";
  84. $s .= "</div>\n\n";
  85.  
  86.  
  87.  
  88.  
  89. // thumbs
  90. $s .= "<div id='img-container'>\n";
  91. $s .= "<div id='d-thumbs'>\n";
  92. $s .= $a;
  93. $s .= "</div>\n";
  94. $s .= "<div id='text'>";
  95. $s .= $txt;
  96. $s .= "</div>\n";
  97. // exhibition text make sure process html switch is off - use .css to define 'info' and 'info' class
  98. $s .= "<div id='info'; class='info'>".$rs['content'] ;
  99. $s .= "</div>\n";
  100.  
  101.  
  102. $s .= "<div class='clear-both'><!-- --></div>\n\n";
  103.  
  104.  
  105.  
  106. return $s;
  107.  
  108.  
  109. }
  110.  
  111.  
  112. function dynamicCSS()
  113. {
  114. return "#d-image img {border: 0px solid #f2f2f2; margin: 9px 0px 0px 0px; }
  115. #d-thumbs { margin: 0px 0px 0px 0px;}
  116. #d-thumbs img {padding: 0; border: none; height: 35px; width: 35px; }
  117. #d-image { };
  118. #text { margin-left: 1em; float: right; width: 200px; }";
  119. #info {width: 800; border: none;}
  120. }
  121.  
  122.  
  123.  
  124. ?>






Autres pages sur : pluging djuve defilement vignettes

a c 145 L Programmation
7 Juin 2011 12:14:57

Doublon
m
0
l
7 Juin 2011 13:31:49

ouf... : )
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS