Jquery Fade Header

Area dedicata alle guide di phpBB 3
Rispondi
Avatar utente
Moloch
Veteran
Veteran
Connesso: No
Messaggi: 1067
Iscritto il: 13/06/2012, 0:35
Versione phpBB3: 3.2.2
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: http://twawi.altervista.org/forum/index.php

Jquery Fade Header

Messaggio da Moloch » 23/06/2012, 23:31

Nome : Jquery Fade Header

Versione : 1.0.0

Autore : Slash

Versione PHPBB : 3.0.X

Descrizione : Aggiunge un effetto dissolvenza sul background del header e permette di alternare infinite immagini di background.

Apri:
styles/prosilver/template/overall_header.html

trova:

Codice: Seleziona tutto

</head>
aggiungi prima:

Codice: Seleziona tutto

<!--fade-header by Slash www.wiizard.it-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
    $(document).ready(function(){
                
                var imgArr = new Array( // path immagini
                   '{T_THEME_PATH}/images/bgheader.gif',
                        '{T_THEME_PATH}/images/bgheader1.gif',
                        '{T_THEME_PATH}/images/bgheader2.gif'
                   );
                   
                var preloadArr = new Array();
                var i;
                
                /* preload immagini*/
                for(i=0; i < imgArr.length; i++){
                   preloadArr[i] = new Image();
                   preloadArr[i].src = imgArr[i];
                }
                
                var currImg = 1;
                var intID = setInterval(changeImg, 60000); // l' immagine cambia ogni: in millisecondi /
                
                function changeImg(){
                   $('.headerbar').animate({opacity: 0}, 1, function(){
                      $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')');
                   }).animate({opacity: 1}, 1000);
                }
     
             });
    </script>
    <!--fade-header by Slash www.wiizard.it-->
se hai gia incluso Jquery elimina questa linea:

Codice: Seleziona tutto

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
modifica il seguente codice per aggiungere nuove immagini al tuo header:

Codice: Seleziona tutto

'{T_THEME_PATH}/images/bgheader.gif',
                        '{T_THEME_PATH}/images/bgheader1.gif',
                        '{T_THEME_PATH}/images/bgheader2.gif'
ricordati di non inserire la virgola dopo l' ultima immagine.

infine vuota la cache.
questa linea regola i tempi di cambiamento velocità

Codice: Seleziona tutto

var intID = setInterval(changeImg, 60000); // l' immagine cambia ogni: in millisecondi /



Avatar utente
marco69
Trusted
Trusted
Connesso: No
Messaggi: 94
Iscritto il: 15/11/2012, 23:27
Versione phpBB3: 3.0.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum:
Località: Firenze
Contatta:

Re: Jquery Fade Header

Messaggio da marco69 » 02/02/2013, 18:15

Ciao ragazzi ho provato ad inserirla ma non funziona, ho inserito le immagini in mozilla/theme/images/header

questo è il mio header

