Lier un backround à un thum choisi dans une gallerie

19 Mar 2014 18:07 #1 par Kyos
Bonjour

Connaissez vous un composant pour Joomla 2.5.X qui permettrait de choisir une image de fond pour un site en cliquant sur un thumb présenté dans une sorte de galerie d'images. Pour préciser ce que je souhaite, rendez vous sur mon site et cliquez sur l'un des thumbs. Le fond d'écran reproduira grandeur nature le thumb sur lequel vous avez cliqué.

Malheureusement, c'est pour une version J 1.5 et je ne suis pas arrivé à migrer le template contenant cette fonction en J 2.5. Et j'ai recherché un tel composant de partout sans rien trouver.

Merci

Connexion pour participer à la conversation.

19 Mar 2014 19:26 #2 par Simon
Bonjour,

je ne connais pas de composant comportant ce genre de fonctionnalité.
Comment as-tu fait pour migrer ce template, as tu bien suivi le tutoriel suivant ?
magazine.joomla.org/issues/issue-may-201...emplate-to-Joomla-25

Élargissons notre vision du web et de ses relations avec Joomla! Cinnk magazine
Pour apprendre à construire votre site web avec Joomla 3 : Joomla3! Le Livre Pour Tous
Formation Joomla 3 pour débutant : 40 Tutoriels vidéos pour débuter avec Joomla!
Plus de 100 Trucs et Astuces pour Joomla 3
Suivez moi sur Twitter

Connexion pour participer à la conversation.

20 Mar 2014 09:01 - 20 Mar 2014 09:08 #3 par Kyos
Bonjour Simon

J'ai suivi ce tutoriel pas à pas et j'ai vérifié maintes fois. J'ai aussi exécuté le fichier index.php bloc à bloc pour repérer où ça coince. Je pense que le problème se situe dans les parties de code JS mais je ne connais pas Java. Je mets le code en pièces jointe, avec des annotations de "pistage" en commentaire..

Merci

PS: la pièce jointe ne passe pas. Je mets le code ci-dessous.
Bonjour Simon
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!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="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>"
<head>
	<meta name="google-site-verification" content="oFZIIyh_g9-Grnul0FOYar6jN6Ijf6ATAcaD2jdLi8M" />
    <meta name="norton-safeweb-site-verification" content="8e78lgngvtbc8hkfrm9gw05dudbi8o2om6q2ylpgycfgdx88h23yvhav4e1bjy77r13wy32-uw3qcgq3xxify08jst0wuc309nl229015mh959p3iu5agsqdthg0j--c" />
 
        <jdoc:include type="head" />
	<link href="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/css/template.css" rel="stylesheet" type="text/css" />
	<?php
	if (JRequest::getVar('Itemid') == 1	)	{
		JRequest::setVar ('showselector', 'show');
	}
	else {
		JRequest::setVar ('showselector', 'hide');
	}
	if ($this->params->get('showselector') == "show") {
		echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/img".$this->params->get('defaultimage').".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";
		foreach (range(1, 6) as $bgimage) {
			if ($this->params->get('defaultimage') != $bgimage) {
				echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/img".$bgimage.".css\" title=\"img".$bgimage."\" rel=\"alternate stylesheet\" type=\"text/css\" /> \n";
			}
		}
		include ("imageswapper.php");
	} else if ($this->params->get('showselector') == "random" || $this->params->get('showselector') == "modRand") {
		$randomImage  = "img";
		$randomImage .= rand(1, 6);
		echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/".$randomImage.".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";
	}
	else if ($this->params->get('showselector') == "hide" || $this->params->get('showselector') == "module") {
		echo "<link href=\"".$this->baseurl."/templates/transparent_bliss_1.5/css/img".$this->params->get('defaultimage').".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";
	}
	?> 
<body> <!--height et width 100%-->
	<div id="wrapper"> <!--height 100% width 990-->		 
	  	<div id="logo"></div> <!--float left height 500 widt 77-->
		<div id="headwrap"> <!--height 90 with 980--> 
    		<div id="topbannerad"><jdoc:include type="modules" name="user5" style="xhtml" /></div> <!--float right	heigt 90 width 728-->
  		</div> 
