|
JavaScript - Slideshow Next/previous Buttons Skipping Slides
Similar TutorialsI'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks. Here's the code: Code: $(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 7;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
/* End of customizations */
});
I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one. I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript. I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas? Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230. I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks! I am trying to display testimonials on my website in an iframe. This way I can utilize the scrolling feature if needed and keep the page from changing sizes due to the length of the testimonial. I can also change the testimonials order and content easily. I am trying to make a "next" and "previous" button that will sit on the main page (not in the iframe) and cycle through the testimonials. However I am having trouble with this as I am trying to use an array. This is my current code for the Next button. The idea is to check to see if the testimonial is on the last document. If so display the first testimonial in the array. "Else" change to the next testimonial in the array. Code: var myTests=new Array();
myTests[0]="test001.html";
myTests[1]="test002.html";
myTests[2]="test003.html";
var numTests = myTests.length;
var curTests = 0
function nextTests()
{
if (curTest <= numTests)
document.getElementById("testFrame").src=myTests(1);
else
document.getElementById("testFrame").src=myTests[0];
}
Then I am using a simple button to call the function "onclick" Code: <button type="button" onclick="nextTests()">next</button> PS I am a beginner at this so I apologize if I am making silly mistakes. However, I would really appreciate any direction you can give me! Thanks so much! Hello kind folk of codingforums.com! I am pretty new to JS and have been racking my brain all week to find a solution for this. I have a javascript fading slideshow but it has no back or next button. I'm not sure if i need to add another function or go about it a different way. Here is the code if anyone can help. Thanks in advance!!! <script type="text/javascript"> var slidespeed=5800 var slideimages=new Array("my_images/SBDCslide.gif","my_images/americanbuilding.gif","my_images/emerald.gif", "my_images/nautical.gif", "my_images/rent.gif","my_images/allyn.gif","my_images/SBDCslide.gif","my_images/signs.gif","my_images/cobalt.gif","my_images/test.gif","my_images/federal.gif") var slidelinks=new Array("#" ,"american.asp","emerald.asp","nautical.asp") var whichlink=0 var whichimage=0 var imgobj, filtersupport, blenddelay var imageholder=new Array() for (i=0;i<slideimages.length;i++){ //preload images imageholder[i]=new Image() imageholder[i].src=slideimages[i] } function gotoshow(){ window.location=slidelinks[whichlink] } function slideit(){ if (filtersupport) imgobj.filters[0].apply() imgobj.src=imageholder[whichimage].src if (filtersupport) imgobj.filters[0].play() whichlink=whichimage whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0 setTimeout("slideit()", slidespeed+blenddelay) } window.onload=function(){ imgobj=document.getElementById("slideshow") //access img obj filtersupport=imgobj.filters //check for support for filters blenddelay=(filtersupport)? imgobj.filters[0].duration*1000 : 0 slideit() } </script> Hi again For instance I want to display some announcements from an external text file on a predefined box, like lets say 140 wide and height scalable according to text. The texts would be some announcements from me, a few words. I want the text justified and with previous / next link, if possible. And when they navigate to another page, they will get a random message in that box. There are news tickers on the net, but I just want something simple like this, no scrolling, fading, etc.. Has anyone a clue how I can accomplish that? Thanks. Hey guys, hope this is in the right place... Basically I was wondering if anyone could point me in the right direction or to an example of where a div slides onto the screen as soon as a page loads. My client wants something like this: http://www.nytimes.com/packages/html...ion/index.html (without parallax or the fade-in) but I refuse to do it in Flash, obviously. I have this gallery he http://juicenothing.com/freelance/gallery.php The div id is wrap. Is this possible? I can't find a good example anywhere!! Thanks (i'm a bit of a n00b, so pls go easy on me ) Im going nuts with this, first im starting of by just putting a background image in the tb using JavaScript, but it won't work! Heres what i got in my 'name.js' file i got var name=new Array() name='name.jpg' and in my HTML i got <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div> <table> <script type="text/javascript" language="JavaScript" src="name.js"> document.write('<td id="name2" background="' + name + '">'); </script> </td> </table> </div> </body> </html> Where have a gone wrong?? If I type Hello World into the name.js file and put it in a tb it works fine, im confused thanks, Paul Hi all, I have created the following page http://www.kylehouston.com/testing/cci/ When loading in ie6 and ie7 the content slider exposes all the slides until fully loaded, is it possible to hide these slides while loading? Thanks in advance Kyle Hii guys.. Im pretty new to Javascript and cant get this working.. Code: <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
function checkIt(evt) {
evt = (evt) ? evt : window.event
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
status = "This field accepts numbers only."
return false
}
status = ""
return true
}
function notEmpty(){
var n = document.getElementById('myText').value
if (n<100)
test1();
else if(n<200)
test2();
else
{alert("You did not enter a number!")}
}
return:false
$(function test1() {
{alert("1")}
});
$(function test2() {
{alert("2")}
});
</script>
<INPUT TYPE="text" NAME="numeric" onKeyPress="return checkIt(event)" id="myText">
<input type='button' onclick='notEmpty()' value='Form Checker' />
</body>
Hes running function test1 and function test2 straight without looking at the if else statment, what im doing wrong? Anyway thanks for helping me Greetz Lennard I've got an old school script running a static slide show, but it's not showing the ninth image - regardless of what the image is (ruling out a typo in my image file). Here's the page and script: http://www.agwprefinished.com/handpainted.asp Code: <SCRIPT LANGUAGE="JavaScript">
<!--
/*
Script by FPMC at http://jsarchive.8m.com
Submitted to JavaScript Kit (http://javascriptkit.com)
For this and 400+ free scripts, visit http://javascriptkit.com
*/
//set image paths
src = [ "images/faux-stone.jpg",
"images/dining-inlay.jpg",
"images/dining-inlay-detail.jpg",
"images/faux-inlaid-marble-limestone.jpg",
"images/faux-marble-inlay-manhattan.jpg",
"images/foyer-inlay.jpg",
"images/foyer-inlay-detail.jpg",
"images/weathered-grain-1.jpg",
"images/weathered-grain-detail.jpg",
"images/weathered-grain-2.jpg",
"images/weathered-grain-3.jpg",
"images/ebonized-oak.jpg",
"images/aged-oak.jpg",
"images/ebonized-oak-transition.jpg",
"images/sample.jpg",
"images/faux-marble-tile.jpg",
"images/faux-marble-tile-2.jpg",
"images/faux-marble-medallion.jpg",
"images/metallic-1.jpg",
"images/metallic-2.jpg",
"images/painted-pattern-bath.jpg",
"images/painted-pattern-detail.jpg",
"images/faux-parkay-4.jpg",
"images/faux-parkay-3.jpg",
"images/faux-parkay-2.jpg",
"images/border-stencil-1.jpg",
"images/border-stencil-2.jpg",
"images/monogram.jpg",
"images/dining-stencil.jpg",
"images/reproduction-border.jpg",
"images/reproduction-border-detail.jpg",
"images/reproduction-hall.jpg",
"images/inlay-pattern-hall.jpg",
"images/modello-samples-1.jpg",
"images/modello-samples-2.jpg",
"images/pavlosk-inlay-imitation.jpg",
"images/st-peter-inlay.jpg",
]
//set corresponding urls
url = [""]
//set duration for each image
duration = 4;
//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</SCRIPT>
i know there are pre-made scripts to do what i'm doing. i want to create this myself to learn. i'm trying to create a list of section titles with arrows next to them, clicking on an arrow expands the section to read it's text, clicking on the arrow again collapses the section text. additionally, i would like an "expand all" and "collapse all" link and that's where my issue baffles me. my js - Code: function expandAll() {
var collapsedDivs = document.getElementsByClassName('collapsed');
for (var i=0; i<collapsedDivs.length; i++) {
var expandMe = collapsedDivs[i];
expandMe.style.display = 'block';
expandMe.addClassName('expanded');
expandMe.removeClassName('collapsed');
document.getElementById('arrow_'+i).innerHTML = '<img src="../media/hide.gif" />';
}
}
my html - Code: <div style="float:left" id="arrow_0"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION ONE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section one text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_1"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION TWO TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section two text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_2"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION THREE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section three text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_3"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION FOUR TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section four text text text text text text text text text text text text text text text text text text text text text text </div> upon executing the function, the result is the text for sections one and three being expanded and the arrows for one and two being changed. why? what am i doing wrong? Hi there. I am sort of a mid-level javascripter, and I'm wondering if anyone would know a code I could use to make these previous/next buttons active. The reason I can't figure it out is that the thumbnails below currently control which image appears above, and I'd like the previous/next to also do so, but in the relative order of the corresponding thumbnails. I'd image there would be some way or specifying the current image, and adding either +1 or -1 or something along those lines? any help would be greatly appreciated. Page link below. http://www.annaleithauser.com/rosema...e/country.html Alright, this is going to sound strange, but bear with me here... Code: <input type="text" name="_F0827U" size="015" maxlength="015"> <input type="submit" class="cmdkey" name="_K040827" value="..."> Say I have multiple isntances that look similar to the above. However, I have no possible way of identifying them uniquely (because I don't know the name prior to generation). Is it posable, using JS, to snag the previous element and strip it of it's tags then rewrite a new element isntead of the two originals, say using an onClick() event on either of the elements? Code: <html>
<head>
<script language="javascript">
var myWindow;
function christDoes(){
mydWindow=open("secondary.html", "yes");
}
</script>
</head>
<body><form name="myform" method=POST ACTION="sake.html" ><CENTER>
<B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject">
<input type="button" name="ok" value="OK" onClick="christDoes()">
</form>
</body>
</html>
Code: <html>
<head>
<script language="javascript">
function me(){
displayColor();
}
function displayColor() {
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
}
function closeChild(){
if(winChild){
winChild.close();
}
}
var m=0;
var fSubject = self.opener.document.forms[0].subject.value;
if(fSubject.length>0){
if(isNaN(fSubject)){fSubject="";}
else{opener.alert("Please enter figure");}
numSub=parseInt(fSubject);
if(numSub==3){var strSub="abcde";}
self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>");
var mercy="<HTML><BODY>"
mercy +="<CENTER>"
sub=new Array(strSub.length);
for(var i=0; i<sub.length; i++){
m++;
mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>";
opener.alert("You have entered" +m +"subjects");
}
}
mercy +="</CENTER></FORM></BODY></HTML><BR></BR>";
self.document.write(mercy +"<BR>");
self.document.bgColor="pink";
newWindow();
document.write("<center><input type=\"button\" name=\"submit\" value=\"SUBMIT\" onclick=\"window.open('child', 'childwin.html')\">" +"</center>");
}
</script>
</head>
<body onload='me()' onFocus="closeChild();" onUnLoad="closeChild()">
<form></form>
</body>
</html>
Code: <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- var fValue = self.opener.document.forms[0].sub1.value; document.write(fValue +"<input type="text" name="sub1.toLowercase()">"); document.write(fValue +"<input type="text" name="sub2.toLowercase()">"); document.write(fValue +"<input type="text" name="sub3.toLowercase()">"); //--> </SCRIPT> </HEAD> <BODY > <form> <form> </BODY> </HTML> To every freelancer guru, words can not measure how grateful I am to you for your selfless service. God will reward you in Jesus name. Please kindly help me in this: All I want to do is to get the values input of the iterated textbox in the second window to appear in the third window with a textbox with each. Hi, I'm using the following javascript to allow users to navigate through my various picture galleries on my blog http://exp212.blogspot.com/ Quote: <script type="text/javascript"> function show(what) {var find = "Img" + what.id.substring(4); for ( var i = 1; i < 99999; ++i ) {var cur = "Img" + i; var img = document.getElementById(cur); if ( img == null ) return; img.style.display = ( find == cur ) ? "block" : "none"; }} </script> <div id="pix"> <img id="Img1" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7oLQJNII/AAAAAAAABpI/fJMx9Gp0AWU/s320/night1.jpg" style="display: block;" /> <img id="Img2" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7o5484JI/AAAAAAAABpM/1ZMn1wRbAB8/s320/night2.jpg" /> <img id="Img3" src="http://3.bp.blogspot.com/_P6fRcsNpSXY/S8Y7pSrB94I/AAAAAAAABpQ/KKIQQH0uJz4/s320/night3.jpg" /> <img id="Img4" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7p7eUA6I/AAAAAAAABpU/MMy7MrIvZcg/s320/night4.jpg" /> <img id="Img5" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7qtRJVnI/AAAAAAAABpY/zFMRSGb8Qhk/s320/night5.jpg" /></div> <div id="names"> <div id="Name1" onmouseover="show(this);">001</div> <div id="Name2" onmouseover="show(this);">002</div> <div id="Name3" onmouseover="show(this);">003</div> <div id="Name4" onmouseover="show(this);">004</div> <div id="Name5" onmouseover="show(this);">005</div> </div> As you can see (if you visit the blog) each picture is brought up by hovering over the next number in the sequence, but in order to save space I'd like to change this so it uses a simple 'Next' and 'Previous' function. How would I adapt the above javascript in order to achieve this? Thank you in advance. Hi there, I am new to javascript and have been working on this code to randomly shuffle a playlist of Youtube videos which are in an array. I have tried to implement a next and previous function, which I have managed to some success however, there is a problem. I have a system where there are two arrays: one is for the 'upcoming' videos and the other is for 'previous' videos. When the next button is pressed, the last element of the 'upcoming' array is added to the 'previous' array and I use the pop() function to return and delete that element from the 'upcoming' array and so on. When the previous button is pressed it puts the last element into the 'upcoming' array and uses the pop function as well, and so on. It works well except one thing, when previous is pressed the current video will load again, then on the second press it will go to the true previous video. The same happens when you click next after clicking previous. This is my code: PHP Code: <html> <span id = "displayarea"></span> <script type = "text/javascript"> var Varray = []; Varray[0] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/007VM8NZxkI?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/007VM8NZxkI?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>'; Varray[1] ='<iframe width="420" height="315" src="http://www.youtube.com/embed/DfDBZUb3mvI" frameborder="0" allowfullscreen></iframe>'; Varray[2] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/T9TmmF79Rw0?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/T9TmmF79Rw0?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>'; Varray[3] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/I1edDfzluXE?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/I1edDfzluXE?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>' Varray[4] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/qXLxM0u1aJw?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qXLxM0u1aJw?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>' Varray[5] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/UyOaTo_MiFE?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UyOaTo_MiFE?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>' var Vprevious = []; Varray.sort(function(){return Math.round(Math.random());}); function showit() { Vprevious.push((Varray[Varray.length-1])); document.getElementById("displayarea").innerHTML=Varray.pop(); } function previousit() { Varray.push((Vprevious[Vprevious.length-1])); document.getElementById("displayarea").innerHTML=Vprevious.pop(); } Vprevious.push((Varray[Varray.length-1])); document.getElementById("displayarea").innerHTML=Varray.pop(); </script> <input type = "button" id = "NextB" value = "Next" onclick = "showit();"> <input type = "button" id = "previousB" value = "previous" onclick = "previousit();"> </html> and the link to the test site is http://www.musicrate.org/rotate I have tried playing around with things and trying to use splice() to select the video one before the last, however I have not succeeded. Any help on the matter would be appreciated. It is probably something simple and obvious so I apologize in advance if that is the case. Thanks Evening folks I'm -very- green when it comes to Javascript, but I'm working my way up. The problem right now I'm running in to now is when trying to implement a website function that allows two buttons (previous, and next) to do their respective tasks. I can get the script to go forward and back, however when I jump to another page in the frame (this is all through iframes), when clicking either button, it will take me to the last page I had stopped on. A little hard to explain, but maybe seeing the code will give you a better idea. <script type="text/javascript"> var pNum=0; var maxPage=10; function next() { pNum++; if (pNum > maxPage) pNum=10; document.getElementById("frame").src="page"+pNum+".htm"; } function prev() { pNum--; if (pNum < 0) pNum=0; document.getElementById("frame").src="page"+pNum+".htm"; } </script> It's nothing fancy, but it's apparently keeping the last page it was on in memory instead of resetting itself, so when I go back to the start page it starts on page 0 and goes to page 10; right now I can stop on page 5, click a link to go back to the starting default page, and when using the 'next page' button it will start on 6 and go from there. Any help or advice would be appreciated. First off, Hello, I plan to be frequenting these forums as I am still learning JavaScript. I am creating a gallery and am having trouble getting the previous and next buttons to work properly with the current image. I was trying to create a solution that would change the current image variable so that the previous and next buttons would correlate. What I am working on can be found here. As you can see the next and previous buttons are not working. Here is my JavaScript: Quote: <script type="text/javascript"> /* following not currently used by this script function show(what) { var find = "Img" + what.id.substring(4); for ( var i = 1; i < 99999; ++i ) { var cur = "Img" + i; var img = document.getElementById(cur); if ( img == null ) return; img.style.display = ( find == cur ) ? "block" : "none"; } } */ var Pg = 0; function Prev() { Pg--; if (Pg < 0) { Pg = 0; } document.getElementById('mainImg').src = imgList[Pg]; document.getElementById('Pg').innerHTML = 'Image '+(Pg+1)+' of '+imgList.length; } function Next() { Pg++; if (Pg >= (imgList.length-1)) { Pg = imgList.length-1; } document.getElementById('mainImg').src = imgList[Pg]; document.getElementById('Pg').innerHTML = 'Image '+(Pg+1)+' of '+imgList.length; } function Pick0() { var Pg = 0; document.getElementById('mainImg').src = imgList[Pg]; } function Pick1() { var Pg = 1; document.getElementById('mainImg').src = imgList[Pg]; } function Pick2() { var Pg = 2; document.getElementById('mainImg').src = imgList[Pg]; } function Pick3() { var Pg = 3; document.getElementById('mainImg').src = imgList[Pg]; } function Pick4() { var Pg = 4; document.getElementById('mainImg').src = imgList[Pg]; } function Pick5() { var Pg = 5; document.getElementById('mainImg').src = imgList[Pg]; } function Pick6() { var Pg = 6; document.getElementById('mainImg').src = imgList[Pg]; } var imgList = [ "../Assets/Images_Revised/40_kitchen.jpg", "../Assets/Images_Revised/40_stair.jpg", "../Assets/Images_Revised/C_front2.jpg", "../Assets/Images_Revised/C_rear_side_combo.jpg", "../Assets/Images_Revised/C_side.jpg", "../Assets/Images_Revised/Y_combo.jpg", "../Assets/Images_Revised/Y_window.jpg" ]; onload = function() { // document.getElementById('mainImg').src = imgList[0]; Prev(); } </script> Here is my Menu: Quote: <a href="#" onclick="Prev();return false"><</a><a href="#" onclick="Pick0();return false">1</a> <a href="#" onclick="Pick1();return false">2</a> <a href="#" onclick="Pick2();return false">3</a> <a href="#" onclick="Pick3();return false">4</a> <a href="#" onclick="Pick4();return false">5</a> <a href="#" onclick="Pick5();return false">6</a> <a href="#" onclick="Pick6();return false">7</a> <a href="#" onclick="Next();return false">></a> Code: <script type="text/javascript" src="external.php?type=js"></script>
<script language="" type="text/javascript">
<!--
for (x = 0; x < 10; x++)
{
document.writeln("<a href=\"showthread.php?t="+threads[x].threadid+"\">"+threads[x].title+"</a>, ");
}
//-->
</script>
My code will display 10 posts, however at the very end it will display an extra ", " which bugs me. How can I strip those last two characters. |
|||||||