Codice: Seleziona tutto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="usa, america, stati uniti america, stati uniti, viaggi, vacanze, alberghi, hotel, motel, auto, noleggio, aerei, prenota hotel, prenota voli, prenota vacanza, mappe, cartine, pdf, web cam, meteo, weather, maps, noleggio auto, alabama, arizona, arkansas, california, alaska, colorado, connecticut, delaware, florida, georgia, idaho, illinois, iowa, indiana, hawaii, kentucky, louisiana, kansas, ufo, maine, maryland, massachusetts, michigan, minnesota, mississippi, missouri, montana, nebraska, new jersey, new mexico, new york, nevada, new hampshire, bruce springsteen, american music, musica, on the road, america on the road, sogno americano, sogno, targhe, film, hollywood, north carolina, north dakota, ohio, oklahoma, indiani, nativi, pellerossa, oregon, pennsylvania, rhode island, south carolina, south dakota, tennessee, texas, utah, vermont, virginia, washington, dc, west virginia, wisconsin, wyoming, US, virgin island, puerto rico, los angeles, san francisco, big sur, santa monica, disneyland, las vegas, chicago, phildelphia, filadelfia, miami, orlando, grand canyon, national park, parchi nazionali, parchi nazionali americani, natura, hiking, trails, trekking, yellowstone, yosemite, monument valley, bryce canyon, new england, keys, key west, blues, jazz, soul, country, niagara, niagara falls, buffalo, bston, newport, fall foliage, grand circle, real america, badlands, black hills, crazy horse, mount rushmore, cheyenne, denver, lax, jfk, storia americana, food, cibo americano, locali americani, moda, shopping, immigrazione" />
<meta name="description" content="" />
<meta name="google-site-verification" content="hp-vTDkQsnsin_acpM_GarrKGWxmzusN-5txWh1_ULI" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />{META}
<title>FORUMVACANZEINAMERICA &bull; IL PIU GRANDE SPETTACOLO SIAMO NOI &bull;</title>
<script type="text/javascript">
var tapatalkdir="{MOBIQUO_NAME}";
var tapatalk_ipad_msg = '{TAPATALK_IPAD_MSG}';
var tapatalk_ipad_url  = '{TAPATALK_IPAD_URL}';
var tapatalk_iphone_msg = '{TAPATALK_IPHONE_MSG}';
var tapatalk_iphone_url  = '{TAPATALK_IPHONE_URL}';
var tapatalk_android_msg = '{TAPATALK_ANDROID_MSG}';
var tapatalk_android_url  = '{TAPATALK_ANDROID_URL}';
var tapatalk_kindle_msg = '{TAPATALK_KINDLE_MSG}';
var tapatalk_kindle_url  = '{TAPATALK_KINDLE_URL}';
var tapatalk_chrome_enable = '{TAPATALK_CHROME_ENABLE}';
</script>
<script type="text/javascript" src="{TAPATALKDETECT_JS}"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<!-- IF (S_TSRAT_ENABLE and S_TS_JSSCROLL) or (S_TSRAT_ENABLE and S_TS_TICKER) -->
<script src="{ROOT_PATH}script/jquery.min.js" type="text/javascript"></script>
<!-- IF S_TS_JSSCROLL and not S_TS_TICKER -->
<script src="{ROOT_PATH}script/jquery.totemticker.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
	$('#vertical-ticker').totemticker({
				row_height	:	'41px',
				max_items   :   3,
				speed       :   {JSSCROLL_SPEED},
				interval    :   {JSSCROLL_INTERVAL},
				<!-- IF TS_JSSCROLL_NAVIGATION -->
				next		:	'#ticker-next',
				previous	:	'#ticker-previous',
				stop		:	'#stop',
				start		:	'#start',
				<!-- ENDIF -->
				mousestop	:	true,
				direction	:	'<!-- IF TS_JSSCROLL_DIRECTION -->down<!-- ELSE -->up<!-- ENDIF -->'
	});
});
// ]]>
</script>
<!-- ELSEIF S_TS_TICKER and not S_TS_JSSCROLL -->
<script src="{ROOT_PATH}script/jquery.newsticker.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
	$("#news").newsTicker();
});
// ]]>
</script>
<!-- ENDIF -->
<script>
 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7383848-2']);
  _gaq.push(['_setDomainName', 'forumvacanzeinamerica.it']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:

	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
<!-- INCLUDE reimg_content.html -->
<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
<script src="rainbow.js" type="text/javascript">
/*
Rainbow Links Script- TAKANASHI Mizuki
For full source code, 100's more DHTML scripts, and TOS, 
Visit http://www.dynamicdrive.com
*/
</script>
<
</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
    <ul class="menu">  
  
</ul>
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
            
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

			<span class="corners-bottom"><span></span></span></div>
		</div>
       
		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">

				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_TOPLIST --><li class="icon-thanks_toplist"><a href="{U_REPUT_TOPLIST}" title="{L_REPUT_TOPLIST}">{L_REPUT_TOPLIST}</a></li><!-- ENDIF -->
				<!-- IF S_DISPLAY_THANKSLIST --><li class="icon-thanks"><a href="{U_THANKSLIST}" title="{L_THANKS_USER}">{L_GRATITUDES}</a></li><!-- ENDIF -->					
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>
			<span class="corners-bottom"><span></span></span></div>
		</div>

	</div>

	<a name="start_here"></a>
	<div id="page-body">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
<p>&nbsp;</p>
<center><script src="http://h2.flashvortex.com/display.php?id=2_1351874466_61951_724_26784_728_90_8_2_97" type="text/javascript"></script></center>
<p>&nbsp;</p>
<center><a href="./feed.php"><img src="{T_THEME_PATH}/images/feed_natale.png" alt="RSS" /></a>
<a href="http://www.facebook.com/vacanzeinamerica"><img src="{T_THEME_PATH}/images/facebook_natale.png" alt="Facebook" /></a>
<a href="https://twitter.com/FORUMVIA"><img src="{T_THEME_PATH}/images/Twitter.png" alt="Twitter" /></a>
<a href="https://plus.google.com/100697439582147835992/posts"><img src="{T_THEME_PATH}/images/G+.png" alt="G+" /></a>
<a href="http://forumvacanzeinamerica.it/radio.php?"><img src="{T_THEME_PATH}/images/radio.gif" alt="radio" /></a>
<p>&nbsp;</p>
<center></center><a href="http://s1176.photobucket.com/albums/x327/forumvacanzeinamerica/?action=view&current=5MILIONi.jpg" target="_blank"><img src="http://i1176.photobucket.com/albums/x327/forumvacanzeinamerica/5MILIONi.jpg" border="0" alt="5MILIONi"></a>
</div>
</body>
</html>
questo è il codice modificato che richiama le immagini

Codice: Seleziona tutto

<!--fade-header by Slash www.wiizard.it-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
    $(document).ready(function(){
                
                var imgArr = new Array( // path immagini
                   '{T_THEME_PATH}/images/bgheader.gif',
                        '{T_THEME_PATH}/images/bgheader1.gif',
                        '{T_THEME_PATH}/images/bgheader2.gif',
'{T_THEME_PATH}/images/bgheader3.gif',
'{T_THEME_PATH}/images/bgheader4.gif',
'{T_THEME_PATH}/images/bgheader5.gif',
'{T_THEME_PATH}/images/bgheader6.gif',   
'{T_THEME_PATH}/images/bgheader7.gif',
'{T_THEME_PATH}/images/bgheader8.gif',
'{T_THEME_PATH}/images/bgheader9.gif',
'{T_THEME_PATH}/images/bgheader10.gif', 
'{T_THEME_PATH}/images/bgheader11.gif',
'{T_THEME_PATH}/images/bgheader12.gif',
'{T_THEME_PATH}/images/bgheader13.gif',
'{T_THEME_PATH}/images/bgheader14.gif', 
'{T_THEME_PATH}/images/bgheader15.gif',
'{T_THEME_PATH}/images/bgheader16.gif',
'{T_THEME_PATH}/images/bgheader17.gif',
'{T_THEME_PATH}/images/bgheader18.gif', 
'{T_THEME_PATH}/images/bgheader19.gif',
'{T_THEME_PATH}/images/bgheader20.gif',
'{T_THEME_PATH}/images/bgheader21.gif',
'{T_THEME_PATH}/images/bgheader22.gif',   
'{T_THEME_PATH}/images/bgheader23.gif',
'{T_THEME_PATH}/images/bgheader24.gif',
'{T_THEME_PATH}/images/bgheader25.gif',
'{T_THEME_PATH}/images/bgheader26.gif', 
'{T_THEME_PATH}/images/bgheader27.gif',
'{T_THEME_PATH}/images/bgheader28.gif',
'{T_THEME_PATH}/images/bgheader29.gif',
'{T_THEME_PATH}/images/bgheader30.gif', 
'{T_THEME_PATH}/images/bgheader31.gif',
'{T_THEME_PATH}/images/bgheader32.gif',
'{T_THEME_PATH}/images/bgheader33.gif',
'{T_THEME_PATH}/images/bgheader34.gif', 
'{T_THEME_PATH}/images/bgheader35.gif',
'{T_THEME_PATH}/images/bgheader35.gif',
'{T_THEME_PATH}/images/bgheader36.gif',   
'{T_THEME_PATH}/images/bgheader37.gif',
'{T_THEME_PATH}/images/bgheader38.gif',
'{T_THEME_PATH}/images/bgheader39.gif',
'{T_THEME_PATH}/images/bgheader40.gif', 
'{T_THEME_PATH}/images/bgheader41.gif',
'{T_THEME_PATH}/images/bgheader42.gif',
'{T_THEME_PATH}/images/bgheader43.gif',

             
 );
                   
                var preloadArr = new Array();
                var i;
                
                /* preload immagini*/
                for(i=0; i < imgArr.length; i++){
                   preloadArr[i] = new Image();
                   preloadArr[i].src = imgArr[i];
                }
                
                var currImg = 1;
                var intID = setInterval(changeImg, 60000); // l' immagine cambia ogni: in millisecondi /
                
                function changeImg(){
                   $('.headerbar').animate({opacity: 0}, 1, function(){
                      $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')');
                   }).animate({opacity: 1}, 1000);
                }
     
             });
    </script>
    <!--fade-header by Slash www.wiizard.it-->