<!-- *********************************************************************************************************** 
jusqu'ici, seuls le nom en vertical et le background apparaissent
************************************************************************************************************** -->		
  		<div id="leftwrap"> <!--float left width 200-->
			<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-top.png" alt="top-slice" width="200" height="10" border="0" /></div>
    		<div id="left"> <!--width 200-->
      			<div id="leftinner2"> <!--marges-->
        			<jdoc:include type="modules" name="left" style="xhtml" />
					<jdoc:include type="modules" name="user1" style="xhtml" />
      			</div>
    		</div>
    		<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-bottom.png" alt="" width="200" height="10" border="0" /></div>
  		</div> 	  
<!-- *********************************************************************************************************** 
jusqu'ici, en plus du nom en vertical et du background, la colonne de gauche apparait
************************************************************************************************************** -->		
  		<div  id="right"> <!--float left width 600-->
    		<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/right-top.png" border="0" alt="" width="800" height="10" border="0" /></div>
    		<div id="rightinner"> <!--width 600 backgroud repeat-->
      			<div id="rightinner2"> <!--padding-->
<!-- *********************************************************************************************************** 
rien de plus
************************************************************************************************************** -->		
					<?php
					if (JRequest::getVar('showselector') == "show"	){
	echo"show";/**************************************************************************************************show est ok. On est en haut et à gauche du wapper. L'echo sera à supprimer . La valeur de show selector vient de params.ini
**************************************************************************************************************	*/	
						if ($this->params->get('showselector') == "module" || $this->params->get('showselector') == "modRand" ) {
/* *********************************************************************************************************** 
echo "show selector module OK";	 	  n'apparait pas. C'est normal car show selector = show
**************************************************************************************************************	*/	
					?>
        					<div id="TopModule"> <!--widt 468-->
          						<jdoc:include type="modules" name="top" style="xhtml" />
        					</div>
        			<?php
						} else if ($this->params->get('showselector') == "show") {	  
/* *********************************************************************************************************** 
echo "show selector module NOT OK";		n'apparait pas. C'est normal car show selector = show
**************************************************************************************************************	*/	
					?>
<!-- ****************************************** affichage du selector **************************************** -->
        					<center>
        						<h1 style="text-align: center;">S&#233lectionnez votre fond d'&#233;cran</h1>
        						<br />
		  			<?php
						echo "<a href=\"javascript:chooseStyle('none', 60)\" checked=\"checked\" /><img src=\"".$this->baseurl."/templates/transparent_bliss_1.5/background_images/thumb".$this->params->get('defaultimage').".jpg\" alt=\"background image ".$this->params->get('defaultimage')."\" border=\"0\" class=\"bgthumbs\" /></a> \n";
								foreach (range(1, 6) as $bgimage) {
									if ($this->params->get('defaultimage') != $bgimage) {
										echo "<a href=\"javascript:chooseStyle('img".$bgimage."', 60)\" /><img src=\"".$this->baseurl."/templates/transparent_bliss_1.5/background_images/thumb".$bgimage.".jpg\" alt=\"background image ".$bgimage."\" border=\"0\" class=\"bgthumbs\" /></a> \n";
										} //fin du if
									} //fin du foreach
		  				?>
        					</center> 
					<?php 
						}
					}	?>	
<!-- ***************************************** fin affichage du selector ************************************* -->
        			<br>
                    <jdoc:include type="message" />
					<jdoc:include type="component" />
        			<div id="BottomModule"></div> <!--width 468-->
      			</div> <!--fin div id rightinner2-->
    		</div> <!--fin div id rightinner-->
    		<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/right-bottom.png" alt="" width="800" height="10" border="0" /></div> <!--bas du fond colonne droite-->
    		<div id="joomlabear"><a href="http://joomlabear.com/"><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/website-design-by-joomlabear.png" alt="JoomlaBear - Website Design" width="200" height="50" border="0" class="bear"  /></a></div><!--logo ours sous le fond-->
  		</div> <!--fin du right-->
	</div> <!--fin du wrapper-->
 
</body>
</html>

Connexion pour participer à la conversation.

20 Mar 2014 17:21 - 20 Mar 2014 17:25 #4 par informaticien51
si tu ne corriges pas les chemins, il y a peu de chance que cela fonctionnes correctement.
"/templates/transparent_bliss_1.5"

second point :
regardes dans l api joomla si ceci est toujours valide:
JRequest::getVar('showselector')
JRequest::setVar('showselector')


second point, tu obtiens quel résultat quand tu installe ton template sur un joomla 2.5 ?
une page blanche ou autre chose?

:P si tu met du java la dedans, tu ne vas pas t en sortir.
Regardes plutot du coté de javascript.... ^^

LA je vais voir pour recuperer les js directement sur ton site et voir pour adapter ceci dans beez....

