WordPress.org

Ready to get started?Download WordPress

Forums

Theme development issue (1 post)

  1. andrei.ionescu
    Member
    Posted 11 months ago #

    Hi guys,

    I just started to develop my first WordPress theme few days ago but unfortunately I've just run into my first problem.

    I managed to create a different template for my theme which works perfectly apart from the images in the main JS slideshow. Please see here: raluca.yumm.ro

    Even though the slideshow seems to be fully functional, the images that should slide are not displayed. I feel there is a detail that I am missing.

    Here is part of the JS code:

    /*
    * 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" : "Stairs",
    		"image" : "1500x650.jpg",
    		"url" : "http://www.sxc.hu/photo/1271909",
                    "title" : "Welcome",
    		"firstline" : "THINQTANQ is the next generation of business ",
    		"secondline" : "offering everything you need."
    	}, {
    		"title" : "Office Appartments",
    		"image" : "work.jpg",
    		"url" : "http://www.sxc.hu/photo/1265695",
    		"firstline" : "Or still busy at",
    		"secondline" : "work?"
    	}, {
    		"title" : "Mountainbiking",
    		"image" : "biking.jpg",
    		"url" : "http://www.sxc.hu/photo/1221065",
    		"firstline" : "Get out and be",
    		"secondline" : "active"
    	}, {
    		"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" : "Enjoy some delicious",
    		"secondline" : "food"
    	}
    ];
    
    $(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
                    $("#title").html(photoObject.title);
    		$("#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);
    
    });

    Sorry if the code is too long.

    I am looking forward to hearing your thoughts.

    Many thanks,

    Andi

Reply

You must log in to post.

About this Topic

Tags