Jump to content

Background Super Slider

kickflowers
 Share

Recommended Posts

kickflowers Newbie

kickflowers

Posted
Posted

]Bonjour à tous, je suis nouveau et j'ai encore beaucoup de choses à apprendre de vous.

J'essaie tant bien que mal de créer un module qui permettra d'avoir un slider en arrière plan à l'image de ce que fait http://www.grosbill.com/.

 

Je vous met donc à disposition mon module et j'ai besoin de votre aide pour le finaliser.

 

Mes problèmes :

  • les images ne 'affichent pas.
  • les autres scripts semblent désormais inactif...

Merci d'avance à tous !

 

Le fichier PHP :

Le code du tpl :

<!-- superslider -->
<script type="text/javascript" src="{$module_dir}js/scriptsuperslider.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{$module_dir}css/superslider.css" />

<div id="headerslider">
<!-- jQuery handles to place the header background images -->
<div id="headerimgs">
 <div id="headerimg1" class="headerimg"></div>
 <div id="headerimg2" class="headerimg"></div>
</div>
<!-- Slideshow controls -->
<div id="headernav-outer">
 <div id="headernav">
  <div id="back" class="btn"></div>
  <div id="control" class="btn"></div>
  <div id="next" class="btn"></div>
 </div>
</div>
<!-- jQuery handles for the text displayed on top of the images -->
<div id="headertxt">
 <p class="caption">
  <span id="firstline"></span>
  <a href="#" id="secondline"></a>
 </p>
 <p class="pictured">
  image:
  <a href="#" id="pictureduri"></a>
 </p>
</div>
</div>
<!-- /superslider -->

 

Le code du script :

// Speed of the automatic slideshow
var slideshowSpeed = 5000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
 "title" : "Stairs",
 "image" : "vacation.jpg",
 "url" : "http://localhost/smartblettes/modules/superslider/images/vacation.jpg",
 "firstline" : "Going on",
 "secondline" : "vacation?"
}, {
 "title" : "Office Appartments",
 "image" : "work.jpg",
 "url" : "http://localhost/smartblettes/modules/superslider/images/work.jpg",
 "firstline" : "Or still busy at",
 "secondline" : "work?"
}, {
 "title" : "Mountainbiking",
 "image" : "biking.jpg",
 "url" : "http://localhost/smartblettes/modules/superslider/images/biking.jpg",
 "firstline" : "Get out and be",
 "secondline" : "active"
}, {
 "title" : "Mountains Landscape",
 "image" : "nature.jpg",
 "url" : "http://localhost/smartblettes/modules/superslider/images/nature.jpg",
 "firstline" : "Take a fresh breath of",
 "secondline" : "nature"
}, {
 "title" : "Italian pizza",
 "image" : "food.jpg",
 "url" : "http://localhost/smartblettes/modules/superslider/images/food.jpg",
 "firstline" : "Enjoy some delicious",
 "secondline" : "food"
}
// More pictures if we want
];
$(document).ready(function() {

// Backwards navigation
$("#back").click(function() {
 stopAnimation();
 navigate("back");
});

// Forward navigation
$("#next").click(function() {
 stopAnimation();
 navigate("next");
});

var interval;
$("#control").toggle(function(){
 stopAnimation();
}, function() {
 // Change the background image to "pause"
 $(this).css({ "background-image" : "url(images/btn_pause.png)" });

 // Show the next image
 navigate("next");

 // Start playing the animation
 interval = setInterval(function() {
  navigate("next");
 }, slideshowSpeed);
});


var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
 // Check if no animation is running. If it is, prevent the action
 if(animating) {
  return;
 }

 // Check which current image we need to show
 if(direction == "next") {
  currentImg++;
  if(currentImg == photos.length + 1) {
currentImg = 1;
  }
 } else {
  currentImg--;
  if(currentImg == 0) {
currentImg = photos.length;
  }
 }

 // Check which container we need to use
 var currentContainer = activeContainer;
 if(activeContainer == 1) {
  activeContainer = 2;
 } else {
  activeContainer = 1;
 }

 showImage(photos[currentImg - 1], currentContainer, activeContainer);

};

var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
 animating = true;

 // Make sure the new container is always on the background
 currentZindex--;

 // Set the background image of the new active container
 $("#headerimg" + activeContainer).css({
  "background-image" : "url(images/" + photoObject.image + ")",
  "display" : "block",
  "z-index" : currentZindex
 });

 // Hide the header text
 $("#headertxt").css({"display" : "none"});

 // Set the new header text
 $("#firstline").html(photoObject.firstline);
 $("#secondline")
  .attr("href", photoObject.url)
  .html(photoObject.secondline);
 $("#pictureduri")
  .attr("href", photoObject.url)
  .html(photoObject.title);


 // Fade out the current container
 // and display the header text when animation is complete
 $("#headerimg" + currentContainer).fadeOut(function() {
  setTimeout(function() {
$("#headertxt").css({"display" : "block"});
animating = false;
  }, 500);
 });
};

var stopAnimation = function() {
 // Change the background image to "play"
 $("#control").css({ "background-image" : "url(images/btn_play.png)" });

 // Clear the interval
 clearInterval(interval);
};

// We should statically set the first image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
 navigate("next");
}, slideshowSpeed);

});

superslidercss.zip

Link to comment
Share on other sites
kickflowers Newbie

kickflowers

Posted
  • Author
Posted (edited)

Oui c'est à peu près ça.

 

En faite, je continues avec les deux scripts originaux

  • superslidercss : le slideshow en arrière plan fonctionne mais il n'y a pas de bouton de navigation entre les images, ni de bouton de redirection.
  • superslider : j'ai des problèmes de css et de positionnement car je 'narrive pas à le faire remplir toute la page.

je vous met en zip la nouvelle version de superslider.

ps : pour que superslider prenent en compte les images il faut copier les images dans un dossier image à la racine de prestashop... pas réussi à faire mieux sur ce coup là.

 

Si je pouvais avoir de l'aide de pro pour ces deux ébauches de modules qui à mon avis pourraient être utiles ça serait super !!!

superslider.zip

Edited by kickflowers (see edit history)
Link to comment
Share on other sites
kickflowers Newbie

kickflowers

Posted
  • Author
Posted (edited)

Sur la base des informations de Médéric et de son module (disponible ici : http://www.prestasho...round-homepage/), j'ai quand même essayer d'améliorer mon essai de module.

  • j'ai rajouté un hook dédié.

Je vous met la version v0.2 en pièces jointes.

Je n'ai pas d'option d'administration.

Et j'ai encore plusieurs problèmes notamment j'aimerai attribuer un fond de couleur ou une autre image en dessous pour aller progressivement vers le footer.

 

Le plus simple est de regarder le print ecran en pièce jointes.

 

L'autre problème que je n'ai toujours pas résolu à régler est : Pourquoi mon script pioche dans un dossier images à la racine de Prestashop et non pas dans un dossier image dans le module.... ?

 

Enfin, le dernier problème, comment le faire s'afficher sur toutes les pages ....

 

Si vous avez des suggestions, je suis preneur.

post-381127-0-32039000-1345211178_thumb.jpg

superslider.zip

Edited by kickflowers (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...