Connexion pour participer à la conversation.

20 Mar 2014 19:53 - 20 Mar 2014 20:00 #5 par Kyos
Oui, ça ne peut pas marcher avec l'ancien code. Je l'étais trompé de copie. Voilà la bonne.
<?php 
	defined( '_JEXEC' ) or die( 'Restricted access' ); 
	/* the following line loads the Mootools JavaScript Library */
	JHtml::_('behavior.framework', true);
?>
 
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!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="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>"
 
<head>
	<meta name="google-site-verification" content="oFZIIyh_g9-Grnul0FOYar6jN6Ijf6ATAcaD2jdLi8M" />
    <meta name="norton-safeweb-site-verification" 		content="8e78lgngvtbc8hkfrm9gw05dudbi8o2om6q2ylpgycfgdx88h23yvhav4e1bjy77r13wy32-uw3qcgq3xxify08jst0wuc309nl229015mh959p3iu5agsqdthg0j--c" />
	<link href="<?php echo $this->baseurl ?>/templates/transparent_bliss_2.5/css/template.css" rel="stylesheet" type="text/css" />
	<?php
		if (JRequest::getVar('Itemid') == 1	)	{
			//echo "itemid = 1 ==> showselector = show";
			JRequest::setVar ('showselector', 'show');}
		else {
			//echo "itemid dif 1 ==> showselector = hide";	C'est OK
			JRequest::setVar ('showselector', 'hide');}
 
			if ($this->params->get('showselector') == "show") 
			{
				// echo "showselector=show";	C'est OK
				echo "<link href=\"".$this->baseurl."/templates/<?php echo $this->template ?>/css/img".$this->params->get('defaultimage').".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";
 
				//$cpt=0;				
				foreach (range(1, 6) as $bgimage) 
					/*$cpt = $cpt+1;
					echo $cpt;  le foreach fonctionne, et donc showselector=show*/ 
					{
					if ($this->params->get('defaultimage') != $bgimage) 
						{
							//$cpt = $cpt+1;
							//echo $cpt;  c'est OK donc defaultimage est différent de $bgimage
							echo "<link href=\"".$this->baseurl."/templates/<?php echo $this->template ?>/css/img".$bgimage.".css\" title=\"img".$bgimage."\" rel=\"alternate stylesheet\" type=\"text/css\" /> \n";
						}
					} //fin du foreach
				include ("imageswapper.php");  
			} 
				else if ($this->params->get('showselector') == "random" || $this->params->get('showselector') == "modRand") 
					{
						//echo "showselector = random"; FAUX, ce n'est pas random
						$randomImage  = "img";
						$randomImage .= rand(1, 6);
						echo "<link href=\"".$this->baseurl."/templates/<?php echo $this->template ?>/css/".$randomImage.".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";
					}
				else if ($this->params->get('showselector') == "hide" || $this->params->get('showselector') == "module") 
					{
						//echo "showselecteur = hide";  FAUX ce n'est pas non plus hide
						echo "<link href=\"".$this->baseurl."/templates/<?php echo $this->template ?>/css/img".$this->params->get('defaultimage').".css\" rel=\"stylesheet\" type=\"text/css\" /> \n";
					}
	?>
<!-- A l'issue du Head, la valeur de showselecteur est donc "show" et defaultimage n'est pas le contenu de $bgimage -->
 
