Posts Slider (suite), le code source complet

22/08/2012 22:11

Pour faire suite à mon post d'hier , Slide de vos posts sur les "pages" créées (pages statiques) , je vous propose ici de jeter un oeil au code source pour intégrer ce slide à votre thème Overblog favori. Le code est simple à comprendre, je vous l'ai remis dans le contexte d'écriture logique d'un thème. Seule la partie intégration de l'affichage en HTML peut vous poser problème, alors en commentaire dîtes moi que l thème vous utilisez afin que je vous dise où positionner ce slide. Le code ci-dessous, ne soyez pas effrayé(e)s, je suis là pour répondre à vos questions.
Nota : ne pas copier les "[...]" remplace le code que vous devez garder sur le HTML de votre thème.

<!DOCTYPE html>
<html lang="{{ Blog.Lang|default('fr') }}">
<head>
    		[...] <!-- votre code d'origine du thème ici -->
			    
			 <!-- Code à ajouter dans votre HEAD de thème -->   
			 <script src="http://www.photonautes-associes.fr/js/jquery.carouFredSel-5.6.2.js" type="text/javascript"></script>
			 
			 <STYLE>
						.clearfix {
						float: none;
						clear: both;
						}
						/* ------------------------------------------- */
						/* Les CSS pour l'affichage du slider de posts */
						.html_carousel2 {
						padding: 15px 0 15px 40px;
						}
						.html_carousel2 div.slide {
						position: relative;
						}
						.html_carousel2 div.slide div {
							background-color: rgba(0, 0, 0, 0.6);
							width: 100%;
							display: none;
							position: absolute;
							bottom: 0;
						}
						.html_carousel2 div.slide h4 {
							font-size: 35px;
							padding: 30px 0 0 100px;
						}
						.html_carousel2 div.slide p {
							font-size: 16px;
							padding: 12px;
							color:#000;
							background-color:white;
							/* IE 8/9 */
						  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
						
						  /* IE 5-7 */
						  filter: alpha(opacity=65);
						
						  /* Netscape */
						  -moz-opacity: 0.65;
						
						  /* Safari 1.x */
						  -khtml-opacity: 0.65;
						
						  /* Good browsers */
						  opacity: 0.65;
						}
						.html_carousel2 div.slide p {text-decoration:none;}
						
						.html_carousel2 div.slide h4, .html_carousel div.slide p {
							color: white;
							margin: 0;
						}
			 </STYLE>
 </head>
 <BODY>
 [...]
 <!-- l'affichage du slider ici seulement sur les PAGES et pas sur les listes ou sur les posts -->
 {% if isPage %}
<!-- Partie HTML -->
<div class="html_carousel2">
    <div id="foo3">
		{% list Blog.Posts(13) %}
				{% if Post.Cover is not empty %}
					<div class="slide">
						<img src="{{ Post.Cover | resize(615,290)| crop }}" />
						<div><a href="{{ Post.PermaLink }}">
							<h4>{{ Post.Title }}</h4>
							<p>{{ Post.Snippet }}</p>
						</a>
						</div>
					</div>
				{% endif %}	
		{% endlist %}
	</div>
	<div class="clearfix"></div>
</div>
{% endif %}
 [...]
 <!-- le script à ajouter pour un bon fonctionnement du slider juste avant la balise </BODY>-->
	 <script type="text/javascript">
	                    $(document).ready(function() {
		                    $("#foo3").carouFredSel({
																items 		: 1,
																direction	: "up",
																width : "100%",
																auto : {
																	easing		: "linear",
																	fx :"crossfade",
																	duration	: 1000,
																	pauseDuration: 2000,
																	pauseOnHover: true
																}
															}).find(".slide").hover(
																function() { $(this).find("div").slideDown(); },
																function() { $(this).find("div").slideUp();	}
															);
	                     });
	  </script>                   
	 </BODY>