Homeslider + background

titityler · January 19, 2015

Bonjour à tous,

Je suis à la recherche du module homeslider présent sur ce site : http://www.pyreneesmodele64.fr

Il permet de changer le background en même temps.

J'aimerai savoir si vous connaissez et si c'est un module payant ou gratuit.

Merci d'avance

Soyons Solidaire · January 19, 2015

Salut titityler regarde sur forum je crois avoir vu un module gratuit ? Sinon envoi un message a la personne du site ?

Edited January 19, 2015 by G.Solidarité (see edit history)

titityler · January 19, 2015

Je n'ai pas réussi à trouver sur le forum, je trouve des module pour Slider mais qui change avec le fond d'écran et ceux qui ont fait le site ne répondent pas.

titityler · January 19, 2015

J'ai réussi à les avoir, ils m'ont dit que c'était fait à la main avec du javascript et donc qu'il fallait que je regarde dans le code source.

Mais je ne sais pas par où commencer, si quelqu'un se sent de m'aider pour après peut-être réussir à créer un module, je suis preneur !

Soyons Solidaire · January 19, 2015

Ok, Dommage sur le forum j'avais vu ce que tu cherche en plus avec cette nouvelle version du forum j'ai du mal a trouver ?

Soyons Solidaire · January 19, 2015

Regarde la je ne suis pas sur ? https://www.prestashop.com/forums/topic/184023-module-gratuit-slider-slideshow-pour-votre-homepage/

titityler · January 19, 2015

Je l'ai déjà essayé mais il ne change pas le background en meme temps.

Merci quand même.

titityler · January 19, 2015

Voici ce que j'ai pu récupérer mais ca ne marche pas, si vous avez une idée :

Dans global.css, j'ai rajouté ceci :

/*---------------------------------------------------- TEST HOMESLIDER BACKGROUND ------------------------------------------------------------*/
.index #block_vignette{
	
	/*width: 100%;*/
	height: 120px;
	clear: both;
	/*background-color: #ccc;*/
	margin: auto;
	width: 100%;
	display: table;
	margin-bottom: 20px;
}
.index .une_vignette{
	width: 18%;
	height: 100px;
	float: left;
	background-color: #000;
	margin: 1%;
	cursor: pointer;
	position: relative;
}
div.une_vignette.vignette_0 {
	background: url('../img/slide/slide0_vignette.png') no-repeat left top;
}
div.une_vignette.vignette_1 {
	background: url('../img/slide/slide1_vignette.jpeg') no-repeat left top;
}
div.une_vignette.vignette_2 {
	background: url('../img/slide/slide2_vignette.png') no-repeat left top;
}
div.une_vignette.vignette_3 {
	background: url('../img/slide/slide3_vignette.jpeg') no-repeat left top;
}
div.une_vignette.vignette_4 {
	background: url('../img/slide/destock_vignette.png') no-repeat left top;
}

div.logoss {
	overflow: hidden;
	border-top: 1px solid #ddd;
}

@media (max-width: 991px) {
	.index .une_vignette{
		width: 46%;
		height: 100px;
		float: left;
		background-color: #000;
		margin: 2%;
		cursor: pointer;
		position: relative;
	}
}


#survol{
	width: 20%;
	height: 120px;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.25);
	-webkit-transition: all .2s ease-in;
	  -moz-transition: all .2s ease-in;
	  -o-transition: all .2s ease-in;
	  transition: all .2s ease-in;
}
@media (max-width: 1199px) {
	#survol{
		display: none;
		}
}

}
#block_vignette{
	display: none;

}

.index #columns{
	 margin-top: 420px!important;
	
}

.index #slide_block{
	/*width: 100%;*/
	/*height: 1300px;*/
	position: absolute;
/*	background-color: #f49494;*/
	/*z-index: -999;*/
	display: block;
	overflow: hidden;
	background-position: 0 0;
}

#slide_block{
	display: none;
}

#cache_slide_block{
	width: 500%;
	-webkit-transition: all .2s ease-in;
	  -moz-transition: all .2s ease-in;
	  -o-transition: all .2s ease-in;
	  transition: all .2s ease-in;
	  position: relative;
	  float: left;
	
}


.bg_slide{
	/*width: 20%;*/
	float: left;
	/*background-color: #ccc;*/
	overflow: hidden;
	/*height: 1300px;*/
}

.slide_0{
	background:  url('../img/slide/slide0_bg.jpg') no-repeat center top;
	background-size: cover;
}
.slide_1{
	background: url('../img/slide/bg_cross.jpg') center center / cover no-repeat;
}
.slide_2{
	background: url('../img/slide/bg_cross.jpg') center center / cover no-repeat;
}
.slide_3{
	background:  url('../img/slide/bg_cross.jpg') no-repeat center top;
	background-size: cover;
}

.slide_4{
	background: url('../img/slide/bg_destock.jpg') center center / cover no-repeat;
}
.produit_slide{
	width: 100%;
	margin: auto;
	height: 450px;
	background-color: #000;
	display: table;
	margin-top: 30px;
	position: relative;
	
} 
@media (max-width: 479px) {
	.produit_slide{
		display: none;
		
	}
	#slide_block{
		display: none!important;
	}
	.index #block_vignette{
		
		display: none!important;
	}
	.index #columns{
		 margin-top: 0px!important;
		
	}
}