Grazie per l' aiuto

Avatar utente
Moloch
Veteran
Veteran
Connesso: No
Messaggi: 1067
Iscritto il: 13/06/2012, 0:35
Versione phpBB3: 3.2.2
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: http://twawi.altervista.org/forum/index.php

Re: Jquery Fade Header

Messaggio da Moloch » 02/02/2013, 18:20

Le immagini vanno inserite nel percorso

styles/tuo_stile/theme/images

Avatar utente
marco69
Trusted
Trusted
Connesso: No
Messaggi: 94
Iscritto il: 15/11/2012, 23:27
Versione phpBB3: 3.0.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum:
Località: Firenze
Contatta:

Re: Jquery Fade Header

Messaggio da marco69 » 02/02/2013, 19:04

Grazie Molok, provo

Avatar utente
marco69
Trusted
Trusted
Connesso: No
Messaggi: 94
Iscritto il: 15/11/2012, 23:27
Versione phpBB3: 3.0.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum:
Località: Firenze
Contatta:

Re: Jquery Fade Header

Messaggio da marco69 » 02/02/2013, 19:11

Niente da fare, anche cancellando la cartella header dove è l' immagine del titolo rimane bianco

Avatar utente
Moloch
Veteran
Veteran
Connesso: No
Messaggi: 1067
Iscritto il: 13/06/2012, 0:35
Versione phpBB3: 3.2.2
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: http://twawi.altervista.org/forum/index.php

