Custum plugging présentation de photos en full background
donzus
Messages postés11Date d'inscriptionmardi 28 décembre 2010StatutMembreDernière intervention21 octobre 2011
-
7 juin 2011 à 11:59
inwebo
Messages postés380Date d'inscriptionlundi 12 novembre 2007StatutMembreDernière intervention23 octobre 2014
-
7 juin 2011 à 19:09
Bonjour,
je cherche à transformer le pluging suivant: "Djuve" (Système de présentation d'images avec vignettes)
Mon souhait: que les photos s'affichent en full background,
quelqu'un sait-il quelles sont les modifications à faire pour y arriver ?
j'ai beau chercher je ne trouve pas comment faire, ...
J'utilise deux fichiers ".js" pour d'autres pluging, peut-être qu'ils pourront être utile.
jquery.supersized.2.0.js (code plus bas)
full_background.js (code plus bas)
! / Merci pour votre aide et vos réponses. \ !
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\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
{$title}
{$caption}
\n";
$i++;
}
// image
$s .= "
\n";
$s .= $b;
$s .= "
\n";
$s .= "
\n\n";
// thumbs
$s .= "
\n";
$s .= "
\n";
$s .= $a;
$s .= "
\n";
$s .= "
";
$s .= $txt;
$s .= "
\n";
// exhibition text make sure process html switch is off - use .css to define 'info' and 'info' class
$s .= "
".$rs['content'] ;
$s .= "
\n";
$s .= "
<!-- -->
\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;}
}
?>
voici le pluging: full_background.js
/**
* Full Size Backgrounded
*
* @version 1.0
* @author Vaska
*/
function bg_img_resize()
{
var w = $(window).width();
var h = $(window).height();
var iw = $('#the-background img').attr('width');
var ih = $('#the-background img').attr('height');
var rw = iw / ih;
var rh = ih / iw;
var sc = h * rw;
if (sc >= w) {
nh = h;
nw = sc;
} else {
sc = w * rh;
nh = sc;
nw = w;
}
$('#the-background img').css({height: nh, width: nw});
}
$(document).ready(function(){ bg_img_resize(); });
$(window).resize(function(){ bg_img_resize(); });
$(window).resize(function(){
bg_img_resize();
$('#the-background').css({ 'top' : 0, 'left' : 0 });
});
$(window).scroll(function(){
bg_img_resize();
$('#the-background').css({ 'top' : 0, 'left' : 0 });
});
