Bonjour,
je cherche à transformer le pluging suivant: "Djuve" (Système de présentation d'images avec vignettes)
voici un exemple de ce pluging:
ex (site en construction): http://www.treesign.eu/evenementiel/spectacles/
Mon souhait: que les photos s'affichent en full background,
quelqu'un sait-il quelles sont les modifications à faire pour y arriver ?
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:
voici le pluging: full_background.js
voici le pluging: jquery.supersized.2.0.js
Bonne soirée
je cherche à transformer le pluging suivant: "Djuve" (Système de présentation d'images avec vignettes)
voici un exemple de ce pluging:
ex (site en construction): http://www.treesign.eu/evenementiel/spectacles/
Mon souhait: que les photos s'affichent en full background,
quelqu'un sait-il quelles sont les modifications à faire pour y arriver ?
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<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;}
}
?>
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 });
});
voici le pluging: jquery.supersized.2.0.js
/*
Supersized - Fullscreen Slideshow jQuery Plugin
By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
Version: supersized.2.0.js // Relase Date: 5/7/09
Website: www.buildinternet.com
Thanks to Aen for preloading, fade effect, & vertical centering
*/
(function($){
//Resize image on ready or resize
$.fn.supersized = function() {
$.inAnimation = false;
$.paused = false;
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
$(window).bind("load", function(){
$('#loading').hide();
$('#supersize').fadeIn('fast');
$('#content').show();
if ($('#slideshow .activeslide').length == 0) $('#supersize a:first').addClass('activeslide');
if (options.slide_captions == 1) $('#slidecaption').html($('#supersize .activeslide').find('img').attr('title'));
if (options.navigation == 0) $('#navigation').hide();
//Slideshow
if (options.slideshow == 1){
if (options.slide_counter == 1){ //Initiate slide counter if active
$('#slidecounter .slidenumber').html(1);
$('#slidecounter .totalslides').html($("#supersize > *").size());
}
slideshow_interval = setInterval("nextslide()", options.slide_interval);
if (options.navigation == 1){ //Skip if no navigation
$('#navigation a').click(function(){
$(this).blur();
return false;
});
//Slide Navigation
$('#nextslide').click(function() {
if($.paused) return false; if($.inAnimation) return false;
clearInterval(slideshow_interval);
nextslide();
slideshow_interval = setInterval(nextslide, options.slide_interval);
return false;
});
$('#prevslide').click(function() {
if($.paused) return false; if($.inAnimation) return false;
clearInterval(slideshow_interval);
prevslide();
slideshow_interval = setInterval(nextslide, options.slide_interval);
return false;
});
$('#nextslide img').hover(function() {
if($.paused == true) return false;
$(this).attr("src", "/ndxz-studio/site/img/forward.png");
}, function(){
if($.paused == true) return false;
$(this).attr("src", "/ndxz-studio/site/img/forward_dull.png");
});
$('#prevslide img').hover(function() {
if($.paused == true) return false;
$(this).attr("src", "/ndxz-studio/site/img/back.png");
}, function(){
if($.paused == true) return false;
$(this).attr("src", "/ndxz-studio/site/img/back_dull.png");
});
//Play/Pause Button
$('#pauseplay').click(function() {
if($.inAnimation) return false;
var src = ($(this).find('img').attr("src") === "/ndxz-studio/site/img/play.png") ? "/ndxz-studio/site/img/pause.png" : "images/play.png";
if (src == "images/pause.png"){
$(this).find('img').attr("src", "/ndxz-studio/site/img/play.png");
$.paused = false;
slideshow_interval = setInterval(nextslide, options.slide_interval);
}else{
$(this).find('img').attr("src", "/ndxz-studio/site/img/pause.png");
clearInterval(slideshow_interval);
$.paused = true;
}
$(this).find('img').attr("src", src);
return false;
});
$('#pauseplay').mouseover(function() {
var imagecheck = ($(this).find('img').attr("src") === "/ndxz-studio/site/img/play_dull.png");
if (imagecheck){
$(this).find('img').attr("src", "/ndxz-studio/site/img/play.png");
}else{
$(this).find('img').attr("src", "/ndxz-studio/site/img/pause.png");
}
});
$('#pauseplay').mouseout(function() {
var imagecheck = ($(this).find('img').attr("src") === "/ndxz-studio/site/img/play.png");
if (imagecheck){
$(this).find('img').attr("src", "/ndxz-studio/site/img/play_dull.png");
}else{
$(this).find('img').attr("src", "/ndxz-studio/site/img/pause_dull.png");
}
return false;
});
}
}
});
$(document).ready(function() {
$('#supersize').resizenow();
});
//Pause when hover on image
$('#supersize > *').hover(function() {
if (options.slideshow == 1 && options.pause_hover == 1){
if(!($.paused) && options.navigation == 1){
$('#pauseplay > img').attr("src", "/ndxz-studio/site/img/pause.png");
clearInterval(slideshow_interval);
}
}
original_title = $(this).find('img').attr("title");
if($.inAnimation) return false; else $(this).find('img').attr("title","");
}, function() {
if (options.slideshow == 1 && options.pause_hover == 1){
if(!($.paused) && options.navigation == 1){
$('#pauseplay > img').attr("src", "/ndxz-studio/site/img/pause_dull.png");
slideshow_interval = setInterval(nextslide, options.slide_interval);
}
}
$(this).find('img').attr("title", original_title);
});
$(window).bind("resize", function(){
$('#supersize').resizenow();
});
$('#supersize').hide();
$('#content').hide();
};
//Adjust image size
$.fn.resizenow = function() {
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
return this.each(function() {
//Define image ratio
var ratio = options.startheight/options.startwidth;
//Gather browser and current image size
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();
var offset;
//Resize image to proper ratio
if ((browserheight/browserwidth) > ratio){
$(this).height(browserheight);
$(this).width(browserheight / ratio);
$(this).children().height(browserheight);
$(this).children().width(browserheight / ratio);
} else {
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
$(this).children().width(browserwidth);
$(this).children().height(browserwidth * ratio);
}
if (options.vertical_center == 1){
$(this).children().css('left', (browserwidth - $(this).width())/2);
$(this).children().css('top', (browserheight - $(this).height())/2);
}
return false;
});
};
$.fn.supersized.defaults = {
startwidth: 4,
startheight: 3,
vertical_center: 1,
slideshow: 1,
navigation:1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 5000
};
})(jQuery);
//Slideshow Next Slide
function nextslide() {
if($.inAnimation) return false;
else $.inAnimation = true;
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
var currentslide = $('#supersize .activeslide');
currentslide.removeClass('activeslide');
if ( currentslide.length == 0 ) currentslide = $('#supersize a:last');
var nextslide = currentslide.next().length ? currentslide.next() : $('#supersize a:first');
var prevslide = nextslide.prev().length ? nextslide.prev() : $('#supersize a:last');
//Display slide counter
if (options.slide_counter == 1){
var slidecount = $('#slidecounter .slidenumber').html();
currentslide.next().length ? slidecount++ : slidecount = 1;
$('#slidecounter .slidenumber').html(slidecount);
}
$('.prevslide').removeClass('prevslide');
prevslide.addClass('prevslide');
//Captions require img in <a>
if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').attr('title'));
nextslide.hide().addClass('activeslide')
if (options.transition == 0){
nextslide.show(); $.inAnimation = false;
}
if (options.transition == 1){
nextslide.fadeIn(200, function(){$.inAnimation = false;});
}
if (options.transition == 2){
nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 3){
nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 4){
nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 5){
nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
}
$('#supersize').resizenow();//Fix for resize mid-transition
}
//Slideshow Previous Slide
function prevslide() {
if($.inAnimation) return false;
else $.inAnimation = true;
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
var currentslide = $('#supersize .activeslide');
currentslide.removeClass('activeslide');
if ( currentslide.length == 0 ) currentslide = $('#supersize a:first');
var nextslide = currentslide.prev().length ? currentslide.prev() : $('#supersize a:last');
var prevslide = nextslide.next().length ? nextslide.next() : $('#supersize a:first');
//Display slide counter
if (options.slide_counter == 1){
var slidecount = $('#slidecounter .slidenumber').html();
currentslide.prev().length ? slidecount-- : slidecount = $("#supersize > *").size();
$('#slidecounter .slidenumber').html(slidecount);
}
$('.prevslide').removeClass('prevslide');
prevslide.addClass('prevslide');
//Captions require img in <a>
if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').attr('title'));
nextslide.hide().addClass('activeslide')
if (options.transition == 0){
nextslide.show(); $.inAnimation = false;
}
if (options.transition == 1){
nextslide.fadeIn(450, function(){$.inAnimation = false;});
}
if (options.transition == 2){
nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 3){
nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 4){
nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 5){
nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
}
$('#supersize').resizenow();//Fix for resize mid-transition
}
Bonne soirée