Re: Jquery Fade Header

Messaggio da Moloch » 02/02/2013, 19:30

di che dimensioni ai fatto le immagini 950x200 o cosa?

Avatar utente
marco69
Trusted
Trusted
Connesso: No
Messaggi: 94
Iscritto il: 15/11/2012, 23:27
Versione phpBB3: 3.0.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum:
Località: Firenze
Contatta:

Re: Jquery Fade Header

Messaggio da marco69 » 02/02/2013, 19:54

1260x200
Non è x caso che questo tema vada a cercare l' immagine nella cartella header ?

Avatar utente
Dr.House
Amministratore
Amministratore
Connesso: No
Messaggi: 2175
Iscritto il: 08/01/2012, 8:24
Versione phpBB3: 3.2.1
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: www.phpbb-store.it
Località: Reggio Calabria
Contatta:

Re: Jquery Fade Header

Messaggio da Dr.House » 03/02/2013, 12:53

Marco, le immagini vanno caricate dentro style/tuostile/theme/images non header e non funziona perchè nel codice che hai postato c'e' un errore.

Codice: Seleziona tutto

'{T_THEME_PATH}/images/bgheader43.gif',
sull'ultima immagine la virgola NON va messa e comunque assicurati che le immagini abbiano il nome e l'estensione corretta.
Facci sapere. :ciao:

