HTML - How To Position Slideshow ?

Hi everyone,

I'm looking for a html/css script that will allow me to do something similar to the image slideshow on http://trilogyproducts.com/.

The Trilogy Products slideshow is in flash, however we were hoping to replicate it in HTML - in particular the fade in and out automated slideshow, PLUS the ability to click on to the little circle navigation and fade out the current shot and fade in the selected shot.

Any help would be very much appreciated.

Thanks
Bec

I want to create a slideshow, with the pictures rotating at the bottom of my webpage. However, when the page changes it jumps back to the top of the page. Does anyone know how to prevent this?

Thanks.

I'm making a website for a club in my school. I'm trying to put a slideshow script that has javascript and css into the page, and I've gotten it to fit and everything, but the slideshow isn't functioning. Independently, the slideshow works. Here are the links. It would be great if someone could help me with this.

Problematic Site:
http://www.freewebs.com/valleykey/new.htm

Site without slideshow:
http://www.freewebs.com/valleykey/

Slideshow:
http://www.freewebs.com/valleykey/1.htm

<div style="width:600px; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w22.photobucket.com/pbwidget.swf?pbwurl=http://w22.photobucket.com/albums/b339/ashezfal/product-misc/91c6ecdd.pbw" height="180" width="600"><a href="http://photobucket.com/slideshows" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn.gif" style="float:left;border-width: 0;" ></a><a href="http://s22.photobucket.com/albums/b339/ashezfal/product-misc/?action=view&current=91c6ecdd.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif" style="float:left;border-width: 0;" ></a></div>

This is the html code for a photobucket slideshow that i am trying to use on my website. my problem is that when you click on it, it takes you to my album. I know i can change that on photobucket preferences but i just want to make it so that it can't be clicked at all. Can anybody help me?

Right, I have started up a gaming website and I need that Headline Slideshow feature implemented soon as.

Here is what I'm struggling with:

I want to swap the normal action buttons (supplied by the slide generator *liink at bottom) with images I have created.

Buttons I want changed too
(<)Left button =http://i40.tinypic.com/mrftlc.jpg
(>)Right button =http://i39.tinypic.com/5wuo5.jpg

I do not want any other action buttons. But I want my images to be placed around the slide like so http://i40.tinypic.com/2176tf.jpg

Here is the Code:
Code:

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
theimage[1]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];

///// Plugin variables

playspeed=5000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

	//preload images into browser
	preloadSlide();

	//set the first slide
	SetSlide(0);

	//autoplay
	PlaySlide();
}

//###########################################
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 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">
		<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
		<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
		<input type="button" name="play" value="   Play   " onclick="PlaySlide();" title="Autoplay">
		<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
		<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
	</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