<body> <!--height et width 100%-->	 
 
	<div id="wrapper"><!-- height 100% width 990-->		
	  	<div id="logo"></div> <!--float left height 500 widt 77--> 
		<div id="headwrap"> <!--height 90 with 980-->   
    		<div id="topbannerad"><jdoc:include type="modules" name="user5" style="xhtml" /></div> <!--float right	heigt 90 width 728-->
  		</div>
  		<div id="leftwrap"> <!--float left width 200-->
			<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_2.5/images/left-top.png" alt="top-slice" width="200" height="10" border="0" /></div>
    		<div id="left"> <!--width 200-->
      			<div id="leftinner2"> <!--marges-->
        			<jdoc:include type="modules" name="left" style="xhtml" />
					<!--<jdoc:include type="modules" name="user1" style="xhtml" /> -->
					<jdoc:include type="modules" name="user1" style="xhtml" />
      			</div>
    		</div>
    		<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_2.5/images/left-bottom.png" alt="" width="200" height="10" border="0" /></div>
  		</div> 
  		<div  id="right"> <!--float left width 600--> 
    		<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_2.5/images/right-top.png" border="0" alt="" width="800" height="10" border="0" /></div>
    		<div id="rightinner"> <!--width 600 backgroud repeat-->
      			<div id="rightinner2"> <!--padding--> 
 
					<?php 
	//echo "************************************RIGHTINNER2*************************************";	 
	//JRequest::setVar ('showselector', 'show');   avec ce setVar placé ici, le selecteur d'image apparaitrait mais n'est pas opérationnel
 
					if (JRequest::getVar('showselector') == "show"); /*la virgule n'a aucune raison d'être là! et pourtant, avec, le sélecteur apparaît! Et placée ailleurs, elle n'a aucun effet*/
						{ 
							if ($this->params->get('showselector') == "module" || $this->params->get('showselector') == "modRand" )
								{
								//echo "la valeur de Showselector n'est pas module ni modrand";
					?>
									<div id="TopModule"> <!--widt 468--> 
										<jdoc:include type="modules" name="top" style="xhtml" />
									</div>
        			<?php
								} 
							else if ($this->params->get('showselector') == "show") 
								{
								//echo "confirmation valeur showselector = show"; OK
					?>
								<center>
									<h1 style="text-align: center;">S&#233lectionnez votre fond d'&#233;cran</h1>
									<br />
		  			<?php
									echo "<a href=\"javascript:chooseStyle('none', 60)\" checked=\"checked\" /><img src=\"".$this->baseurl."/templates/transparent_bliss_2.5/background_images/thumb".$this->params->get('defaultimage').".jpg\" alt=\"background image ".$this->params->get('defaultimage')."\" border=\"0\" class=\"bgthumbs\" /></a> \n";
 
									foreach (range(1, 6) as $bgimage) 
									{
										if ($this->params->get('defaultimage') != $bgimage) {
											echo "<a href=\"javascript:chooseStyle('img".$bgimage."', 60)\" /><img src=\"".$this->baseurl."/templates/transparent_bliss_2.5/background_images/thumb".$bgimage.".jpg\" alt=\"background image ".$bgimage."\" border=\"0\" class=\"bgthumbs\" /></a> \n";
										} 
									} //fin du foreach
		  			?>
								</center>
					<?php 
						}
					}	?>
        			<br>
                    <jdoc:include type="message" />
<?php echo"**************************ICI*****************************************"?>					
					<jdoc:include type="component" />
<?php echo"**************************ICI*****************************************"?>					
        			<div id="BottomModule"></div> <!--width 468-->
      			</div> <!--fin div id rightinner2-->
    		</div> <!--fin div id rightinner-->
    		<div><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_2.5/images/right-bottom.png" alt="" width="800" height="10" border="0" /></div> <!--bas du fond colonne droite-->
    		<div id="joomlabear"><a href="http://joomlabear.com/"><img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_2.5/images/website-design-by-joomlabear.png" alt="JoomlaBear - Website Design" width="200" height="50" border="0" class="bear"  /></a></div><!--logo ours sous le fond-->
  		</div> <!--fin du right-->
	</div><!-- fin du wrapper-->
</body>
</html>

Et voilà ce que j'obtiens actuellement (en pièce jointe)

Les problèmes qui sont en suspend:
- le sélecteur s'affiche mais ne rempli pas sa fonction.
- les articles en blog de la page ne s'affichent pas sur 2 colonne, alors que le paramétrage le spécifie correctement et que
<jdoc:include type="component" />
est bien en place.
- j'ai triché pour afficher l'image de fond, je me suis servi de la propriété background de body, sinon je n'arrive pas à l'afficher. Mais ainsi, le background ne pourra pas être modifié.

Voilà l'état des lieux. Je te remercie de ton soutient.
Pièces jointes :

Connexion pour participer à la conversation.

20 Mar 2014 20:14 - 20 Mar 2014 20:20 #6 par informaticien51
ton javascript est incomplet, si j en croit ton site :
(verifies les liens vers les chemins).
ajoutes ceci dans ton fichier index.php :
juste au dessus de cette ligne:
<link href="<?php echo $this->baseurl ?>/templates/transparent_bliss_2.5/css/template.css" rel="stylesheet" type="text/css" />
script à ajouter :
<script type="text/javascript" language="javascript">
<!--
//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here///////////
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
if (document.images) {
pic2= new Image(1440,892);
pic2.src="/templates/transparent_bliss_1.5/images/sunset.jpg";
}
-->
</script>

Connexion pour participer à la conversation.

Temps de génération de la page : 0.221 secondes

Sur ce site, nous utilisons des cookies.