Annonces
 
Livre d'or

Par Visiteur

Pour évoluer PHPBoost
je pense le traduire
en arabe. Si j'arrive
à faire un bon travail
pour cette traduction
je l'enverrai à votre
équipe. Mille merc [Suite...]

Livre d'or

Question aléatoire

Comment ajouter une vidéo / du flash sur mon site ?

 
Installer la mini_galerie en haut de chaques pages
 
Table des matières



Comment installer la mini galerie sur chaque page ?

Alors j'explique pour l'intégrer juste au dessus de la speed bar.

Dans un premier temps aller dans admin/module/galerie/configuration choisir défilement dynamique horizontal

Ensuite ouvrir gallery_mini.tpl , sélectionnez tout son contenu puis le copier ( garder le code quelque part )

A la place , ajouter

Code HTML :
<br />


Enregistrer le fichier ( on y touche plus )

Comme je l'ai dit on va le placer au dessus de la speed bar donc ouvrir speed_bar.tpl.

On obtient :

Code HTML :
	# START end_right #
	</div>
	# END end_right #
 
	<div id="main">
		<div id="links">
			  <a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a>
			# START link_speed_bar #
			» <a class="small_link" href="{link_speed_bar.URL}" title="{link_speed_bar.TITLE}">{link_speed_bar.TITLE}</a>
			# END link_speed_bar #			
		</div>		
		<br />


Et là coller juste en dessous de # END end_right # le code que vous avez copié plus haut .


La ça devient plus compliqué, mais si vous connaissez les bases c'est bon.

Je poste mon code avec des commentaires :

Code HTML :
	# START end_right #
	</div>
	# END end_right #
 
	<div id="main">
			<script type="text/javascript">
		<!--
		var sum_height = {SUM_HEIGHT};
		var sum_width = {SUM_WIDTH};
		var hidden_height = {HIDDEN_HEIGHT};		
		var hidden_width = {HIDDEN_WIDTH};		
		var scroll_speed = {SCROLL_SPEED};
		var scroll_mode = '{SCROLL_MODE}';
		{ARRAY_PICS}
		-->
		</script>
<br />
			<div class="galerie_top"><!--Tu règles a ta guise dans la classe galerie_top , il s'agit du bloc qui se trouve au dessus des images qui défilent -->
			<h5 class="sub_title" align="center">{L_RANDOM_PICS}</h5>
				</div>
					<div class="galerie"><!--Il sert à faire défiler les images dans un bloc-->
						<div style="width:650px;height:auto;overflow:hidden;text-align:center;margin-left:20px;margin-right:auto;margin:auto;position:relative;"><!--Avec ceci tu règles la largeur , hauteur. -->
					<div id="thumb_mini" style="left:0px;top:0px;position:relative;margin-top:5px;" onmouseover="temporize_scroll()" onmouseout="temporize_scroll();">	
											# START vertical_scroll #	
							# START pics_mini #
						<a href="{vertical_scroll.pics_mini.U_PICS}#pics_max"><img src="{vertical_scroll.pics_mini.PICS}" alt="{vertical_scroll.pics_mini.NAME}" width="{vertical_scroll.pics_mini.WIDTH}" height="{vertical_scroll.pics_mini.HEIGHT}" /></a>
							# END pics_mini #
						# END vertical_scroll #		
						# START horizontal_scroll #
						<table>
							<tr>
								# START pics_mini #
								<td style="padding:4px;"><a href="{horizontal_scroll.pics_mini.U_PICS}#pics_max"><img src="{horizontal_scroll.pics_mini.PICS}" alt="{horizontal_scroll.pics_mini.NAME}" width="{horizontal_scroll.pics_mini.WIDTH}" height="{horizontal_scroll.pics_mini.HEIGHT}" /></a></td>
								# END pics_mini #
							</tr>
						</table>
						# END horizontal_scroll #
					</div>
					{L_NO_RANDOM_PICS}
				</div>
				<div align="center">
					<a class="small_link" href="../gallery/gallery.php{SID}">Voir toutes les photos</a><!--J'ai mis voir toutes les photos mais tu peux changer -->
				</div>
				</div>
		<script type="text/javascript" src="{MODULE_DATA_PATH}/images/js/scroll.js"></script>
 
		<div id="links">
			  <a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a>
			# START link_speed_bar #
			» <a class="small_link" href="{link_speed_bar.URL}" title="{link_speed_bar.TITLE}">{link_speed_bar.TITLE}</a>
			# END link_speed_bar #			
		</div>		
		<br />


Et là on va insérer les class qui va permettre de mettre en forme tout ça.

Je l'ai mis dans global.css mais on peut aussi le mettre dans design.css , gallery.css comme vous voulez .

Voici mes deux class.

Code CSS :
.galerie{
	background:#DFF4FF;
	border-left:1px solid #0099FF;
	border-right:1px solid #0099FF;
	border-bottom:1px solid #0099FF;
	height:auto;
	width:98%;
	margin-left:auto;
	margin-right:auto;
}
.galerie_top{
	background:#B3DAEF;
	border-bottom:1px dashed #0099FF;
	border-right:1px solid #0099FF;
	border-left:1px solid #0099FF;
	border-top:1px solid #0099FF;
	height:28px;
	width:98%;
	margin-left:auto;
	margin-right:auto;
}


Je n'explique pas pour le css , vous pouvez trouver sur google c'est simple à utiliser .

Enregistrez le tout puis uploadez le tout sur votre site .

Cette page a été vue 425 fois