.produit_slide_1{
	background:  url('../img/slide/slide1.png') no-repeat center top;
}
.produit_slide_0{
	background:  url('../img/slide/slide0.png') no-repeat center top;
}
.produit_slide_2{
	background:  url('../img/slide/slide2.png') no-repeat center top;
}
.produit_slide_3{
	background:  url('../img/slide/slide3.png') no-repeat center top;
}
.produit_slide_4{
	background:  url('../img/slide/destock.png') no-repeat center top;
}


div#center_column.center_column.col-xs-12.col-sm-12 {
	background: #Fff;
	padding-top: 1px;
}
#center_column div.tab-content h2 {
	font: 500 41px/42px "antipastoregular", sans-serif;
	-webkit-font-smoothing : antialiased;
}
li.ajax_block_product.col-sm-5.col-md-2 {
	width: 20%;
}
@media (max-width: 1199px) {
	li.ajax_block_product.col-sm-5.col-md-2 {
		width: 20%;
	}
}
@media (max-width: 991px) {
	li.ajax_block_product.col-sm-5.col-md-2 {
		width: 33%;
	}
}
@media (max-width: 767px) {
	li.ajax_block_product.col-sm-5.col-md-2 {
		width: 50%;
	}
}
@media (max-width: 479px) {
	li.ajax_block_product.col-sm-5.col-md-2 {
		width: 100%;
	}
}

Dans header.tpl, j'ai rajouté ceci avant le </head>:

<!-- DEBUT HOMESLIDER BACKGROUND -->
<script>
$(document).ready(function () {
	var posslide=0;
	var window_width=$(window).width();
	var slide_height=$(document).height()-$('#header').height()-$('.footer-container').height();
	
	$('#slide_block').css({'height':slide_height,'width':window_width});	$('.bg_slide').css({'height':slide_height,'width':window_width});

	
	$(window).resize(function(){
		window_width=$(window).width();
		slide_height=$(document).height()-$('#header').height()-$('.footer-container').height();
		$('.bg_slide').height(slide_height).width(window_width);
		
		$('#slide_block').width(window_width);
		$('#cache_slide_block').width(window_width*5);
		
		$('#cache_slide_block').css({'marginLeft':posslide*-window_width});
	})
	

	setInterval(function(){
		if (posslide!=4) {
			posslide++;
			var calcul_a_la_c=posslide*20;
			var syntax= calcul_a_la_c+'%';
			$('#cache_slide_block').css({'marginLeft':posslide*-window_width});
			$('#survol').css({'margin-left':syntax});		
		}else {
			$('#cache_slide_block').css({'marginLeft':0});
			$('#survol').css({'margin-left':0});
			posslide=0;	
		}
	}, 7000);
	$('.une_vignette').click(function(){
		posslide=$(this).attr('data-pos');
		var calcul_a_la_c=posslide*20;
		var syntax= calcul_a_la_c+'%';
		$('#cache_slide_block').css({'marginLeft':posslide*-window_width});
		$('#survol').css({'margin-left':syntax});
	});
});
</script>
<!-- FIN HOMESLIDER BACKGROUND -->

Ensuite, après le </header> :

{if $page_name =='index'}
			<!-- DEBUT HOMESLIDER BACKGROUND PART1 -->
			<div id="slide_block">
				<div id="cache_slide_block">
					<div class="bg_slide slide_0">
						<a class="produit_slide produit_slide_0" href="#"></a>
					</div>
					<div class="bg_slide slide_1">
						<a class="produit_slide produit_slide_1" href="http://www.pyreneesmodele64.fr/avions-electrique/3825-carbon-z-cub-pnp-basic-e-flite-605482107683.html"></a>
					</div>
					<div class="bg_slide slide_2">
						<a class="produit_slide produit_slide_2" href="http://www.pyreneesmodele64.fr/home/4272-dgx-30.html"></a>
					</div>
					<div class="bg_slide slide_3">
						<a  class="produit_slide produit_slide_3"  href="http://www.pyreneesmodele64.fr/home/4157-iris-de-3drobotics.html"></a>
					</div>
					<div class="bg_slide slide_4">
						<a class="produit_slide produit_slide_4" href="http://www.pyreneesmodele64.fr/428-destockage"></a>
					</div>
				</div>
			</div>
			<!-- FIN HOMESLIDER BACKGROUND PART1 -->
			<!--
				<div class="columns-container">
					<div id="columns-slider" class="container">
						<div class="row">
							<div id="top_column" class="center_column col-xs-12 col-sm-12">{hook h="displayTopColumn"}</div>
						</div>
					
					</div>
				</div>
				-->
				
			{/if}
			<div class="columns-container">
				<div id="columns" class="container">
				<!-- DEBUT HOMESLIDER BACKGROUND PART2 -->

					<div id="block_vignette">
						<div id="survol"></div>
						<div class="une_vignette vignette_0" data-pos="0"></div>
						<div class="une_vignette vignette_1" data-pos="1"></div>
						<div class="une_vignette vignette_2" data-pos="2"></div>
						<div class="une_vignette vignette_3" data-pos="3"></div>
						<div class="une_vignette vignette_4" data-pos="4"></div>
					</div>

					<!-- FIN HOMESLIDER BACKGROUND PART2 -->

Edited January 19, 2015 by titityler (see edit history)

Sign In

Homeslider + background

Recommended Posts

titityler

Link to comment

Share on other sites

Soyons Solidaire

Link to comment

Share on other sites

titityler

Link to comment

Share on other sites

titityler

Link to comment

Share on other sites

Soyons Solidaire

Link to comment

Share on other sites

Soyons Solidaire

Link to comment

Share on other sites

titityler

Link to comment

Share on other sites

titityler

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com