Avatar utente
marco69
Trusted
Trusted
Connesso: No
Messaggi: 94
Iscritto il: 15/11/2012, 23:27
Versione phpBB3: 3.0.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum:
Località: Firenze
Contatta:

Re: Jquery Fade Header

Messaggio da marco69 » 03/02/2013, 18:03

Mimmo stasera ci provo e ti faccio sapere
Ps su FVIA hanno ricominciato a votare

Avatar utente
Afree
Registered User
Registered User
Connesso: No
Messaggi: 36
Iscritto il: 19/03/2013, 11:11
Versione phpBB3: 3.0.11
Stile utilizzato: Derivato dal Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum:
Contatta:

Re: Jquery Fade Header

Messaggio da Afree » 08/07/2013, 10:24

Codice: Seleziona tutto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>
<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->
<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->
<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
	<!--NodeFire API Script Reference-->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/js/api.js"></script>

	<!--Pure CSS Core (menu widget)-->
	<!--[if lte IE 6]><style type="text/css">.nfPure .nfItem{width:0px;}</style><![endif]-->
	<!--[if lte IE 7]><style type="text/css">.nfMain,.nfMain .nfLink,.nfMain .nfSubS{zoom:1;}.nfPure .nfLink:hover{z-index:1101;}.nfPure .nfItem{display:inline !important;}</style><![endif]-->
	<link rel="stylesheet" href="{T_THEME_PATH}/menu_core.css" type="text/css">

	<!--Style Skin (menu widget)-->
	<link rel="stylesheet" href="{T_THEME_PATH}/menu_simple.css" type="text/css">

	<!--Custom Styles-->

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

    <!--fade-header by Slash http://www.wiizard.it-->
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript">
        $(document).ready(function(){
                   
                    var imgArr = new Array( // path immagini
                       '{T_THEME_PATH}/images/bgheader.png',
                            '{T_THEME_PATH}/images/bgheader1.png',                        
                            '{T_THEME_PATH}/images/bgheader2.png' 
                       );
                       
                    var preloadArr = new Array();
                    var i;
                   
                    /* preload immagini*/
                    for(i=0; i < imgArr.length; i++){
                       preloadArr[i] = new Image();
                       preloadArr[i].src = imgArr[i];
                    }
                   
                    var currImg = 1;
                    var intID = setInterval(changeImg, 60000); // l' immagine cambia ogni: in millisecondi /
                   
                    function changeImg(){
                       $('.headerbar').animate({opacity: 0}, 1, function(){
                          $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')');
                       }).animate({opacity: 1}, 1000);
                    }
         
                 });
        </script>
        <!--fade-header by Slash http://www.wiizard.it-->




</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<!-- Borders 1/4 -->
    <div class="outside">
    <div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
    <div class="inside">
    <div class="notopgap">
<!-- Borders 2/4 -->

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

          <div class="menu-block" style="float: {S_CONTENT_FLOW_END}; width: 19%;">
             <div class="menu-row-first"><a class="left menu-link" href="https://www.facebook.com/HeXTeamItalia">Facebook</a></div>
             <div class="menu-row"><a class="left menu-link" href="https://www.youtube.com/user/HeXTeamItalia?feature=watch">YouTube</a></div>
             <div class="menu-row"><a class="left menu-link" href="https://twitter.com/HeXTeamItalia">Twitter</a></div>
             <div class="menu-row"><a class="left menu-link" href="http://www.esl.eu/it/lol/team/6235410/">ESL</a></div>
             <div class="menu-row"><a class="left menu-link" href="http://it.twitch.tv/hexteamitalia">Twitch TV</a></div>
             <div class="menu-row"><a class="left menu-link" href="mailto:support@hexteamitalia.it">Contact US</a></div>
             <div class="menu-row-last">
			 <br />
			 <div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
				<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
				<input class="button2" value="{L_SEARCH}" type="submit" /><br />
				<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div></div>
          </div>
          <div style="float: {S_CONTENT_FLOW_BEGIN}; width: 79.5%;">
			
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
					<h1>{SITENAME}</h1>
				{SITE_DESCRIPTION}
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
		
    </div>
		
			<span class="corners-bottom" style="height:0px;"></span></div>
		</div>
