JavaScript - Slideshow Issues
I have this code for my webpage
Code: <head> <style type="text/css"> #ss_image{ -ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)"; filter :progid:DXImageTransform.Microsoft.Fade(duration=2); } </style> </style> </head> <body onload="onload()"> <script type="text/javascript"> function onload(){ for(;;) { setTimeout(slideshow(),3000); } } function slideshow(){ var image=document.getElementById("ss_image") if (image.filters && image.filters.length>0) //if filters[] collection is defined (only in IE) image.filters[0].apply() image.src=(image.src.indexOf("one.png")!=-1)? " two.png" : "one.png" //alternate between two images to change to if (image.filters && image.filters.length>0) image.filters[0].play(2) //2 seconds transition } </script> <img id="ss_image" src="one.png" height="296" width="401" /><br /> </body> </html> My problems a The slideshow stops after one chage Why is this? Also could someone tell me who i could add more images, and how to link each one to a page. Similar TutorialsHello all.. I am relatively new to javascript. I am using a javascript code for a slideshow inside a photo gallery. With the current code there is some degree of overlap between consecutive images so that the images merge for a second. I want a traditional slideshow where one image stays for 3 seconds, fade out without any steps, and next image entering without any delay. Dont want any merging. Which function should I change for that? Is it parameters in set interval? So i purchased a template from template monster for wordpress. http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> 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 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. 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); } 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. 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 --> 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? Hello. I was wondering where I can find something like this: It's a slideshow. I need one for my site. Thank you. 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; } 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 Solved
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? Hi, i'm not a Javascript programmer but have adapted this slideshow from an open source online and i need some help in adding some touches and finishing it off. www.sixtydegreedays.com I want to add timings to the main images so they scroll through at a set interval, as well as being able to be clicked through as they are now, can someone help with this? Also, i cannot figure out where the first image (horsebox) goes once i have clicked through the other links - if i click back to horsebox, the image disappears! These are the two most important things, but it would also be helpful if someone could help me pre-load the images to cut down on load time. Hopefully these are quick fixes and someone can take the time to help. Cheers Hey guys; I work as a webmaster for my school and I am trying to develop a JavaScript slideshow for pictures. I am a beginner to JavaScript, so if my coding is off, please let me know. What I am trying to do is have multiple automatic slideshows for this website. I want each of the slideshow boxes to run through the images, however the coding is wrong, causing the first box to switch through the images for the second box and the second one not switching at all. Sorry if thats confusing, please ask if you need any other specifications. Here is my JavaScript coding: //Slideshow //September 18 NewImg = new Array ("Pictures/Sept18/290.jpg", "Pictures/Sept18/293.jpg", "Pictures/Sept18/304.jpg", "Pictures/Sept18/310b.jpg", "Pictures/Sept18/311.jpg", "Pictures/Sept18/317.jpg", "Pictures/Sept18/323.jpg", "Pictures/Sept18/327.jpg", "Pictures/Sept18/328.jpg", "Pictures/Sept18/331.jpg", "Pictures/Sept18/333.jpg", "Pictures/Sept18/337.jpg", "Pictures/Sept18/339.jpg", "Pictures/Sept18/340.jpg", "Pictures/Sept18/342.jpg", "Pictures/Sept18/344.jpg", "Pictures/Sept18/346.jpg", "Pictures/Sept18/351.jpg", "Pictures/Sept18/352.jpg", "Pictures/Sept18/353.jpg", "Pictures/Sept18/354.jpg", "Pictures/Sept18/356.jpg", "Pictures/Sept18/359.jpg", "Pictures/Sept18/360b.jpg", "Pictures/Sept18/361.jpg", "Pictures/Sept18/362.jpg", "Pictures/Sept18/363b.jpg", "Pictures/Sept18/366.jpg", "Pictures/Sept18/370.jpg", "Pictures/Sept18/374b.jpg", "Pictures/Sept18/379.jpg", "Pictures/Sept18/385.jpg", "Pictures/Sept18/391.jpg", "Pictures/Sept18/392.jpg", "Pictures/Sept18/393.jpg", "Pictures/Sept18/394.jpg", "Pictures/Sept18/398.jpg", "Pictures/Sept18/408.jpg", "Pictures/Sept18/410.jpg", "Pictures/Sept18/415.jpg", "Pictures/Sept18/419.jpg", "Pictures/Sept18/427.jpg", "Pictures/Sept18/428b.jpg", "Pictures/Sept18/429.jpg", "Pictures/Sept18/432.jpg", "Pictures/Sept18/435.jpg", "Pictures/Sept18/440.jpg", "Pictures/Sept18/441.jpg", "Pictures/Sept18/443.jpg", "Pictures/Sept18/448.jpg", "Pictures/Sept18/449.jpg", "Pictures/Sept18/450.jpg", "Pictures/Sept18/455.jpg", "Pictures/Sept18/456.jpg", "Pictures/Sept18/460.jpg", "Pictures/Sept18/461.jpg", "Pictures/Sept18/463.jpg", "Pictures/Sept18/467.jpg", "Pictures/Sept18/470.jpg", "Pictures/Sept18/474b.jpg", "Pictures/Sept18/478b.jpg", "Pictures/Sept18/481.jpg", "Pictures/Sept18/484.jpg", "Pictures/Sept18/486.jpg", "Pictures/Sept18/491b.jpg", "Pictures/Sept18/496.jpg", "Pictures/Sept18/498b.jpg", "Pictures/Sept18/503.jpg", "Pictures/Sept18/505b.jpg", "Pictures/Sept18/506b.jpg", "Pictures/Sept18/508.jpg", "Pictures/Sept18/509.jpg", "Pictures/Sept18/514.jpg", "Pictures/Sept18/525b.jpg", "Pictures/Sept18/527.jpg", "Pictures/Sept18/531b.jpg", "Pictures/Sept18/532b.jpg", "Pictures/Sept18/533b.jpg", "Pictures/Sept18/538b.jpg", "Pictures/Sept18/542.jpg", "Pictures/Sept18/544b.jpg", "Pictures/Sept18/547.jpg", "Pictures/Sept18/549.jpg", "Pictures/Sept18/557b.jpg", "Pictures/Sept18/560.jpg", "Pictures/Sept18/565.jpg", "Pictures/Sept18/567.jpg", "Pictures/Sept18/571b.jpg", "Pictures/Sept18/574b.jpg", "Pictures/Sept18/583b.jpg", "Pictures/Sept18/587.jpg", "Pictures/Sept18/588.jpg", "Pictures/Sept18/597b.jpg", "Pictures/Sept18/610b.jpg"); var ImgNum = 0; var ImgLength = NewImg.length - 1; var delay = 2500; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.sept18.src = NewImg[ImgNum]; } } function auto() { if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } //September 25 NewImg = new Array ("Pictures/Sept25/626b.jpg", "Pictures/Sept25/633.jpg", "Pictures/Sept25/634.jpg", "Pictures/Sept25/636.jpg", "Pictures/Sept25/639.jpg"); var ImgNum = 0; var ImgLength = NewImg.length - 1; var delay = 2500; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.sept18.src = NewImg[ImgNum]; } } function auto() { if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } And here is where in the HTML the coding is referred to: <?php include 'top.php' ?> <img src="Images/Bar_Images/home.png" class="header" /> <p>Welcome to the TCNJ Women's Club Rugby homepage!</p><br /> <p class="sub">Pictures</p> <div class="box"> <a href="http://www.tcnj.edu/~rugby/sept18.php"><img name="sept18" src="Pictures/Sept18/290.jpg" class="slides" align="left" /></a> <p align="right">September 18th, 2010</p> </div> <div class="box"> <a href="http://www.tcnj.edu/~rugby/sept25.php"><img name="Sept25" src="Pictures/Sept25/626b.jpg" class="slides" align="left" /></a> <p align="right">September 25th, 2010</p> </div> <?php include 'bottom.php' ?> As you can see, I am using PHP to refer to other pages, but the JavaScript coding is referred to in the <head> and the <body> tag is onloading the auto() function. Please help me fix this code, or if it is impossible to do it this way, let me know. Thank you. Hello All, I found lightbox to be very useful for certain things, however I was hoping someone could help me out with the code or point me to a tutorial that could do what I am looking for. Similar to lightbox (http://lokeshdhakar.com/projects/lightbox2/) how you can click on an image to open a separate window to display a slideshow, however with lightbox you need to display all images that are included in the slideshow, i.e. thumbnails. I was hoping to find a way to do something similar but without having to display all the images as thumbnails. I want to display only one picture which the user can click on that will open a new window and display a slideshow with multiple images. If this possible? Can someone help me out with this? Any tips or tricks or tutorials that can be shared with me I would greatly greatly appreciate it. Many thanks, bg http://visualslideshow.com/ I want the code for the pictures slideshow that is used in the above link. Help me out! Hi, I am somewhat new to javascript and website design, (as in I mostly try to follow tutorials to figure how stuff works) and was wondering how I would make a rotating photo slideshow (in js). Such as in the following sites: http://www.1stwebdesigner.com/wp-con...inal_small.jpg and http://www.1stwebdesigner.com/wp-con...inal_small.jpg (but instead of clicking on the photos to rotate, an arrow to rotate, such as in the first image/example) Thanks so much in advance Hi, Does anybody know how to create an Image Slideshow like the ones on the main page of http://www.game.co.uk and http://www.burton.co.uk????
|