Aide php/javascript

Sim le pirate

Membre actif
20 Mars 2005
802
118
40
Mons/Bruxelles
Hello,

j'ai un petit problème avec un site que je réalise.
J'ai perdu un javascript qu'un ami m'avait écrit... il m'a renvoyé une ancienne version
que je dois maintenant réadapter mais je n'y arrive pas.
Le js est en fait là pour commander un slideshow basique: deux liens, prev et next reliés chacun à une fonction permettant de passer à la photo suivante ou de revenir en arrière...

Voila le code javascript:

Bloc de code:
 var place = 0;

function startup()
{
	var pic = path + img[0][0];
	
	story_display(pic);
	story_text(img[0][1]);
	preload();
}

function preload()
{
	var i = 0;
	
	preload_image_object = new Image();
	for (i = 0; i <= limit; i++) preload_image_object.src = path + img[i][0];
}

function story_display(pic)
{
	$('body').css({backgroundImage: 'url(' + pic + ')', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat'});
}

function story_next()
{
	place = (place + 1 > limit - 1) ? 0 : place + 1;
	story_display(path + img[place][0]);
	story_text(img[place][1]);
}

function story_prev()
{
	place = (place - 1 < 0) ? limit - 1 : place - 1;
	story_display(path + img[place][0]);
	story_text(img[place][1]);
}

function story_text(text)
{
	$('#the-text').html(text);
}

Et la fonction nextprev :

Bloc de code:
function nextprev(id)
	{
		var html = '<a href=\"#\" onclick=\"do_prev(' + id + '); return false;\">Previous</a> ';
		html += '<a href=\"#\" onclick=\"do_next(' + id + '); return false;\">Next</a>';
		
		return html;
	}

La seule différence avec mon site est que j'affiche trois slideshows simultanément sur la même page, ce qui fait que mes images sont stockées dans des arrays de ce type :

Bloc de code:
var place = new Array();
var limit = new Array();
var img = new Array();
limit[0] = 2;
place[0] = 0;
img[0] = new Array();
img[0][0] = new Array('47_aofatest1.png', "<p>caption</p>");
img[0][1] = new Array('47_aofatest2.png', "<p>caption</p>");

Cela deux jours que je bloque dessus, je ne sais comment l'adapter et mon pote est injoignable... :(

Merci d'avance pour toute aide !
 
Tu devrais donner un peu plus d'informations, car là c'est un peu le puzzle:
quelles bibliotheques externes sont utilisées (ie jquery),
a quoi ressemble ton script modifié (eg t'a une var place qui est un entier, une autre qui est un tableau, alors quid),
qui appelle nextprev...
 
Ok merci c'est vrai que ce n'est pas super clair !
Voila l'adresse du site.
La bibliothèque c'est bien jquery.
Le script que j'ai cité est tout ce que j'ai... il vient d'un autre projet et il faut que je l'adapte...
Quant aux variables c'est là que je sèche un peu...

Voila le script simplifié:




Bloc de code:
var place = 0;

function story_display(pic)
{
}

function story_next(id)
{
	place = (place + 1 > limit - 1) ? 0 : place + 1;
	//story_display(path + img[place][0]);
	
}

function story_prev(id)
{
	place = (place - 1 < 0) ? limit - 1 : place - 1;
	//story_display(path + img[place][0]);
	
}

Ai je besoin de la fonction story_display ou est ce que les 2 fonctions next et prev suffisent
à faire changer les images ?
Elles sont appelées de cette manière:

Bloc de code:
function nextprev(id)
	{
		var html = '<a href=\"#\" onclick=\"do_prev(' + id + '); return false;\">Previous</a> ';
		html += '<a href=\"#\" onclick=\"do_next(' + id + '); return false;\">Next</a>';
		
		return html;
	}

merci d'avance !
 
Pour jquery, il y a le plugin thickbox qui permet de faire exactement ce que tu veux. Pas besoin de se prendre la tête à programmer (ou si peu). :)

Thickbox est sympa mais ce n'est pas du tout l'effet ou la navigation recherchée.
Le site présente trois div extensibles via un toggle. Une fois le div ouvert on a accès à un
slideshow basique (next et prev).

J'ai 3 arrays d'images :

1 : img[1][0], img[1][1], img[1][2], ...
2: img[2][0], img[2][1], img[3][2], ...
3: ...

En s'ouvrant le toggle le div affiche par défaut l'image img[id de l'array][0].
Ce qu'il me faut juste c'est pouvoir passer à l'image précédente ou suivante...
 
Bloc de code:
var place = 0;
//var limit = new Array();
var img = new Array();
var limit = new Array();
limit[0] = 2;
//place[0] = 0;
img[0] = new Array();
img[0][0] = new Array('47_aofatest1.png', "<p>malick sidibé /</p><p>book 192 pages hardcover fr/eng fondation zinsou isbn: malick sidibé is the first african artist ever to win the golden lion award at the venice biennale (2007)</p>");
img[0][1] = new Array('47_aofatest2.png', "<p>Malick</p><p>book 192 pages hardcover fr/eng fondation zinsou isbn: malick sidibé is the first african artist ever to win the golden lion award at the venice biennale (2007)</p>");

limit[1] = 3;
img[1] = new Array();
img[1][0] = new Array('45_sambatest.png', "&nbsp;");
img[1][1] = new Array('45_sambatest3.png', "&nbsp;");
img[1][2] = new Array('45_sambatest2.png', "&nbsp;");

limit[2] = 3;
img[2] = new Array();
img[2][0] = new Array('44_sambatest.png', "&nbsp;");
img[2][1] = new Array('44_sambatest3.png', "&nbsp;");
img[2][2] = new Array('44_sambatest2.png', "&nbsp;");

Bloc de code:
function do_next(id)
{
   
	place = (place + 1 > limit[id] - 1) ? 0 : place + 1;
	story_display(path+img[id][place][0]);
	story_text(img[id][place][1]);
}
 
function do_prev(id)
{
	place = (place - 1 < 0) ? limit[id] - 1 : place - 1;
    story_display(img[id][place][0]);//manque parenthese
	story_text(img[id][place][1]);
}

Reste à corriger les fonctions startup et preload. Et t'as aussi une petite correction sur ta fonction story_display, en rapport avec le css qui ne place pas l'image au bon endroit.

EDIT var place = 0; pardon pas new Array();
EDIT2 bien sur, il faut aussi ajouter le path+ dans le story_display du do_prev
 
Sim, désolé mais je crois que ta méthode n'est pas bonne : comment fait une personne qui a désactivé javascript pour voir les galeries (10% des surfeurs)? Normalement on met toutes les images dans la page (avec la css qui va bien), puis on ajoute une couche javascript pour faire le slideshow. Bon, ici, tu as en plus un effet accordéon... Le plugin thickbox permet de gérer plusieurs slideshow sur une page. ;)

Mais je crois que le plugin qui conviendrait le mieux serait le plugin cycle. Il est possible de faire des prev/next sans se casser la tête et pas en plein écran comme avec thickbox.
 
Sim, désolé mais je crois que ta méthode n'est pas bonne : comment fait une personne qui a désactivé javascript pour voir les galeries (10% des surfeurs)? Normalement on met toutes les images dans la page (avec la css qui va bien), puis on ajoute une couche javascript pour faire le slideshow. Bon, ici, tu as en plus un effet accordéon... Le plugin thickbox permet de gérer plusieurs slideshow sur une page. ;)

Mais je crois que le plugin qui conviendrait le mieux serait le plugin cycle. Il est possible de faire des prev/next sans se casser la tête et pas en plein écran comme avec thickbox.

Le plugin cycle ne permet pas d'avoir plusieurs slideshow en même temps... le selecteur les commandes tous en même temps, j'ai essayé...
 
Hein? Comment ça? :confused: Normalement, il suffit de donner un id différent pour chaque slideshow... Je vais faire un test...
 

Merci pour votre aide mais cela ne marche toujours pas... :confused:
Voila le code entier de mon plugin (pour indexhibit)
Bloc de code:
<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* cycle (salupublic)
*
* Exhibition format
* 
* @version 1.0
* @author Simon Lagneaux 
* @author Vaska
*/

createExhibit();

function createExhibit()
{
	$OBJ =& get_instance();
	global $rs;
	
	$pages = $OBJ->db->fetchArray("SELECT *    
		FROM ".PX."objects  
		WHERE section_id = '3' 
		AND object = 'exhibit' 
		AND status = '1' 
		AND hidden != '1' 
		ORDER BY ord ASC");
	
	$s = '';
	$OBJ->front->exhibit['dyn_js'][] = dynamicJS();
	$OBJ->front->exhibit['dyn_css'][] = dynamicCSS();
	$OBJ->front->exhibit['lib_js'][] = 'jquery.js';
	$OBJ->front->exhibit['lib_js'][] = 'cycle.js';
	
	$j = 0;
	$v = 1;
	$i = 1;
	
	$OBJ->front->exhibit['dyn_js'][] = 'var place = 0;
	var img = new Array();
	var limit = new Array();';

		
	
	$s .= "<div id='example'>\n";
	
	// get the details
	foreach ($pages as $get)
	{   
	    
	    $texte = "<div class='texte' style='height: 50px; width: 709px; padding: 5px 10px; position: absolute; '>\n";
		$texte .= ('<p>' . $get['content'] . '</p>');
		$texte .= "</div>\n";
	    
		$s .= "<div id='backgrounds' style='background: transparent url(" . BASEURL . "/files/{$get[bgimg]}) no-repeat 0 0; height: auto; width: 709px;'>\n";
		$s .= "<h3 class='head' id='fU{$j}' style='height: 50px;'><span style='padding: 0 3px; color: #fff; background: #0c0;'><a href='#' id='h{$j}' onclick=\"dotoggle($j); return false;\">$get[title]</a></span></h3>\n";
		$s .= "<div id='d$j' class='opener' style='height: 531px; width: 709px; display: none; overflow: hidden;'>\n";
		
		$imgs = $OBJ->db->fetchArray("SELECT * 
			FROM ".PX."media, ".PX."objects_prefs 
			WHERE media_ref_id = '$get[id]' 
			AND obj_ref_type = 'exhibit'  
			AND obj_ref_type = media_obj_type 
			ORDER BY media_order ASC, media_id ASC");
		
		$w = 0;

		foreach ($imgs as $go)
		{
		
		
	    	$title 		= ($go['media_title'] == '') ? '' : $go['media_title'] . '&nbsp;';
	    	$caption 	= ($go['media_caption'] == '') ? '&nbsp;' : $go['media_caption'];

			$x = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);
			
			if ($w == 0)
			{
			$a .= "\n<div><img src='" . BASEURL . GIMGS . "/$go[media_file]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot' /><p>{$title}{$caption}</p></div>\n";
			}
			
			$title = ($go['media_title'] == '') ? '' : '<p>' . $go['media_title'] . '</p>';
			$title .= ($go['media_caption'] == '') ? '&nbsp;' : '<p>' . $go['media_caption'] . '</p>';
		
			$js .= "img[$j][$w] = new Array('$go[media_file]', \"$title\");\n";
		
			$w++;
			$i++;
		}
		

		
$x = "limit[$j] = $w;
img[$j] = new Array();\n";
	$x .= $js;
	$OBJ->front->exhibit['dyn_js'][] = $x;
	
	
		$js = '';
	
		$s .= "<div id='s{$v}' class='pics'>\n";
		$s .= $a;
		$s .= "</div>\n";
		$s .= "</div>\n";
		$s .= "</div>\n";
	
		
		$a = '';
		$v++;
		$j++;
		
		
	}
	
	$s .= "</div>\n";

	
	//$OBJ->front->exhibit['exhibit'] = $s;
	$OBJ->front->exhibit['exhibit'] = $s;
	return;
}


function dynamicCSS()
{
	return "#num {padding-left: 6px;}
	.img-bot {margin-bottom: 6px; display: block; }
	.pics { height: 531px; }";
}	

function dynamicJS()
{
	return "
	
	function nextprev(id)
	{
		var html = '<a href=\"#\" onclick=\"do_prev(' + id + '); return false;\">Previous</a> ';
		html += '<a href=\"#\" onclick=\"do_next(' + id + '); return false;\">Next</a>';
		
		return html;
	}
	
	function dotoggle(id) 
	{

	
		if ($('#d' + id).css('display') != 'block')
		{
			$('.opener').slideUp('normal');
			$('#d' + id).slideToggle('normal');
			
			
			
			if ($('#pn' + id + ' span').css('display') == 'block')
			{
				$('.pnthing').remove();
			}
			else
			{
				$('.pnthing').remove();
				$('#fU' + id + ' span').after(\" <span id='pn\" + id + \"' class='pnthing'>\" + nextprev(id) + \"</span>\");
			}
		}
		else
		{
			$('#d' + id).slideToggle('normal');
			$('.pnthing').remove();
		}
		
	}";
}


?>

Si je comprend bien
Bloc de code:
	$a .= "\n<div><img src='" . BASEURL . GIMGS . "/$go[media_file]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot' /><p>{$title}{$caption}</p></div>\n";
montre la première image... Mais comment la remplacer par les autres ?
Est-ce que je dois remplacer çà par la fonction startup() (qui n'a pas l'air utilisée) ?
Que dois-je mettre dans la fonction story_display(?) ?
 
Que dois-je mettre dans la fonction story_display(?) ?
Essayez donc avec ce qu'il y avait dedans au départ. Ensuite les modifs à faire devraient etre triviales ;) (si vous connaissez css).
Sinon, dans le do_prev() vous avez fait une erreur en copiant: path+img[id][place] ...
Et ca devrait coller.

PS: votre probleme ne vient pas de votre code php, mais du javascript (et un peu des css amha).
 
Essayez donc avec ce qu'il y avait dedans au départ. Ensuite les modifs à faire devraient etre triviales ;) (si vous connaissez css).
Sinon, dans le do_prev() vous avez fait une erreur en copiant: path+img[id][place] ...
Et ca devrait coller.

PS: votre probleme ne vient pas de votre code php, mais du javascript (et un peu des css amha).

Voila le fichier d'origine... mais qui correspond à un projet ou une page ne contient qu'un seul array d'images et ces images sont placées en background css... C'est là que je ne vois pas ce qu'il faut modifier pour que cela marche chez moi.

Bloc de code:
var place = 0;

function startup()
{
	var pic = path + img[0][0];
	
	story_display(pic);
	story_text(img[0][1]);
	preload();
}

function preload()
{
	var i = 0;
	
	preload_image_object = new Image();
	for (i = 0; i <= limit; i++) preload_image_object.src = path + img[i][0];
}

function story_display(place)
{
	$('.showy').hide();
	$('#lyr' + place).show();
	//$('body').css({backgroundImage: 'url(' + pic + ')', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat'});
}

function do_next()
{
	place = (place + 1 > limit - 1) ? 0 : place + 1;
	story_display(place);
	//story_text(img[place][1]);
}

function do_prev()
{
	place = (place - 1 < 0) ? limit - 1 : place - 1;
	story_display(place);
	//story_text(img[place][1]);
}

function story_text(text)
{
	$('#the-text').html(text);
}

Mon code php ne fait nullement appel aux fonctions startup et preload...
Merci merci !
 
cycle.js
Bloc de code:
//var place = 0;
 
function startup()
{
	var pic = img[0][0];
	
	story_display(pic);
	story_text(img[0][1]);
	preload();
}
 
function preload()
{
	var i = 0;
	
	preload_image_object = new Image();
	for (i = 0; i <= limit; i++) preload_image_object.src = path + img[i][0];
}
 
function story_display(pic)
{
	$('.showy').hide();
	$('#lyr' + place).show();
	$('body').css({backgroundImage: 'url(' + pic + ')', backgroundPosition: 'center center', backgroundRepeat: 'repeat'});
}
 
function do_next(id)
{
   
	place = (place + 1 > limit[id] - 1) ? 0 : place + 1;
	story_display(path+img[id][place][0]);
	story_text(img[id][place][1]);
}
 
function do_prev(id)
{
	place = (place - 1 < 0) ? limit[id] - 1 : place - 1;
    story_display(path + img[id][place][0]);//manque parenthese
	story_text(img[id][place][1]);
}
 
function story_text(text)
{
	$('#the-text').html(text);
}

page html :
Bloc de code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>

<title>different : YOyoyo</title>

<link rel='stylesheet' href='style.css' type='text/css' />


<style type='text/css'>
#num {padding-left: 6px;}
	.img-bot {margin-bottom: 6px; display: block; }
	.pics { height: 511px; }
</style>

<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='cycle.js'></script>

<script type='text/javascript'>

	
	function nextprev(id)
	{
		var html = '<a href="#" onclick="do_prev(' + id + '); return false;">Previous</a> ';
		html += '<a href="#" onclick="do_next(' + id + '); return false;">Next</a>';
		
		return html;
	}
	
	function dotoggle(id) 
	{

	
		if ($('#d' + id).css('display') != 'block')
		{
			$('.opener').slideUp('normal');
			$('#d' + id).slideToggle('normal');
			
			if ($('#pn' + id + ' span').css('display') == 'block')
			{
				$('.pnthing').remove();
			}
			else
			{
				$('.pnthing').remove();
				$('#fU' + id + ' span').after(" <span id='pn" + id + "' class='pnthing'>" + nextprev(id) + "</span>");
			}
		}
		else
		{
			$('#d' + id).slideToggle('normal');
			$('.pnthing').remove();
		}
		
	}
var place = 0;
//var limit = new Array();
var img = new Array();
var limit = new Array();
limit[0] = 2;
//place[0] = 0;
img[0] = new Array();
img[0][0] = new Array('47_aofatest1.png', "<p>malick sidibé /</p><p>book 192 pages hardcover fr/eng fondation zinsou isbn: malick sidibé is the first african artist ever to win the golden lion award at the venice biennale (2007)</p>");
img[0][1] = new Array('47_aofatest2.png', "<p>Malick</p><p>book 192 pages hardcover fr/eng fondation zinsou isbn: malick sidibé is the first african artist ever to win the golden lion award at the venice biennale (2007)</p>");

limit[1] = 3;
img[1] = new Array();
img[1][0] = new Array('45_sambatest.png', "&nbsp;");
img[1][1] = new Array('45_sambatest3.png', "&nbsp;");
img[1][2] = new Array('45_sambatest2.png', "&nbsp;");

limit[2] = 3;
img[2] = new Array();
img[2][0] = new Array('44_sambatest.png', "&nbsp;");
img[2][1] = new Array('44_sambatest3.png', "&nbsp;");
img[2][2] = new Array('44_sambatest2.png', "&nbsp;");

path = 'http://indexhibit.simonlagneaux.com/files/gimgs/';
$(document).ready(function()
{
	setTimeout('move_up()', 1);
});
</script>


</head>
<body class='section-3'>
<div id='menu'>
<div class='container'>

<h1><a href='/' title="YOyoyo">YOyoyo</a></h1>
<ul>
<li class='active'><a href='http://indexhibit.simonlagneaux.com/project/different/' onclick="do_click();">different</a></li>
<li><a href='http://indexhibit.simonlagneaux.com/project/sidibe/' onclick="do_click();">Sidibe</a></li>
<li><a href='http://indexhibit.simonlagneaux.com/project/malick/' onclick="do_click();">Malick</a></li>
</ul>

<ul>
<li class='section-title'>Main</li>
<li><a href='http://indexhibit.simonlagneaux.com/' onclick="do_click();">Bonjour</a></li>
</ul>


<p>Copyright 2008</p>

</div>	
</div>	

<div id='content'>
<div class='container'>

<!-- text and image -->
<div id='example'>
<div style='background: transparent url(http://indexhibit.simonlagneaux.com/files/47_background.png) no-repeat; width: 709px;'>
<h3 class='head' id='fU0' style='height: 50px;' ><span style='padding: 0 3px; color: #fff; background: #0c0;'><a href='#' id='h0' onclick="dotoggle(0); return false;">different</a></span></h3>
<div id='d0' class='opener' style='height: 531px; width: 709px; display: none; overflow: hidden;'>
<div id='s1' class='pics'>

<div><img src='http://indexhibit.simonlagneaux.com/files/gimgs/47_aofatest1.png' width='709' height='531' class='img-bot' /><p>malick sidibé /&nbsp;book 192 pages hardcover fr/eng fondation zinsou isbn: malick sidibé is the first african artist ever to win the golden lion award at the venice biennale (2007)</p></div>
</div>
</div>
</div>
<div style='background: transparent url(http://indexhibit.simonlagneaux.com/files/45_background.png) no-repeat; width: 709px;'>
<h3 class='head' id='fU1' style='height: 50px;' ><span style='padding: 0 3px; color: #fff; background: #0c0;'><a href='#' id='h1' onclick="dotoggle(1); return false;">Sidibe</a></span></h3>
<div id='d1' class='opener' style='height: 531px; width: 709px; display: none; overflow: hidden;'>
<div id='s2' class='pics'>

<div><img src='http://indexhibit.simonlagneaux.com/files/gimgs/45_sambatest.png' width='709' height='531' class='img-bot' /><p>&nbsp;</p></div>
</div>
</div>
</div>
<div style='background: transparent url(http://indexhibit.simonlagneaux.com/files/44_background.png) no-repeat; width: 709px;'>
<h3 class='head' id='fU2' style='height: 50px;' ><span style='padding: 0 3px; color: #fff; background: #0c0;'><a href='#' id='h2' onclick="dotoggle(2); return false;">Malick</a></span></h3>
<div id='d2' class='opener' style='height: 531px; width: 709px; display: none; overflow: hidden;'>
<div id='s3' class='pics'>

<div><img src='http://indexhibit.simonlagneaux.com/files/gimgs/44_sambatest.png' width='709' height='531' class='img-bot' /><p>&nbsp;</p></div>
</div>
</div>
</div>
</div>

<!-- end text and image -->

</div>
</div>

</body>
</html>
A partir de là ca devrait etre trivial (ce que je disais avant)
EDIT: bien sur c'est une piste, pour comprendre votre js... pas la solution.
Je vous conseilles fortement de prototyper votre html + js + css sans php... Une fois que vous aurez quelque chose de fonctionnel, vous pourrez creer le code php idoine.
 
  • J’aime
Réactions: Sim le pirate
wow wow merci cela marche presque !!! (site)
Il me reste juste à initialiser la première image... et à gèrer le fait que quand je passe d'un slideshow à l'autre la 1ère image est celle en cours du slideshow précédent... :confused:

Dois-je pour cela utiliser la fonction startup(id) ?
Si oui dois-je l'initialiser avec un $(document).ready() ?