|
JavaScript - Slideshow Using Two Dimensional Arrays
Hello all;
I am trying to use two dimensional arrays to create a grid-like slideshow. I have working code for a slideshow using one array, however I was wondering if it is at all possible to move the slideshow in all four directions (instead of just left and right). Here is the code for the left/right slideshow script: Code: <script type="text/javascript">
var present_slide=0;
var images = ["../images/overworld/04-8m.png","../images/overworld/04-8n.png","../images/overworld/04-8o.png","../images/overworld/04-8p.png","../images/overworld/04-8q.png","../images/overworld/04-8r.png","../images/overworld/04-8s.png"]
objImage = new Image();
function download(img_src) {
objImage.src = images[img_src];
}
function displaynext(shift) {
present_slide = present_slide + shift;
if(images.length > present_slide && present_slide >= 0) {
document.images["im"].src = images[present_slide];
var next_slide = present_slide + 1;
download(next_slide); // Download the next image
}
if(present_slide + 1 >= images.length ) {
document.f1.Next.style.visibility = "hidden";
present_slide = images.length - 1;
}
else {
document.f1.Next.style.visibility = "visible";
}
if(present_slide <= 0 ) {
document.f1.Prev.style.visibility = "hidden";
present_slide = 0;
}
else {
document.f1.Prev.style.visibility = "visible";}
}
</script>
</head>
<body onload="displaynext(0)">
<form name="f1">
<img name="im" />
<div class="arrow-nav">
<input type="button" style="background:url(../images/arrow-left.png);" name="Prev" onClick="displaynext(-1);" />
<input type="button" style="background:url(../images/arrow-right.png); float:right;" name="Next" onClick="displaynext(1);" />
</div>
</form>
One way that I am thinking that this might work is if I create multiple row arrays and navigate them using up and down arrow keys. So, clicking left and right within the array will navigate through the contained images, and the up and down arrows will navigate through the arrays. Please let me know if this idea can be possibly implemented or if there is another way to do this. Thank you. Similar TutorialsI have two known methods of creating a javascript array: 1) Double brackets such as: Code: var animation_JD = [[]]; 2) Create and array then create an array inside each array element manually which is the most common method as far as I know. The problem is that the second method requires the array be be defined in size and I require a 2D array, 3D array and 4D array. Using the second method uses far to much memory to be plausible, unless there is a way to make arrays smaller by defining parts of them as integers only? Otherwise for the 1st method I described I don't know how to loop through all elements of the array such as: Code: for(group in animation_JD){
}
So does anyone have another way of creating arrays, defining an array as integers only(ideally not every part of the array) to save memory, or a way to loop through arrays created in the first method? Thanks! I'm not sure why my code is working. I think it maybe because of incorrect storage of multi arrays. Can someone please take a look. Please provide advice on how to improve. Code: <script type="text/javascript">
var route ="Route A - Toronto to Barrie";
var jon, don;
var businfo=[
//[destination/route, pricing, number of available tickets]
["Route A - Toronto to Barrie", 10.10, 38],
["Route B - Toronto to Peterborough", 12.30, 38],
["Route C - Toronto to Montreal", 42.00, 38],
["Route D - Toronto to Thunder Bay", 114.30, 38]
];//end multi-array businfo
function determineRoute() {
for(i=0; i < 5; i++){
if (route === businfo[i][0]) {
jon = businfo[i];
break;
}
}
}
function setNumOfTick(ticketsordered) {
don = jon;
var tickettotal = don.splice(0,1);
tickettotal -= ticketsordered;
don.splice(0,1,tickettotal);
return(2);
}//end setPrice
alert(setNumOfTick(35));
</script>
I need to loop the alphabet and numbers 0-9 to initialize a few thousand arrays. This is for my site and is truly needed. http://www.thefreemenu.com I currently have every array written out and it takes up to much space in my .js file. The majority of my variables are empty but necessary and need to be there (including empty) for my site to work properly. Question is the last part Here's where I'm at. Code: var NewVarLetterOrNum = "a";
eval("_oneofseveralnames_" + NewVarLetterOrNum + "='this part works';");
alert(_oneofseveralnames_a);
This creates the variable _oneofseveralnames_a='this part works' Code: var newArrayLetterOrNum = "a";
eval("_oneofseveralnames_" + newArrayLetterOrNum + "= new Array();");
alert(_oneofseveralnames_a)
This creates the Array _oneofseveralnames_a=new Array(); and all the values in the array are null, but, now a variable like _nl_a[1]='something' can be used elsewhere because the array exists. This is all that is necessary for now because I can probably set all the variables to be blank with something like Code: i=1
while(i<=20){
_oneofseveralnames_a[i]="1-20";
i++
}
alert(_oneofseveralnames_[20]);
So now you have what I came to understand in the first few hours. Now to the hard part : ( I can't make multiple array's dynamically. I dont' know if its because I don't understand loops or arrays or what and its very fustrating. As for any answer you might be so kind as to provide, if you could dumb it down that would be greatly appreciated. Code: var newArray =new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z')
i=1
while(i<=26){
eval("_nl_" + newArray[i] + "= new Array();");
i++
}
alert(newArray[1]) // Is b, but
alert(_nl_b) //I can't get _nl_b to exist, I tried everything including taking away the quotes around the letters in every test
*/
var _nl_a =new Array()
var _img_a =new Array()
var _h_a =new Array()
var _r_a =new Array()
var _m_a =new Array()
var _yt_a =new Array()
var _i_a =new Array()
The above arrays are all the array _name_ parts I need but for example, a has 10 parts, a,p2_a,p3_a,.. p10_a. I need 10 pages for each letter of the alphabet and numbers 0-9 and a special all1, p2_all1 ... p10_all1. Overall 2200 arrays that need to be declared. Currently they are all written out.
/*
Hello, I need your help. I'd like to structure and build an array like the below.: Code: var provinces = [
['Ontario','ON'],
['Quebec','QC'],
['British Columbia','BC'],
['Saskatchewan','SK']
];
then, id like to compare the value (x) against my array ie. Code: var x = 'Ontario'
if (x matches the first value in the array 'provinces') { then let x = ON }
How do you write something like this in javascript? Much thanks and appreciation for all your help, Cheers, Jay Short version: I'm having trouble with "moving subarrays" in a multidimensional associative array. Long version: (Yes, I know that there's technically no such thing as a js associative array and that I'm actually using a generic object.) This is one of those annoying questions for which significant code can't be shown. I'm fetching a JSON object from PHP and parsing it as multi-dimensional associative array that comes out with this "structure": Code: obj[regions][variables][years] = value; My presentation logic works fine for that. Year data is presented for each variable, and variables are grouped by region. For reference, if needed, the display is tabular and similar to this: Code: Regions | Variables | 2003 | 2004 | 2005
=========================================
| measure1 | abcd | efgh | ijkl
=================================
county1 | measure2 | mnop | qrst | uvwx
=================================
| measure3 | yzab | cdef | ghij
=========================================
| measure1 | abcd | efgh | ijkl
=================================
county2 | measure2 | mnop | qrst | uvwx
=================================
| measure3 | yzab | cdef | ghij
=========================================
| measure1 | abcd | efgh | ijkl
=================================
county3 | measure2 | mnop | qrst | uvwx
=================================
| measure3 | yzab | cdef | ghij
=========================================
| measure1 | abcd | efgh | ijkl
=================================
county4 | measure2 | mnop | qrst | uvwx
=================================
| measure3 | yzab | cdef | ghij
=========================================
My problem comes from trying to allow the option to reorganize the grouping - that is, turning it into regions grouped by variable. The display logic can handle it, but I can't get the array handling code right. The desired secondary structure is Code: obj[variable][region][year] = value; Some things I've tried: Code: /* obj is in the format of obj[region][variable][year] = value */
data_arr = new Array();
for (var region in obj)
{
for (var variable in obj[region])
{
for (var year in obj[region][variable])
{
/* fail one */
data_arr[variable][region][year] = obj[region][variable][year];
/* data_arr[variable] is undefined */
/* fail two */
y = obj[region][variable][year];
y_arr = new Array();
y_arr[year] = y;
r_arr = new Array();
r_arr[region] = y_arr;
data_arr[variable] = r_arr;
/* only the values from the last iteration are displayed */
/* fail three */
y = obj[region][variable][year];
y_arr = new Array();
y_arr[year].push(y);
r_arr = new Array();
r_arr[region].push(y_arr);
data_arr[variable].push(r_arr);
/* y_arr[year] is undefined */
}
}
}
And then other permutations of those three. I could run through it easy if not needing the textual index, but that's actually part of my display data, so it has to stay. Can anyone help me with what I'm overlooking? Hi everyone I'm having a hard time, wrapping my head around an array sort+combine function. I have an array which would look somewhat (these are simplified numbers) like this Code: TestArray = [ ["222222","1"], ["222222","1"], ["222222","1"], ["333333","1"] ["111111","1"], ["000000","2"], ["111111","2"], ["111111","2"], ["222222","20"], ]; I got it as far as to be sorted like this: Code: SortedArray = [ ["000000","2"], ["111111","1"], ["111111","2"], ["111111","2"], ["222222","1"], ["222222","1"], ["222222","20"], ["222222","1"], ["333333","1"] ]; And from there to this: Code: BadlyMergedArray = [ ["000000","2"], ["111111,"1","2"], ["222222","1","20","1"], ["333333","1"] ]; But I want to end up with this: Code: MergedArray = [ ["000000","2"], ["111111","1","2"], ["222222","1","20"], ["333333","1"] ]; So the first part of the inner arrays is the first item to be sorted and combined by. After that, the smaller numbers have to do practically the same, while staying in the correct order under the first sort. I'm only a spare time programmer, and my code is probably one of the most confusing pieces of code ever written. I am assuming that this is some fairly easy stuff for one of you guys. I can post my code, but I think there's a much easier solution to it, so I wanted to see if someone can point me in the right direction, or show me how this is properly done. Thanks so much! here's to hoping! patrick/shootingpandas Code: var mySlideShow = document.getElementById("slideShow");
var imageArray=new Array();
imageArray[0]="url(images/Slide1.JPG)";
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";
var imageIndex = 0;
var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");
mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";
function changeRight () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 1;
}
console.log(imageIndex);
}
function changeLeft () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
}
rightArrow.onclick = function() {
changeRight();
}
leftArrow.onclick = function() {
changeLeft();
}
So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work. Any help would be awesome. Hello everybody! first of all I must specify that I don't know almost anything about javascript... I'm trying to introduce a javascript slideshow (I found a free one) on our website and I have a problem: As you can see here on the bottom of the page (http://www.comelity.com/en/pages/about-us.php), when the slideshow changes image, it puts a link over the image without any reason and if you click on the image it reloads the page... I would like to remove this link, but I'm not able... Does anyone know how to solve the problem? I can send the javascript slideshow if you want... Thank you very much! S.P. This slideshow has a drop down menu that lets you go from one picture to another. Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)? I know absolutley nothing about javascript. sorry. Thanks programmers! <!-- configurable script --> <script type="text/javascript"> theimage = new Array(); theimage[0]=["url", "", "1"]; theimage[1]=["url", "", "2"]; theimage[2]=["url", "", "3"]; //########################################### window.onload=function(){ //preload images into browser preloadSlide(); //"jump to" box for (y=0;y<theimage.length;y++) { document.slideshow.imgComboBox[y]=new Option(theimage[y][2]); } //set the first slide SetSlide(0); } //########################################### function SetSlide(num) { //too big i=num%theimage.length; //too small if(i<0)i=theimage.length-1; //switch the image document.images.imgslide.src=theimage[i][0]; //if drop down box if(document.slideshow.imgComboBox){ document.slideshow.imgComboBox.selectedIndex = i; } //if they want name of current slide document.getElementById('slidebox').innerHTML=theimage[i][2]; } //########################################### function PlaySlide() { if (!window.playing) { PlayingSlide(i+1); if(document.slideshow.play){ document.slideshow.play.value=" Stop "; } } else { playing=clearTimeout(playing); if(document.slideshow.play){ document.slideshow.play.value=" Play "; } } // if you have to change the image for the "playing" slide if(document.images.imgPlay){ setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); imgStop=document.images.imgPlay.src } } //########################################### function PlayingSlide(num) { playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed); } //########################################### function preloadSlide() { for(k=0;k<theimage.length;k++) { theimage[k][0]=new Image().src=theimage[k][0]; } } </script> <!-- slide show HTML --> <form name="slideshow"> <table border="1" cellpadding="2" cellspacing="0"> <tr> <td align="center"> <a href="#" onmouseover="this.href=theimage[i][1];return false"> <script type="text/javascript"> document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">') </script> </a> </td> </tr> <tr> <td align="center"><div id="slidebox"></div></td> </tr> <tr> <td align="center"> <select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select> </td> </tr> </table> </form> <!-- end of slide show HTML --> I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images Code:
<div id="imageBox">
<!-- Random Images -->
<img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" />
</div>
and here is the external .js file for it Code:
window.onload = pics;
var thisPic = 0;
var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg");
function pics(){
thisPic = Math.floor((Math.random() * schoolImages.length));
document.getElementById('randImage').src = schoolImages[thisPic];
cycle();
}
function cycle(){
thisPic++;
if(thisPic == schoolImages.length){
thisPic = 0;
}
document.getElementById('randImage').src = schoolImages[thisPic];
setTimeout(cycle, 3 * 1000);
}
I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now? Hello. I was wondering where I can find something like this: It's a slideshow. I need one for my site. Thank you. I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back. Here is the book and the case problem I am on: http://books.google.com/books?id=BeE...page&q&f=false Basically the images is not loading up, or anything is happening. //EDIT : I have the function setup() onLoad in the body ( body onload="setup()" ) Here is my code: FileName: flibrary.js Code: function getStyle(object, styleName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
} else if (object.currentStyle) {
return object.currentStyle[styleName]
}
}
// step 3
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}
FileName: slideshows.js Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 6
Case Problem 2
Author:
Date:
Filename: slideshow.js
Global Variables:
scrollButton
References the scrolling button in the slide show
diffX
Stores the horizontal distance in pixels between the
mouse pointer when the scrolling button is clicked
and the left edge of the scrolling button.
Functions List:
setup()
Initializes the contents of the Web page. Creates
event handlers for the mouse and keyboard events
grabIt(e)
"Grabs" the scrolling button to set up the
horizontal scrolling of the slide show
moveIt(e)
Moves the scrolling button horizontally through
the scrollbar
showSlide(x)
Shows the image corresponding the to the x coordinate
on the scrollbar
dropIt(e)
Drops the scrolling button after the user releases the
mouse button
keyShow(e)
Uses the left and right arrow keys to move the scrolling
button through the scrollbar
*/
var scrollButton;
var diffX;
// step 7
function setup(){
scrollButton = document.getElementById("button");
scrollButton.style.top = getStyle(scrollButton,"top");
scrollButton.style.left = getStyle(scrollButton,"left");
scrollButton.style.cursor = "pointer";
addEvent(scrollButton, "mousedown", grabIt, false);
addEvent(document, "keydown", keyShow, false);
}
// step 8
function grabIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
diffX = parseInt(scrollButton.style.left)- mouseX;
addEvent(scrollButton, "mousemove", moveIt, false);
addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var buttonPosX = mouseX - diffX;
showSlide();
}
// step 10
function showSlide(x){
if(x<20){
x = 20;
}
if(x>299){
x = 299;
}
scrollButton.style.left = x;
var i = Math.floor((x-20)/31);
document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
var evt = e || window.event;
var key = event.keyCode;
var buttonPosX = scrollButton.style.left;
if(key == 37) buttonPosX -= 31;
if(key == 39) buttonPosX += 31;
showSlide(buttonPosX);
}
Hey im looking to get 3 slide shows on 1 website (coded in php). I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this? Hi, I desperately need a javascript slideshow that does the following: 1--shows still images with thumbnails 2--can be played manually or automatically 3--can embed youtube videos 4--audio can accompany slideshows 5--powered by javascript, not Flash so it shows up on iPad Does anyone know where I can get such a slideshow? Thanks hi evey one I need a slideshow like this website . zbiddy.com as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide . I've made my content for each slide and just need a script that change these content I need your help very much Thanks I worked a lot with a friend to change the code, and it's almost there. The next and last buttons still work. The Start buttons is titled 'wri' and the latest button is titled 'end'. The end button does not work. Before I added the end button, the start button worked, but now it sends you to the image alt. Any ideas on what went wrong? Code: window.onload = initLinks;
var myPix = new Array("comic/Issue1_Page00.gif","comic/Issue1_Page01.gif","comic/Issue1_Page02.gif");
var thisPic = 0;
function initLinks() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page03.gif);
}
function imgOn(imgName) {
if (imgName == 'end') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page00.gif);
}
function imgOn(imgName) {
if (imgName == 'wri') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
Solved
I'm looking to adjust the method of the following so that the end users can stop go forward or backwards from the current displayed content. Can't seem to find or get the code write. Unfortunately I dont know much of anything with JavaScript yet... Something like MSN.com or Yahoo.com news area... Code: <script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n');
document.write('.dyncontent{display: none; \n');
document.write('</style>');
}
var curcontentindex=0;
var messages=new Array();
function getElementByClass(classname){
var inc=0;
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i];
}
}
function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
messages[prevcontentindex].style.display="none"; //hide previous message
messages[curcontentindex].style.display="block"; //show current message
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("GetCount()", 1000);
setInterval("rotatecontent()", 5000);
}
}
</script>
<!--// Rolling Spotlight Program //-->
<div class="dyncontent" style="display: block">
Number1
</div>
<div class="dyncontent" >Number2
</div>
<div class="dyncontent" >Number3
</div>
<!--// END OF THE SPOTLIGHT ROLLER //-->
Hi, i am currently using the below slideshow javascript on one location on a webpage. http://www.javascriptkit.com/howto/show2.shtml I have another image on the same webpage, that i would like to turn into a slideshow as well. My problem is, that as soon as i put the "head" code for the second group of images, none of the slideshows work.. Basically, how can i get two slideshows on one page, using the same script? If anyone can help me i would really appreciate Thanks! srhlb |
|||||||