Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Posts Slider (suite), le code source complet

- Auteur : Brunofaisart

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>

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

SOTW 22/08/2012 22:11

Bonsoir,
j'utilise le thème Photography, où et quel est le code complet que je dois utiliser ? merci beaucoup !!!

Nadine Quinn 19/08/2012 21:50

Sur l'ancien blog je n'avais pas de javascript car j'étais en mode confiance, est ce qu'ici avec ce nouveau blog je peux l'utiliser
Merci de me répondre malgré vos nombreux commentaires

Bruno admin créateur de ce blog 20/08/2012 06:19

Oui vous pouvez l'utiliser mais surtout IL DOIT ETRE UTILISE.

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...