(code generated from http://www.ricocheting.com/code/java...e-slideshow-v2 if that helps)

PLEASE NOTE: We do not want the (>>) (<<) or <PLAY> buttons. Just as above.

We would gratefully accept any help - we are really bad with HTML. We have contacted the developer of the code but as of posting there has been no response.

Thx.

below there is a piece of code with slideshow (I took it from http://www.ricocheting.com/code/java...mage-slideshow). I can see only the first picture, not the rest. Can someone help me?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>try5</title>
</head>
<body>
<script type="text/javascript">
// Author: ricocheting.com
// Description: slideshow that allows visitors to flip through a series of images on your website
var x=0;
function rotate(num){
fs=document.ff.slide;
x=num%fs.length;
if(x<0) x=fs.length-1;
document.images.show.src=fs.options[x].value;
fs.selectedIndex=x;}
function auto() {
if(document.ff.fa.value == "Stop"){
rotate(++x);setTimeout("auto()", 5000);}}
</script>
<form name="ff">
<table style="border: 1px solid black; border-collapse: collapse;"
cellpadding="3">
<tbody>
<tr>
<th align="center"></th>
</tr>
<tr>
<td align="center"><img src="IMG0.JPG"
name="show">
</td>
</tr>
<tr>
<td style="border: 1px solid black;" align="center">
<select name="slide"
onchange="rotate(this.selectedIndex);">
<option value="IMG0.JPG"></option>
<option value="IMG1.JPG"></option>
</select>
</td>
</tr>
<tr>
<td style="border: 1px solid black;" align="center"><input
onclick="rotate(0);" value="ll&lt;&lt;"
title="Jump to beginning" type="button">
<input onclick="rotate(x-1);" value="&lt;&lt;"
title="Last Picture" type="button"><input name="fa"
onclick="this.value=((this.value=='Stop')?'Start':'Stop');auto();"
value="Stop" title="Autoplay" style="width: 75px;"
type="button">
<input onclick="rotate(x+1);" value="&gt;&gt;"
title="Next Picture" type="button"><input
onclick="rotate(this.form.slide.length-1);" value="&gt;&gt;ll"
title="Jump to end" type="button">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

There are about 200 photos in a folder d:\photos\.
How to make a script to display slideshow of all photos one by one without entering each photo's name?
I found a script which displays all photos but need to input all photos' name.

I am having problem aligning text next to a javascript slideshow in a table. I can't get text to sit next to the show. It always goes on the top or bottom. Please, any help?

so im trying to put a slide show in the div overly...im putting it in the right section but when i view my profile its right in the middle of the page overlapping writing etc..
how do i get it so its under that heading i put it up instead of it center?

heres my code

ABOUT ME:

<style> body table {margin-top:-50000px;}body td table, body div table {margin-top: 0;}table, tr, td {background-color:transparent;}body div table form{display:none;}body table div form{display:block;}div table td font {visibility:hidden; }a.navbar:active, a.navbar:visited, a.navbar:link { display:none;}a.navbar:hover { display:none; }.navbar {visibility:hidden; display:none;} .userProfiledetail, .userProfileURL, .userProfileSchool, .interestsAndDetails, .friendsComments,.extendedNetwork, .latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;} a.text, table div font a, table div div {visibility:hidden;} table tr td div font {display: none;} body div table td form {display:none!important;}table, td, tr{ background-color:transparent;}td td embed, td td object {position:absolute; left:0px; top:0px; width:260px; height:47px;}td.text embed {width:260px; height:38px;}td.text embed, td.text object {width:260px; height:38px;}

h1 {
font-family: Time New Roman;
font-size: 20pt;
color: ffffff;
font-weight: normal;
border-bottom: 3px double;
border-color: ff3399;
text-align: right;}

h2 {
font-family: Time New Roman;
font-size: 20pt;
color: ffffff;
font-weight: normal;
border-bottom: 3px double;
border-color: ff3399;
text-align: left;}

b {
color: fff;
font-weight: bold;
text-transform: none;}

i {
color: fff;
font-style: italic;
font-weight: normal;
text-transform: lowercase; }

u {font-family: Arial;
font-size: 11pt;
color: fff;
text-decoration: underline;
border-bottom: 1px solid;
border-color: ff3399;}

strike {
font-size: 10pt;
color: fff;
font-style: strikethrough; }

big, small {
color: fff;}

textarea, select, input {
font-family: Arial;
color: fff;
background-color: ff3399;
border: 1px solid fff;
letter-spacing: -1px; }

blockquote {
background-color: transparent;
border: 1px solid;
border-color: ff3399;
padding: 5px;}

body {
background-color: 000000;
background-image: url("http://cbimg6.com/layouts/08/08/30432aa.jpg");
background-repeat: repeat-y;
background-position: center;

scrollbar-face-color: ff3399;
scrollbar-arrow-color: fff;
scrollbar-track-color: 333;
scrollbar-shadow-color: 000;
scrollbar-highlight-color: 777;
scrollbar-3dlight-color: fff;
scrollbar-darkshadow-color: 000;}

.navi:link, .navi:active, .navi:visited {
font-family: Verdana;
font-weight: normal;
font-size: 8pt;
color: ffffff;
text-transform: uppercase;
text-decoration: none;
background-color: ff3399;
display: block;
text-align: center;}

.navi:hover {
font-family: Verdana;
font-weight: normal;
font-size: 7pt;
color: ff3399;
text-transform: uppercase;
text-decoration: none;
background-color: ffffff;
display: block;
text-align: center;}

a:link, a:active, a:visited {
font-family:Arial;
font-weight: normal;
font-size: 11pt;
color: ff3399;
text-transformation: none;
text-decoration: none;
background-color: none;}

a:hover {
font-family: Arial;
font-weight: normal;
font-size: 11pt;
color: ffffff;
text-transformation: none;
text-decoration: none;
background-color: ff3399;}

.right {position: absolute; top: 380; left: 50%; margin-left: -143px; height:; width: 563; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;}

.left {position: absolute; top: 375; left: 50%; margin-left: -365px; height:; width: 170px; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;}

.base {position: absolute; top: 0px; left: 50%; margin-left: -497px;}

</style>




WHO ID LIKE TO MEET?

<div class="base"><img src="http://cbimg6.com/layouts/08/08/30432ab.jpg" /></div>

<div class="right">
<h1>Spotlight on me.</h1>
<center><br /><img src="http://i31.tinypic.com/116nhwy.jpg" border="0" alt="Image and video hosting by TinyPic" /></a><br /></center>
Best daughters in the world; <b>Allie & Stephie</b>, <u>my kids</u>; Steps Dance studio (Hip Hop Instructor) is the job; I am a dancer - i live it love it am it; dancing is a very big apart of my life that and i want to pass that same love to my girls ; Merced College is the school Nursing is the major; i <b><u>LOVE</b></u> anything PINK; I &hearts; my girls; I &hearts; my friends; I &hearts; beer; I &hearts; drinking at applebees; I &hearts; Rap & R&b; I &hearts; late nights; I &hearts; romance movies ; I &hearts; A Walk to Remember; I &hearts; Tattoos; I ♥ coors light; I &hearts; the RAIDERS; I &hearts; my bff amanda always; I &hearts; Mac Make-up; I &hearts; getting my nails done; I &hearts; drinking @ La Ha 2 haha<br /><br /><br />

I hate people who lie; I hate cheaters; I hate broken promise's; I hate caring so ****in much; I hate having a big heart; I hate fights; I hate onions and mushrooms; I hate clowns; I hate traffic; I hate dark beer; I hate tomatos; and that sums me up in a nut shell body

<h1>Welcome To the Show.</h1>
<img src="http://i38.tinypic.com/11kgl8m.jpg" align="left" /><b>Name:</b> Kelley Kellz<br />
<b>Age:</b> 24<br />
<b>Location:</b> merced; califoRnia.<br />
<b>Status:</b> call it what you want.<br />
<b>Occupation:</b> dance instructor; school.<br />
<br /><br />
<br /><br /><br />


<h1>Backstage Pass.</h1>
<p style="visibility:visible;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="320" width="426" style="width:426px;height:320px" data="http://widget-af.slide.com/widgets/slideticker.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://widget-af.slide.com/widgets/slideticker.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="l" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="cy=ms&il=1&channel=2666130979412675759&site=widget-af.slide.com" />
</object>



under "backstage pass"
thats where i want the slideshow but it wont put it under there nor under the "welcome to the show" area

what am i doing wrong?

Hello,

IE is messing things up for me yet again, lets start with the solutions ive tried:


http://homepage.ntlworld.com/bobosola/pnghowto.htm
http://koivi.com/ie-png-transparency/
http://www.twinhelix.com/css/iepngfix/


They are all failing? Im guessing its because of the slideshow theyre in..

Could someone give me some advice here? Have a look at the site, in your Internet Explorer ofcourse, here. Thankyou.

Hey, I'm helping design a site www.tbdgaming.com and we have an ad box up top that shows different pictures and captions for each one, and what we'd like to do is have those pictures (theres 5) switch every x seconds to the next one, and we'd like it to be clean. The code is:
Code:

	<!-- starting headlines -->
			<div class="headlineWrap" id="headlineWrap">

				<!-- headline 1 -->
				<div id="headline1">
					<a href=""><img src="http://i39.tinypic.com/2zycr3n.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1on.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 2 -->
				<div id="headline2" style="display: none;" >
					<a href=""><img src="http://i42.tinypic.com/aazxqh.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2on.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 3 -->
				<div id="headline3" style="display: none;" >
					<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="#javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3on.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 4 -->
				<div id="headline4" style="display: none;" >
					<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4on.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 5 -->
				<div id="headline5" style="display: none;" >
					<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5on.gif" alt="" /></a>
						</div>
					</div>
				</div>
		
			</div>
			<!-- ending headlines -->

And again the site is www.tbdgaming.com, so if anyone could send me the HTML or non-executable java (no .jars to be added to directories) so that the pictures would rotate between eachother I'd really appreciate it. Also if there it a way to shorten the code I would appreciate it, as you can see its very long because its divided up so that each headline is separately coded to work when selected, but is there some way I can combine it into one compact space so that it functions the same but is shorter?

Hi Guys

on this page
www.thepullmanlodge.co.uk/weddings.htm

the top 3 pictures are meant to slideshow into each other. When I preview the site in frontpage it works, but now I've uploaded it online it won't work and just shows the three pictures in a block.

Can anyone help me get this working as it should?

Thanks alot

John

Hello,
i am trying to implement a basic slideshow on my website. My code is as follows:

<img id="img1" height="500" src="" width="500" />

<a href="javascript:moveToNextSlide()">Next</a>

<script type="text/javascript">>

var index=31;

function moveToNextSlide()
{
var slideName="slideshowimages/IMG_00" + index++ + ".jpg";
var img1 = document.getElementById("img1");
img1.src = slidename;
}

moveToNextSlide();
</script>


each image is called IMG_00 followed by a number from 31-41 .jpg. when i view the page the image doesn't appear, there is just a small red cross in a white box and the next function doesn't work.Please can someone help me!
Cheers,
Peter

Hi all,

I cant seem to manage to put links to the slideshow I'm using.

http://fifthmammoth.co.uk/slideshow/example4.html

This doesn't appear to work:

Code:

   <div id="slide_01">
<div id="myShow-1" class="slide-show">
           
           <div class="slide first">
               
               <a href="pro_scherm/index.html"><img alt="" src="slideshow2/images/slide_01.jpg" width="300" height="200">
             <div class="slide-caption">plaatje 1</div></a>
  </div>
            <div class="slide">
                <img src="slideshow2/images/slide_02.jpg" width="300" height="200">
                <div class="slide-caption">plaatje 2</div>
      </div>
  <div class="slide">
                <img src="slideshow2/images/slide_03.jpg" width="300" height="200">
                <div class="slide-caption">plaatje 3</div>
  </div>
</div>

Another thing I'd like to accomplish, to make a link between the slideshow in the mainscreen, and the menubar below. Ideally, if you rollover the slideshow, the matching project in the menubar below lightens. Is it possible to create a rollover effect like this?

Your help would be really appreciated!

Pretty simple, I'm trying to me a slide show for my website (face in, 2.5 seconds later, fade out and move to the next one). I have a problem, I have tried everything to try and get the code working but I don't have a clue what the problem is.

Anyone tell me if you can spot any errors? I have managed to get the image to appear on my page but won't start the slide.

<html>
<body>

<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="Images\double.jpg"
var image2=new Image()
image2.src="Images\family.jpg"
var image3=new Image()
image3.src="Images\room.jpg"
//-->
</script>
</head>

<body>
<center><img src="Images\double.jpg" name="slide" width="500" height="456" /></center>
<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 1.0 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>

</body>
</html>