1. Fórum
  2. /
  3. Suporte Joomla
  4. /
  5. Templates
  6. /
  7. Joomla 1.5
  8. /
  9. Alterar Background Jquery

Alterar Background Jquery

  • webcaju
  • Avatar de webcaju Autor do Tópico
  • Offline
  • JCB! Senior
  • JCB! Senior
Mais
14 anos 9 meses atrás #42141 por webcaju
webcaju created the topic: Alterar Background Jquery
Olá galera, bom achei uma forma de alterar o background com Jquery consigo fazer funcionar em uma HTML normal mas no joomla não consigo, espero que possam me ajudar, segue o que estou fazendo:

index.php:
<?php 
	
	defined( '_JEXEC' ) or die ( 'Restricted Access' );

?>

<!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>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/default.js"></script>
<jdoc:include type="head" />
<?php $this->setGenerator('Caju Comunica&#231;&#227;o &#38; Design - Criação de Sites &#38; Marketing Digital'); ?>
<?php include_once (JPATH_SITE.'/templates/includesglobal/metatags.php'); ?>
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/960.css" media = "all" type = "text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css" media = "all" type = "text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/joomla.css" media = "all" type = "text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/site.css" media = "all" type = "text/css" />
</head>

<body>

	<h1><a href="http://www.mulheresdobola.com.br/">Mulheres do Bola</a></h1>
	
	<div id = "total" class = "container_16" title = "Mulheres do Bola">

		<div id = "fundo" class = "grid_16" title = "Mulheres do Bola" align = "right">
			<a href = "" class = "switchCss" rel = "outono.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/outono.png" alt = "Outono" title = "Outono" style = "display = block;"></a>
			<a href = "" class = "switchCss" rel = "inverno.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/inverno.png" alt = "Inverno" title = "Inverno" style = "display = block;"></a>
			<a href = "" class = "switchCss" rel = "primavera.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/primavera.png" alt = "Primavera" title = "Primavera" style = "display = block;"></a>
			<a href = "" class = "switchCss" rel = "verao.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/verao.png" alt = "Ver&#227;o" title = "Ver&#227;o" style = "display = block;"></a>
		</div>
.
.
.

Bom eu fiz a chamada da biblioteca jquery-1.4.4.js, o plugin jquery.cookie.js e o script para alterar o background default.js todos esses arquivos estão no diretório scripts dentro do meu template.
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/default.js"></script>

Links para alterar o background:
		<div id = "fundo" class = "grid_16" title = "Mulheres do Bola" align = "right">
			<a href = "" class = "switchCss" rel = "outono.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/outono.png" alt = "Outono" title = "Outono" style = "display = block;"></a>
			<a href = "" class = "switchCss" rel = "inverno.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/inverno.png" alt = "Inverno" title = "Inverno" style = "display = block;"></a>
			<a href = "" class = "switchCss" rel = "primavera.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/primavera.png" alt = "Primavera" title = "Primavera" style = "display = block;"></a>
			<a href = "" class = "switchCss" rel = "verao.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/verao.png" alt = "Ver&#227;o" title = "Ver&#227;o" style = "display = block;"></a>
		</div>

Acima descrevi o index.php

Agora vou mostrar o código default.js pois os outros dois são a biblioteca jquery e o plugin do cookie:

default.js:
/**
 * Função inicial - Responsavel por trocar o css da pagina e gravar no cookie
 */
function init()
{
	// Verifica se existe nome css gravado no cookie(css)
	if($.cookie('css')) {
		// Troca css pelo nome que esta no cookie(css) com a pasta css/
		$('link&#91;rel=stylesheet&#93;').attr('href', 'css/' + $.cookie('css'));
	}

	// Escuta click nos botoes de trocar css
	$(".switchCss").click(function() {
		// Troca css pelo nome que esta no parametro REL dentro do <a> com a pasta css/
    	$('link&#91;rel=stylesheet&#93;').attr('href' , 'css/' + $(this).attr('rel'));
		
		// Grava nome do css no cookie(css), expira 7 dias, funciona todas paginas cookie
		$.cookie('css',$(this).attr('rel'), {expires: 7, path: '/'});
		return false;
    });
}

// Quando a pagina estiver carregada chama a funcao init.
$(document).ready(init);

Bom os css tenho outono.css, inverno.css, primavera.css e verao.css nesses arquivos só tenho o body alterando a imagem e a cor dofundo apenas isso.

Eu creio que o problema esta no default.js ou na chamada, eu não entendo muito de Jquery espero que alguem tenha uma luz...

Valew...

Please Entrar ou Registrar to join the conversation.


  • webcaju
  • Avatar de webcaju Autor do Tópico
  • Offline
  • JCB! Senior
  • JCB! Senior
Mais
14 anos 9 meses atrás #42447 por webcaju
webcaju replied the topic: Re: Alterar Background Jquery
Olá Galera depois de muitas pesquisas e ajuda de amigos eis a solução bom vou compartilhar com todos essa solução...
<head>
.
.
.
<script type="text/javascript">
   function createCookie(name, value, days) {
      if (days) {
         var date = new Date();
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
         var expires = "; expires=" + date.toGMTString();
      } else
      var expires = "";
      document.cookie = name + "=" + value + expires + "; path=/";
   }

   function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
         var c = ca&#91;i&#93;;
         while (c.charAt(0) == ' ') c = c.substring(1, c.length);
         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
   }

   function eraseCookie(name) {
      createCookie(name, "", -1);
   }

   var fundo = readCookie("css");
   if (fundo != null) {
      document.getElementsByTagName("body")&#91;0&#93;.className = fundo;
   }

   function mudaFundo(classe) {
      document.getElementsByTagName("body")&#91;0&#93;.className = classe;
      createCookie("css",classe,7);
   }
</script>
.
.
.
</head>

<body class = "bg1">


         <a onclick = "mudaFundo('bg1');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/outono.png" alt = "Outono" title = "Outono" style = "display = block;"></a>
         <a onclick = "mudaFundo('bg2');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/inverno.png" alt = "Inverno" title = "Inverno" style = "display = block;"></a>
         <a onclick = "mudaFundo('bg3');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/primavera.png" alt = "Primavera" title = "Primavera" style = "display = block;"></a>
         <a onclick = "mudaFundo('bg4');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/verao.png" alt = "Ver&#227;o" title = "Ver&#227;o" style = "display = block;"></a>
.
.
.

Quem quiser ver o resultado acesse http://www.joomlacampogrande.com.br/sit ... resdobola/

Bom é isso...minha ultima contribuição do ano hehehe...Feliz ano novo a Todos...

Please Entrar ou Registrar to join the conversation.

  1. Fórum
  2. /
  3. Suporte Joomla
  4. /
  5. Templates
  6. /
  7. Joomla 1.5
  8. /
  9. Alterar Background Jquery
Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates