|
JavaScript - Need Help Getting A Java Slide Show Onto My Site
i hope this is the right section to post this in. wasnt sure if this question was client side or server side
i have a javascript slideshow that i would like to add to my website. its free to use and it came with some coding when downloaded. my problem is that this is my first time EVER using java (ive fiddled with php tho ) and i cant get the slide show to work on my site. the coding it came with gives you an entire webpage ... i just need the slideshow to go inside a div container instead of being a whole page the following is an embedded style that you can simply copy and paste to notepad, save as an html file, and open in your browser. (im using firefox) all the images etc are already being hosted. so you have to do nothing but open it in your browser to see the script working. like i said, this is the code for an entire webpage ... i just need the slide show by it self in a div container Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinySlider - JavaScript Slideshow</title>
<style all="media" title="YourConnexx Media" type="text/css">
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:#222 url(images/bg.jpg) 50% 0 no-repeat}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:578px; margin:75px auto}
.sliderbutton {float:left; width:32px; padding-top:134px}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:500px; height:300px; border:2px solid #fff; background:#fff}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:500px; height:300px; padding-right:10px}
.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px}
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#666; border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:1px solid #ccc; background:#888}
li#content {width:464px; height:270px; padding:15px 28px 15px 18px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div>
<div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
<div id="slider">
<ul>
<li id="content">
<h1>TinySlider - Simple JavaScript Slideshow</h1>
<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>
<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>
</li>
<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>
<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>
<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>
</ul>
</div>
<div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div>
</div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)">1</li>
<li onclick="slideshow.pos(1)">2</li>
<li onclick="slideshow.pos(2)">3</li>
<li onclick="slideshow.pos(3)">4</li>
</ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:3,
resume:true,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0
});
</script>
</body>
</html>
please show me what i need to get this slide show into a div container by it self. when i do it it doesnt work at all. it appears in the div container as a text area or something but it doesnt work at all. just shows the first slide and nothing else Similar TutorialsHi there This is basically what I want to do: I want to have a slideshow that reads content of a folder and then shows the pictures and has a little fade animation between each image transition. to achieve this: I've done the following: 1. I'm using a php script to read the contents of a folder and spits out results in an array that I can use with my java script 2. im using jquery.cycle plugin to add the "fade" effect. Now my problem is My images are shown but i cant get the fade animation to work on my images. here is how my code looks like: My php file: PHP Code: <? //PHP SCRIPT: getimages.php header('content-type: application/x-javascript'); //This function gets the file names of all images in the current directory //and ouputs them as a JavaScript array function returnimages($dirname="./images") { $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ //if this file is a valid image //Output it as a JavaScript array element echo 'galleryarray['.$curimage.']="'.$file .'";' . "\n"; $curimage++; } } closedir($handle); } sort($files); return($files); } echo 'var galleryarray=new Array();' . "\n"; //Define array in JavaScript returnimages() //Output the array elements containing the image file names ?> My html file: Code: <html>
<meta http-equiv="refresh" content="1000"/>
<head>
<title>Media Signage Slideshow</title>
<style type="text/css">
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.picsimg {
padding: 0px;
border: 0px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
#slideshow { height: 100%px; width: 100%px; margin: auto }
#slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#slide {width: 370px; height: 220px; padding: 0; margin: 0 auto; }
#myslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}
#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0
}
</style>
</head>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});
});
</script>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
galleryarray.sort();
document.getElementById("myslides").setAttribute("src", "images/"+galleryarray[curimg]);
curimg = (curimg+1) % galleryarray.length;
}
$('#myslides').ready(function() {
$('#myslides').fadeOut('slow', function() {
// Animation complete.
});
});
window.onload = function(){
setInterval("rotateimages()", 5000);
}
</script>
<script type="text/javascript" language="JavaScript" src="./code.php"></script>
<body>
<img id="myslides" src="100.jpg">
<?php echo $files ?>
<!-- <div id="myslides"> -->
<!--<img src="100.jpg" />
<img src="101.jpg" /> -->
</body>
</html>
Please tell me how to fix it. Hey there. I'm creating my web-site now. I'm planing to have some slide/object change by itself. I know Java Script perform this task. I have get the code and apply to the image I want. It works. My idea is each of my image upper left corner have the representative number of the slide. When the slide1 go to slide 2 automatically, the number will change colour from 1 to 2. When the user click the number, the slide will change according to the number. Let said I have 3 slide. Each slide and have no 1 ,2 ,3 move forward, move backward icon on the upper left corner. I have slide1 ,slide2, slide3 change by itself within 2.5 second. When the user go thru slide 1, slide 2 and till slide3, user find out he/she interested on slide 1 and by clicking 1 on the upper left corner, the slide will change back to slide 1. Something like showing on the home page at www.easyjet.com.EN or http://www.thomascook.com/ . Both home page show a slide. This is what exactly I want. I learn HTML code before but not Java Script. I have borrow many Java Script reference book. but no idea how to inside the number on the upper left corner on each slide and how the number work accordingly with the slide. So sorry if you can't understand what I was talking about. But, anyone who understand me or have any idea how can I mortify the Java script to what I want. Just answer or email me to trista_soo@yahoo.com or facebook me on sym107@hotmail.com. Thanks for your time and efforts. Your help I really appreciate. Cheers! Good Day: I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site. Thanks very much in advance. I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes: 1. There will be a title bar placed within a right and left arrow on either side. 2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list). 3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out. I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated.. My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong? here is my js Code: var interval = 1500; //1.5 secs
var random_display = 0; //goes in order
//defines where the images are stored
var imageDir = "../image/slideshow1/";
//set images here
var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "02.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "03.jpg");
imageArray[imageNum++] = new imageItem(imagedir + "04.jpg");
//find total amount of images using .length
var totalImages = imageArray.length;
function imageItem(image_location){
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
//This is used if random is set to 1
function randNum(x, y){
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
//get next image
function getNextImage(){
if(random_display){
imageNum = randNum(0, totalImages-1);
} else{
imageNum = (imageNum+1) % totalImages;
}
//return the value now.
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}
function getPrevImage() {
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray[imageNum]);
return (new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
//function to switch images
function switchImage(place){
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
Here is the html with buttons to control the slideshow Code: <div id = "articles">
<div class= "new_article">
<img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0>
<a href="#" onClick="switchImage('slideImg')">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
</div>
</div>
Hi, can someone help me? I am trying to create a slide show which I learn from the JavaScript Tutorials - How to create a basic slide show. It work fine with 1 slide show but when I put 2 slide show in a web page (created 2 set of script), only 1 will work, what do I have to add in order for multiple slide show to work in a page? Below is the script, thank you. <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> I used the slideshow technique described here and was successful: http://www.javascriptkit.com/howto/show2.shtml But when I try to repeat the process to add additional images to the show, it doesn't work. It sticks to the three original images. Any tips as to how to add to this? thanks!! Hello, I have a slide some on my page which contains some images. It scrolls through images fine but i would like to add some control buttons such as pause/play and scroll back Can anyone tell me how i could do this? i have inc my code cheers Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
float:left;
}
.image2 {
border: 1px blue solid;
width: 200px;
height:100px;
float:right;
}
.image3 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 3px;
left: -1000px;
border: 0px;
visibility: hidden;
color: blue;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat3.jpg" width="198px" height="98px" border="0" /><span><img src="sat3.jpg" /><br />Navigon 8450 Live</span></a>
</div>
<br>
<br>
</br>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="iphone.jpg" width="198px" height="98px" border="0" /><span><img src="iphone.jpg" /><br />iPhone 4</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="bbt.jpg" width="198px" height="98px" border="0" /><span><img src="bbt.jpg" /><br />Blackberry torch</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="gphone.jpg" width="198px" height="98px" border="0" /><span><img src="gphone.jpg" /><br />google HTC phone</span></a>
</div>
<br>
<br>
</br>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="cod.jpg" width="198px" height="98px" border="0" /><span><img src="cod.jpg" /><br />Call of duty: Black ops</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="fifa.jpg" width="198px" height="98px" border="0" /><span><img src="fifa.jpg" /><br />Fifa 2011</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="f1.jpg" width="198px" height="98px" border="0" /><span><img src="f1.jpg" /><br />Formula 1 2010</span></a>
</div>
<br>
<br>
</br>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
Hy every one, i need help .I have a program made in visual c++ witch detect motion and makes a file.jpg every time when detects something. I would like to make a web pages witch makes the autorefresh with the last image generated by this program. How do i do that with javascript? I think i must declare a golbal variable witch kepps the path to the most younger file, or to make a list witch keeps all the images and sort it ascended but i don't know how to make this in java script. Can enyone help me ?Thanks in advance i want to create a slide show with javascript, but i don't know how to write a code, i have try full screen image slideshow in javascriptkit.com, but i don't know how to resize, not full screen because i want to insert another think, not only a slide show. how can i make an edit with full screen image slideshow coding?or is there someone can help me with the slide show in javascript, but with fadingtime, not an instant change?
Hi all. This is my first post, so be gentle! I found a really nice "Slide-Show" online, however, the problem is that it is fixed-width. I would like to place it on my home page, but my middle column is "fluid" with a Max-Min width setting so that my home page adjusts to different monitor sizes and resolutions. I could use some help figuring out how to modify the JavaScript so that the Slide-Show is "fluid" as well. Here is a link to my test page. It includes an example of how my home page currently works with a fluid middle column. Then there is a second link to the slide-show that I would like help modifying... http://doubledee.byethost2.com/ Thanks, Debbie I am using CSS navigation that shows/hides on mouseover with a javascript function. I also have a slide show on the page right under the navigation that fades images in and out. When the navigation is visible over an image in the slideshow it is always on top EXCEPT when the image is fading in and out. Once the image is done fading the navigation goes back to the front. VERY ANNOYING! I have tried the z-index with no luck and also tried playing with the absolute and relative positioning. Neither worked as I had hoped. i believe that the problem lies within the Javascript of the slideshow during the fading but I am not sure where to start...Any thoughts? My code: *Navigation* Code: CSS
#nav {
width: 800px;
margin: 0 auto;
padding: 0px 10px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(59, 98, 120);
}
#nav a {
float: left;
padding: 0 15px;
height: 25px;
line-height: 220%;
font-weight: bold;
color: rgb(235, 235, 235);
font-size: 11pt;
text-align: center;
text-decoration: none;
}
#nav a:hover {
color: rgb(0, 0, 0);
}
table.menu {
background: rgb(79, 131, 161);
position: absolute;
visibility: hidden;
}
JAVASCRIPT
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
*Slideshow* Code: HTML
var imgArray = new Array();
imgArray[0] = "images/ss1.jpg";
imgArray[1] = "images/ss2.jpg";
imgArray[2] = "images/ss3.jpg";
imgArray[3] = "images/ss4.jpg";
imgArray[4] = "images/ss5.jpg";
imgArray[5] = "images/ss6.jpg";
imgArray[6] = "images/ss7.jpg";
imgArray[7] = "images/ss8.jpg";
imgArray[8] = "images/ss9.jpg";
slideshowFade('Slideshow1','',imgArray,8,3000);
JAVASCRIPT
var slideshowFadeAnimate = new Array();
var slideshowFadeTimer = new Array();
var slideshowFadeCount = new Array();
var slideshowFadeImages = new Array();
function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
{
if(cl)
cl = ' class="'+cl+'"';
document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');
var ss = document.getElementById(id+'img');
slideshowFadeCount[id] = 0;
slideshowFadeImages[id] = imageArray;
slideshowFadeAnimate[id] = 'run';
slideshowFadeTimer[id] = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
}
function slideshowFadeAnimation(id,holdTime)
{
if(slideshowFadeAnimate[id]=='run')
{
var obj = document.getElementById(id+'img');
var opa = slideshowFadeCount[id]%200;
if(opa==0)
{
slideshowFadeAnimate[id] = 'load';
obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
}
else if(opa==100)
{
slideshowFadeAnimate[id] = 'hold';
setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);
}
else if(opa>100)
opa = 200-opa;
obj.style.opacity = (opa/100).toString();
obj.style.filter = "alpha(opacity="+opa.toString()+")";
slideshowFadeCount[id]++;
if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
slideshowFadeCount[id]=0;
}
}
function slideshowFadeRun(id)
{
slideshowFadeAnimate[id] = 'run';
}
piece of simple javascript that i can't get to behave... it's a basic image/slide show..... in the <head> section..... Code: <script type="text/javascript"> var image1=new image() image1.src="../Images/WebSite/HomePage/HpLavender.jpg"; var image2=new image() image2.src="../Images/WebSite/HomePage/HpCreams.jpg"; var image3=new image() image3.src="../Images/WebSite/HomePage/HpBathMelts.jpg"; var image4=new image() image4.src="../Images/WebSite/HomePage/HpCandles.jpg"; var image5=new image() image5.src="../Images/WebSite/HomePage/HpMostlyMen.jpg"; </script> and then in the body: Code:
<img src="../Images/WebSite/HomePage/HpLavender.jpg" name="slide" border="0" alt="">
<script type = "text/javascript">
var step=1;
function slideit()
{
if (!document.images) {return}
document.images.slide.src=eval("image"+step+".src");
if (step<5) {step++}
else {step=1}
setTimeout("slideit()",2500);
}
slideit();
</script>
The coding seems to be tripping up on the line: document.images.slide.src=eval("image"+step+".src"); (i inserted document.write statements before and after this line and only received the 'before' statement). The image before the javascript kicks in <img src="../Images/WebSite/HomePage/HpLavender.jpg" name="slide" border="0" alt=""> displays fine - and the images listed in the header are correctly named Feel this must be real close but then i've said that before!!! Hello, I'm trying to make a slide show for a website that has simple controls on it. I've attached this example so you can see what i mean.... http://www.bigw.com.au/bigw/home.jsp As you can see they use 3 images, and they have controls to go between images easily. Can someone please help me with this code urgently?? Thanks, S. can any guys help me to fine the jquery based slide show right to left with next previous and auto facilities on div not on ul li based?
I realize this is an overly simple question, but I'm rather horrible at javascript. What I'm doing is changing an img src and having it loop through images. I want it to only start looping when I click and than stop if I click again. It loops through when I click once, but when I click again it starts changing its rate of image switching. Starts off switching at 1000 milliseconds than upon clicking again it switches through two images quickly and than slows again. Code: var myImage = document.getElementById("mainImage");
var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg" ];
var imageIndex=0;
What I assume is the trouble causing function: Code: function changeImage(){
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex=0;
}
}
How the trouble function is being called: Code: var imgSwtch=0;
myImage.onclick= function(){
if(imgSwtch==0){
var intervalHandle = setInterval(changeImage,1000);
imgSwtch=1;
console.log("start");
}
else{
clearInterval(intervalHandle);
imgSwtch=0;
console.log("stop");
}
};
I'm very new at this and have very limited HTML/Java Script knowledge, but since my designer is very busy, I thought I'd take a look at some of this coding and see if I can learn how to do certain things myself. I'm trying to create a clickable slide show. I read all the instructions given on www.javascriptkit.com and created the following: Code: Slide Show Code
<script type="text/javascript">// <![CDATA[
//preload images
var image1=new Image()
image1.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image2=new Image()
image2.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image3=new Image()
image3.src="http://www.moxiecouture.com/images/daddysprincesstutuonesielarge.jpg"
// ]]></script>
<p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" border="0" alt="" width="50" height="75" /></a></p>
<script type="text/javascript">// <![CDATA[
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==2)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==3)
window.location="http://moxiecouture.com/category_2/TuTu-One-Pieces.htm"
}
// ]]></script>
My issue with this is that it's not rotating the images. Of course, there is something I'm missing even though I tried to read the instructions carefully. Can anyone help me understand what I'm doing wrong? Thanks! |
|||||||