Implementare slide javascript in wordpress

Plugin-uri, teme, configurare

Moderator: Moderatori

indexcafea
Average Member
Mesaje: 65
Membru din: Mie Noi 07, 2012 9:18 pm
Contact:

Implementare slide javascript in wordpress

Mesajde indexcafea » Lun Apr 22, 2013 11:03 am

Salut,

Incerc sa implementez un un slide javascript in wordpress, am reusit artial cu exceptia legaturilor catre anumite imagini.

am fisierul script.js situat aici: wp-content/themes/twentyeleven/js
imaginile situate aici: wp-content/themes/twentyeleven/images/headers

continut script.js:

Cod: Selectaţi tot

/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
      "title" : "",
      "image" : "vacation.jpg",
      "url" : "http://www.sxc.hu/photo/1271909",
      "firstline" : "",
      "secondline" : ""
   }, {
      "title" : "Office Appartments",
      "image" : "work.jpg",
      "url" : "http://www.sxc.hu/photo/1265695",
      "firstline" : "",
      "secondline" : ""
   }, {
      "title" : "Mountainbiking",
      "image" : "biking.jpg",
      "url" : "http://www.sxc.hu/photo/1221065",
      "firstline" : "",
      "secondline" : ""
   }, {
      "title" : "Mountains Landscape",
      "image" : "nature.jpg",
      "url" : "http://www.sxc.hu/photo/1271915",
      "firstline" : "Take a fresh breath of",
      "secondline" : "nature"
   }, {
      "title" : "Italian pizza",
      "image" : "food.jpg",
      "url" : "http://www.sxc.hu/photo/1042413",
      "firstline" : "",
      "secondline" : ""
   }
];



$(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/headers/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/headers/" + 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/headers/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);
   
});


iar rezultatul partial se poate vedea aici : portof.anuntul10.ro
Astept idei!



Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Implementare slide javascript in wordpress

Mesajde MihaiC » Mar Apr 23, 2013 9:16 am

Pentru ca browser-ul vede calea catre fisiere ceva de genul "http://portof.anuntul10.ro/images/headers/nature.jpg".

La linia asta tre' sa ma lucrezi, ventual pune calea absoluta si scapi de stress.

Cod: Selectaţi tot

"background-image" : "url(../images/headers/" + photoObject.image + ")",
Dev @ oblio.eu


Înapoi la “Wordpress”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 26 vizitatori