Creating Next / previous buttons using Javascript

JavaScript
1

hello guys,

I’m pretty new to JS and dont have much knowledge, i need some very good guide or a file which is already rdy to do the following:

i got a video page, which has images in it, each image is a link to a different video, i want to make it so when 2 lines of images reached, there’ll be a button named Next (or anything, doesn’t matter) to lead to the Next page of images, note that i want only the part iwth the images to change while using those buttons, not the whole page,

the images are built in this way :

<a title="header=[header] body=[<b>Video Author:</b> Author] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('Link', 0)"><img src="photos/1.jpg'" onmouseover="this.src='photos/2.jpg'" onmouseout="this.src='photos/1.jpg'"/></a>

a link to the page just to show u how it looks like :
http://sospets.brinkster.net/newsite/vids.asp

thanks in advance

2

Its better to build it with semantic markup.

Your welcome to copy as much of this script as you want:
http://separationadvice.net/

3

thanks eruna, however i find it hard fitting this script to what i need, can any1 help me here please?

this script above makes a new slide on every LI tag, i need it on every UL tag, what changes excactly do i need to make?
here is the script:

(function($){
			var showSlide = function(slide){
		        	$(slide).siblings('.active').hide().removeClass('active');
		        	$(slide).fadeIn().addClass('active');	        	
		    };
		
		     var getSlide = function(){
		        	var nextSlide, i;
		        	for(i=0; i < $('#holder li').length; i++) {
						if($('#holder li').eq(i).attr('class').indexOf('active') > -1){
							if( $('#holder li').length ===  i + 1 ){
								nextSlide = 0;
							}else{
								nextSlide = i + 1;
							}
						}
					}
					return $('#holder li').eq(nextSlide);
		        }
		
		     var getPrevSlide = function(){
					var nextSlide, i;
		        	for(i=0; i < $('#holder li').length; i++) {
						if($('#holder li').eq(i).attr('class').indexOf('active') > -1){
							if( $('#holder li').length ===  i - 1 ){
								nextSlide = $('#holder li').length;
							}else{
								nextSlide = i - 1;
							}
						}
					}
					return $('#holder li').eq(nextSlide);
		      }
			
			var slideShow = setInterval(function() {				
				showSlide(getSlide());
            }, 12000);
            $("#leader").hover(function() {
                clearInterval(slideShow);
            }, function() {
            	clearInterval(slideShow);
				slideShow = setInterval(function() {
					showSlide(getSlide());
	            }, 6000);
            });

            $('.next').click(function(){
               	clearInterval(slideShow);
            	showSlide(getSlide());
              	return false;          	
            });

             $('.prev').click(function(){
            	clearInterval(slideShow);
            	showSlide(getPrevSlide());
            	return false;
            });

	})(jQuery);

here is the page:
http://sospets.brinkster.net/newsite/vids.asp

i want it to work so after each line of videos it’ll have buttons to go next / prev page, for now all of the images are around one big UL tag but i’ll change it so each line will be surrounded by UL tag after some1 will give me the proper solution to do that

thanks for ur help :slight_smile:

4

You could try putting a <div> around your images that is as wide as your first row and the height of two images. Set the CSS overflow and clip to auto and you will have a vertical scroll bar that will allow you to scroll through your total list which may be many rows long.

5

hey AllanP,

thanks for the solution :slight_smile: could be a good one to use, going to try it out and see how it is.

6

AllanP’s is definitely the simplest and easiest to implement. However, I started working on my JavaScript solution before he posted, so I don’t want to waste it:


(function (document) {
    var ul = document.getElementsByTagName("ul")[1],
    ulhtml = ul.innerHTML,
    video = document.getElementById("video"),
    page_regexp = /^(?:[.\\r\
]*?<li.*?>[.\\r\
]*?<\\/li>[.\\r\
]*?){1,14}/i,
    pages = [],
    currentPage = 0,
    next = document.createElement("a"),
    prev = document.createElement("a"),
    loadPage = function (direction) {
        currentPage += direction;
        ul.innerHTML = pages[currentPage];
        prev.style.visibility = currentPage ? "visible" : "hidden";
        next.style.visibility = currentPage === pages.length - 1 ? "hidden" : "visible";
    };
    
    while (page_regexp.test(ulhtml)) {
        pages.push(page_regexp.exec(ulhtml));
        ulhtml = ulhtml.replace(page_regexp, "");
    }
    ul.style.height = "198px";
    
    next.innerHTML = "next";
    prev.innerHTML = "previous";
    next.style.cssText = "margin:-15px 57px 15px;float:right";
    prev.style.cssText = "margin:-15px 57px 15px;float:left";
    video.style.clear = "both";
    next.href = prev.href = "javascript:void(0)";
    next.onclick = function () { loadPage(1); };
    prev.onclick = function () { loadPage(-1); };
    video.parentNode.insertBefore(prev, video);
    video.parentNode.insertBefore(next, video);
    
    loadPage(0);
}(document));