Autore Topic: [RISOLTO] Modifica effetto fade tempalte Paltine45 per Joomla 2.5 (Letto 1901 volte)

Lorenzo Castellan · « **il:** 02 Mar 2012, 10:28:02 »

Gentili esperti,
ho modificato il template Platine 45 per Joomla 2.5. Le modifiche sono state fatte sia sull'HTML che sui CSS al fine di sdoppiare il div con l'effetto fade in JS. Nel secondo div ho anche aggiunto le due variabili "speed2" e "autoplay2" nuove per gestire indipendentemente quando iniziare l'effetto e con che velocità. Sono riuscito a duplicare su due div l'effetto fade ma non riesco a diversificare la velocità e l'autoplay. Il sito lo trovate a questo indirizzo: www.laboratoriocreativo.it. Di seguito vi posto il codice modificato dell'index:

Codice: [Seleziona]




<?php
/****************************************************
#####################################################
##-------------------------------------------------##
##           PLATINE45- Version 1.6.0              ##
##-------------------------------------------------##
## Copyright = globbersthemes.com- 2011            ##
## Date      = Avril 2011                          ##
## Author    = globbers                            ##
## Websites  = http://www.globbersthemes.com       ##
## license   = commercial license                  ##
#####################################################
****************************************************/


// no direct access
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; ?>" dir="<?php echo $this->direction; ?>" >


<head>


   <jdoc:include type="head" />
   <?php JHTML::_('behavior.framework', true); 
   $app                = JFactory::getApplication();
   $templateparams     = $app->getTemplate(true)->params;
   ?>
   
   <?php //setting slide fading
    $speed= $this->params->get("speed", "600");
    $autoplay= $this->params->get("autoplay", "5000");
   $license   = "globbersthemes.com";
   $csite_name   = $app->getCfg('sitename');
    ?>
    
       <?php //setting slide fading
    $speed2= $this->params->get("speed", "600");
    $autoplay2= $this->params->get("autoplay", "50000");
   $license   = "globbersthemes.com";
   $csite_name   = $app->getCfg('sitename');
    ?>
   
   <?php //main width 
    $mod_right = $this->countModules( 'position-7' );
    if ( $mod_right ) {
   $longueur = '';
    } else {
   $longueur = '-full';}
    ?>
   
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/platine45-1.6/css/tdefaut.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/platine45-1.6/css/box.css" type="text/css" media="all" />
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/mootools.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/cufon-replace.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/KabelCTT_Ultra_400.font.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/faded.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/script.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/scroll.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/lytebox.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/platine45-1.6/css/lytebox.css" type="text/css" />


<!--[if IE 8]>
<link href="templates/<?php echo $this->template ?>/css/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->


<script type="text/javascript">
        window.addEvent('domready', function() {
        SqueezeBox.initialize({});
        $$('a.modal').each(function(el) {
            el.addEvent('click', function(e) {
                new Event(e).stop();
                 SqueezeBox.fromElement(el);
            });
         });
      });
    </script>
      


</head>
<body>
    <div class="pagewidth">
       <div id="sitename">
             
        <>
      
      <div id="topmenu">
           <div id="navigation">
             <ul class="nav">
                <jdoc:include type="modules" name="position-1"  />
                </ul>
           <>
       <>
         <div id="slide">


         <div id="photo_cont">
   <ul>
                            <li><img src="templates/<?php echo $this->template ?>/images/beauty.png" alt="" /></li>
                            <li><img src="templates/<?php echo $this->template ?>/images/giardino_solare.png" alt="" /></li>
                            <li><img src="templates/<?php echo $this->template ?>/images/medical.png" alt="" /></li>
   </ul>


         <>
                  <div id="photo_cont2">
   <ul>
                            <li><img src="templates/<?php echo $this->template ?>/images/termes_andrea.png" alt="" /></li>
                            <li><img src="templates/<?php echo $this->template ?>/images/home.png" alt="" /></li>
   </ul>


         <>
          
               <>


                <script type="text/javascript">
                         var $j = jQuery.noConflict();
          $j(function(){
                         $j("#photo_cont").faded({
                              speed:<?php echo $speed ?>,// 900,
                              crossfade: true,
                              autopagination: false,
                              autoplay: <?php echo $autoplay ?>,//default 5000,
                              autorestart: true
                         });
                         });
                   </script>
                                   <script type="text/javascript">
                         var $j = jQuery.noConflict();
          $j(function(){
                         $j("#photo_cont2").faded({
                              speed:<?php echo $speed2 ?>,// 900,
                              crossfade: true,
                              autopagination: false,
                              autoplay: <?php echo $autoplay2 ?>,//default 5000,
                              autorestart: true
                         });
                         });
                   </script>
                 <div id="tool">
                   <div id="loginbt">
                            <div  class="text-login">   <a href="#helpdiv" class="modal"  style="cursor:pointer" title="Login"  rel="{size: {x: 206, y: 333}, ajaxOptions: {method: &quot;get&quot;}}">
                               [/url]
                       <>
                       <>
                        <div style="display:none;">
                             <div id="helpdiv" >
                                <jdoc:include type="modules" name="login" style="xhtml" />
                            <>
                        <>
               <>
                  <div id="search-wrapper">
                  <p></p>
                  <p></p>


                  Copyright&copy; <?php echo date( 'Y' ); ?> <?php echo $csite_name;?>


                  <?php if($this->countModules('position-0')) : ?>
                      <div id="search">
                                <jdoc:include type="modules" name="position-0" />
                            <>
                  <>
                    <?php endif; ?>
                        <div id="main<?php echo $longueur; ?>">
                         <jdoc:include type="component" />
                      <>
                     
                     <?php if($this->countModules('position-7')) : ?>
                        <div id="right">
                                <jdoc:include type="modules" name="position-7" style="xhtml" />
                            <>
                       <?php endif; ?>
                        <div id="footer">
                        <div id="footer_tm">
                              <div class="ftb">
                                         
                            <>
                         <>
                                    <div id="top">
                                        <div class="top_button">
                                            
                                        <>
                                  <>
                     <>
                  <>
   
                                   
</body>
</html>

Qualche idea su come gestire i due fade indipendentemente?
Grazie.

Chast

Lorenzo Castellan · « **Risposta #1 il:** 02 Mar 2012, 15:18:42 »

RISOLTO!!!
Era sufficiente sostituire, nei parametri di configurazione nell'index, i richiami alle variabili speed, autoplay, speed2 e autoplay2 direttamente con valori espressi in millisecondi:

Codice: [Seleziona]


<script type="text/javascript">
                         var $j = jQuery.noConflict();
			 $j(function(){
                         $j("#photo_cont").faded({
						            speed: 900,// 900,
						            crossfade: false,
						            autopagination: false,
						            autoplay: 5000,//default 5000,
						            autorestart: true
				             });
                         });
	                </script>
	                				    <script type="text/javascript">
                         var $j = jQuery.noConflict();
			 $j(function(){
                         $j("#photo_cont2").faded({
						            speed: 900,// 900,
						            crossfade: false,
						            autopagination: false,
						            autoplay: 7500,//default 5000,
						            autorestart: true
				             });
                         });
	                </script>

Ecco fatto, i due fade non più sincronizzati di 1/4 di secondo!

Chast

Autore Topic: [RISOLTO] Modifica effetto fade tempalte Paltine45 per Joomla 2.5 (Letto 1901 volte)

Lorenzo Castellan

[RISOLTO] Modifica effetto fade tempalte Paltine45 per Joomla 2.5

Lorenzo Castellan

[RISOLTO] Modifica effetto fade tempalte Paltine45 per Joomla 2.5