<ul id="myMenu" class="nfMain nfPure">

	<li class="nfItem"><a class="nfLink" href="{U_INDEX}">{L_INDEX}</a></li>
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->    
	<li class="nfItem"><a class="nfLink" href="{U_PROFILE}">{L_PROFILE}</a></li>
<!-- IF S_DISPLAY_PM -->    
	<li class="nfItem"><a class="nfLink" href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li>    
<!-- ENDIF -->
<!-- IF S_DISPLAY_SEARCH -->
	<li class="nfItem"><a class="nfLink" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>  
<!-- ENDIF -->    
<!-- IF U_RESTORE_PERMISSIONS -->
	<li class="nfItem"><a class="nfLink" href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li>  
<!-- ENDIF -->
<!-- ENDIF -->
	<li class="nfItem"><a class="nfLink" href="#">Links</a>		
                        <div class="nfSubC nfSubS">
			<div class="HeX Media">HeX Media</div>
			<div class="nfItem"><a class="nfLink" href="https://www.facebook.com/HeXTeamItalia">Facebook</a></div>
			<div class="nfItem"><a class="nfLink" href="https://www.youtube.com/user/HeXTeamItalia?feature=watch">YouTube</a></div>
			<div class="nfItem"><a class="nfLink" href="https://twitter.com/HeXTeamItalia">Twitter">Twitter</a>
				
			</div>
			<div class="nfItem"><a class="nfLink" href="#">Games</a>
				<div class="nfSubC nfSubS">
					<div class="HeX Team Games">HeX Games</div>	
					<div class="nfItem"><a class="nfLink" href="http://eu.battle.net/d3/it/">Diablo 3</a></div>
					<div class="nfItem"><a class="nfLink" href="http://euw.leagueoflegends.com/">League of Legends</a></div>
					<div class="nfItem"><a class="nfLink" href="http://www.pathofexile.com">Path of Exile</a></div>
				        <div class="nfItem"><a class="nfLink" href="http://http://www2.hirezstudios.com/smitegame/home">Smite</a></div>
                                        <div class="nfItem"><a class="nfLink" href="http://http://warthunder.com/en/">War Thunder</a></div>
                                        <div class="nfItem"><a class="nfLink" href="http://http://http://eu.battle.net/sc2/it/">Starcraft II</a></div>
                               </div>
			</div>
			
	</li>
	<li class="nfItem"><a class="nfLink" href="{U_FAQ}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST -->    
	<li class="nfItem"><a class="nfLink" href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li>
<!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
	<li class="nfItem"><a class="nfLink" href="{U_REGISTER}">{L_REGISTER}</a></li>
<!-- ENDIF -->
	<li class="nfItem"><a class="nfLink" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l" style="border-right-width:1px;">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>
<center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-6038941998538437";
/* Forum banner superiore */
google_ad_slot = "6906133103";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>


<!--Create a new menu object and activate it (place this script after the structure or attach to an onload type event)-->
<script type="text/javascript">

	//Create the menu object
	var myMenu = new NF.widget.menu("myMenu", {showTimerMS:250,hideTimerMS:250});
	myMenu.activate();

</script>
<br>
		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlink">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>                
        
        				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
        				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
        				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
        				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>

 <!-- IF S_NEW_BUG --> 
		<div id="message" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> <a href="{U_BUGTRACKER}">{L_BUG_MESSAGE}</a>
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
		
		 <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) --> 
		<div id="information" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF --> 


Ho caricato le immagini in PNG nella cartella /styles/abrasive/theme/images/ usando lo style derivato da Abrasive.
La prima immagina la carica correttamente ma quando arriva a fare la rotazione, appare solo un background nero senza immagini.
Avete qualche idea?

Grazie

Rispondi