|
JavaScript - Adding A Javascript Slide Show To A Table Cell??
I have a background slide show from codelifter.com that normally runs in the body - I would like to use it as the background in a table cell.
Thanks in advance for any help, Cyber-guys Here is the code: [CODE] <html> <head> <style> body{ background-repeat: no-repeat; background-position: 200 100;} </style> <script language="JavaScript"> <!-- // (C) 2006 CodeLifter.com var speed = 3000; var crossFadeDuration = 2; var Pic = new Array(); Pic[0] = 'slideshow1_1.jpg'; Pic[1] = 'slideshow1_2.jpg'; Pic[2] = 'slideshow1_3.jpg'; Pic[3] = 'slideshow1_4.jpg'; Pic[4] = 'slideshow1_5.jpg'; var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.body.style.filter="blendTrans(duration=crossFadeDuration)"; document.body.filters.blendTrans.Apply(); document.body.filters.blendTrans.Play();} if (document.body){ document.body.background = Pic[j]; j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', speed)} } //--> </script> <title> CodeLifter.com :: Background Image Slideshow With Crossfade </title> </head> <body onload="runSlideShow()" bgcolor="#000000"> <table border="0" width="444" cellpadding="0" cellspacing="0"> <tr> <td> <font size="2" face="Verdana,Arial" color="#FFFFFF"> Lorem ipsum dolor situm amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer... </font> </td> </tr> </table> </body> </html> Similar TutorialsI have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.
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!! 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, I am trying to use the onmouseover on a table element (table/row/cell) when creating the table using HTML everything is ok. Code: <TABLE border="2" >
<TR >
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';" >Mauritania</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="alert('amit')">21N</TD>
<TD>24N</TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
However when I am trying to do the same using javascript it is not working. I can see the correct table data and background color but it doesnt change on mouse over. Code: function test_table(srcHolder)
{
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "black";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<3; i++)
{
tmpRow = srcTable.insertRow()
for(j=0; j<3; j++)
{
tmpCell = tmpRow.insertCell()
tmpCell.innerText = j;
tmpCell.bgColor ="red"
tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
tmpCell=null;
}
tmpRow = null;
}
}
can someone explain to me what's wrong? I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with. The IMPORTANT PART IS HE I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area. How can this be done? Note: The entire portion of the stylesheet is not present. Let me know if something important is missing. Code: <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>MouseOver-Images</title>
<style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
</style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="kdwhdMAINPHOTO"
style="text-align: center; background-color: white;">
<!--Image 1--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
name="swap" style="border: 0px solid rgb(105, 105, 105);"
height="450" width="450">
<table id="kdwhdTHUMB" border="0" cellpadding="0"
cellspacing="0" width="616">
<tbody>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
alt="Click on the picture below to enlarge" height="25"
width="616"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
alt="" height="10" width="616"></td>
</tr>
<tr>
<td id="kdwhdTHUMBNAILS"><!--Image 1--><img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 2--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 3--> <img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 4--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 5--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
height="80"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
alt="" height="10" width="616"></td>
</tr>
</tbody>
</table>
</td>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
alt="" height="1" width="12"></td>
<td id="kdwhdTABLE">
<table border="0" cellpadding="5" cellspacing="0"
width="296">
<tbody>
<tr>
<td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR1C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff
</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Hello, I am new to JavaScript. I have stuck up at a point. I have generated a table of given dimensions (say 5x5) using JavaScript. Using Mouse events, I want to add a functionality which would display the position of the cell in that table whenever mouse pointer hovers over a particular cell. Here's what I have done. Code: <html>
<body>
<h1 align="center"><u>ITA Tutorial</u></h1>
<h3>Problem Statement</h3>
<p>Prepare the table of 5 X 5. On the cursor movement over the table, display the table cell no with row X column value.</p>
<br><br>
<table border="1" align="center" cellpadding="2">
<script type="text/JavaScript">
var i, j
for (i=1;i<6;i++)
{
document.write("<TR>")
for(j=1;j<6;j++)
document.write("<TD> </TD>")
document.write("</TR>")
}
</script>
</table>
</body>
</html>
I tried adding onMouseover event in the <TD> tag but somehow the whole table disappears when I do that. Please help. Hi, I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than. Below is my javascript code: Code: <script type="text/javascript">
function hallo(){
var value1=200
var inputVal = window.document.getElementById("one").value;
//alert(negNum);
if(inputVal > value1){
window.document.getElementById("color").style.color="red";
}
else
if(inputVal < value1)
{
window.document.getElementById("color").style.color="green";
}
else
if(inputVal == value1)
{
window.document.getElementById("color").style.color="#FF7E00";
}
}
</script>
And below is my php script that displays the data in a web table. Code: <body>
<form>
Value1: <input type="text" name="one" id="one" ><br/>
Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
<br/>
Value3: <input type="text" name="three" id="$cell" value="test data">
</form>
<?php
require_once("database.php");
$CustID=$_POST['CustomerID'];
$query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID
AND c.CustomerID='".$CustID."'";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th>
<th><font face="Arial, Helvetica, sans-serif">Title</font></th>
<th><font face="Arial, Helvetica, sans-serif">First_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th>
<th><font face="Arial, Helvetica, sans-serif">January</font></th>
<th><font face="Arial, Helvetica, sans-serif">February</font></th>
<th><font face="Arial, Helvetica, sans-serif">March</font></th>
<th><font face="Arial, Helvetica, sans-serif">April</font></th>
<th><font face="Arial, Helvetica, sans-serif">May</font></th>
<th><font face="Arial, Helvetica, sans-serif">June</font></th>
</tr>
<?php
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"CustomerID");
$f2=mysql_result($result,$i,"Title");
$f3=mysql_result($result,$i,"First_Name");
$f4=mysql_result($result,$i,"Last_Name");
$f5=mysql_result($result,$i,"Meter_No");
$f6=mysql_result($result,$i,"January");
$f7=mysql_result($result,$i,"February");
$f8=mysql_result($result,$i,"March");
$f9=mysql_result($result,$i,"April");
$f10=mysql_result($result,$i,"May");
$f11=mysql_result($result,$i,"June");
?>
<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td>
</tr>
<?php
$i++;
}
?>
</body>
As you can see from my javascript, i am getting the elements by id (getElementById("color")). Currently, only the first <td> with id='color' is changing when the value is entered. How do I make the text in other table cells with id='color' change color when the comparison value is entered? 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.. 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. 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> 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>
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>
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. 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';
}
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 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 |
|||||||