I have a website that has one photo on the index page. I would like that photo to run like a slide show and flip between many photos. Anyone know a good code or software for this? Just want something simple and inexpencive
I have a website that has one photo on the index page. I would like that photo to run like a slide show and flip between many photos. Anyone know a good code or software for this? Just want something simple and inexpencive
thanks
Well, the cheapest way would be to make a gif, though the image may show some slight deterioration from the different file-type.
Faster than an OC-48 Line! More powerful than an AMD Athlon 64 FX-55 Processor! Able to jump entire forums in a single bound!
Roses are #FF0000, violets are #0000FF...
Feeling the angst of a teenage torpor? Visit A to the Power of Two for help/hinderance.
"...and the Lord said to John, Come forth and ye shall receive eternal life, but instead John came fifth and won a toaster."
<pihlopase> Jesus Saves
<jbroome> pases to moses, SCOOOOORE
Stick this script where you want your slideshow to go. Put your images in a folder called 'i', then change the names of either the images or the code in the array. If you have any problems, post again, as I don't know where you're at tinkering-wise.... I got this script to work because of the genius of Oryx Exuro, venerable coder and forum savant...
<script type="text/javascript" language="javascript1.2">
//<![CDATA[
<!--
//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This thing wouldn't work right except for the help of the mysterious but helpful Oryx Exuro
var slideshow_width='400px' //SET IMAGE WIDTH
var slideshow_height='320px' //SET IMAGE HEIGHT
var pause=5000 //SET PAUSE BETWEEN SLIDE (5000=5 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="i/image1.jpg"
fadeimages[1]="i/image2.jpg"
fadeimages[2]="i/image3.jpg"
fadeimages[3]="i/image4.jpg"
fadeimages[4]="i/image5.jpg"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all
var dom=document.getElementById
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100 - .0000001;
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
// -->
//]]>
This seems like my best solution. I am a amature at building websites and just do it for a hobby.
I had a coder that builds all the difficult stuff for me. But I'm no longer in contact with him.
I get the general idea of your code but when i cut and paste it, it wasnt working for me. (i use Front Page)
When i paste it in the html code the code shows through on the preview page.
I followed the hyperlink in your code to the site where it came from. I copy and pasted thier code and it seem to work. However, when i tried to change the code for my photos, i got the same problem as before.
I was curious, if i give you the information, can you edit the code for me so I can see what I'm doing wrong?
The website I am working on is www.bgbaseball.com This is a local city league baseball organization that my sons play for. On the index page you will see a photo of a score board. This is the photo area I would like to have flip through the photos. I volunteered to do thier website when they had no one to do it. SO I am not getting paid and dont care to spend anymore money than i have too. So thats why I am looking for a cheap and easy altenative. My coder did most of the work on this site, but since we are not getting paid, I do the tweaking like adding this feature. And now that I am not in touch with my coder, I cant even ask about this!
I created a folder called "i" as you stated above. I put 4 photos in there they are; ErinBat.jpg, LoganBBat.jpg, Fielding3.jpg and Batting2.jpg
Once I get a working code, i will understand enough by looking at it to add more photos to the code.
Also, Will the code work if I remove the advertisement that is built in it? If I have no choice but have it there, that will be fine but i prefer not to have it as space is limited.
So to summarize;
website; http://www.bgbaseball.com
image file to flip; "i"
images in file; ErinBat.jpg, LoganBBat.jpg, Fielding3.jpg and Batting2.jpg
Complete html code for current index page;
<%@ language="vbscript" %>
<!--#include file="admin/inc.asp"-->
<%
set db = GetDB()
set rs = server.createobject("ADODB.recordset")
rs.open "Select * from news_table where news_id = (select news_id from selected_news_table);", db
set rs_selected_picture = server.createobject("ADODB.recordset")
rs_selected_picture.open "Select * from picture_info where picture_id = (Select selected_picture_id from selected_picture);", db
</td>
</tr>
<tr>
<td height="49%" width="212" background="images/left_1.jpg" valign="top">
<!-- Begin Poll Code --><DIV CLASS=ivanC11027763885753 ID=ivanI11027763885753><A HREF=http://freepolls.com CLASS=ivanL_FP TARGET=>Free Web poll for your Web site - freepolls.com</A></DIV><SCRIPT LANGUAGE=JavaScript SRC='http://twoboysdad.freepolls.com/cgi-bin/polls/004/poll_blank.js?id=ivanI11027763885753'></SCRIPT><!-- End Poll Code-->
I could just recode your page for you, but I think it's better if you learn how to do it yourself, so I will go through step by step, k? I am by no means even qualified at writing Javascript, but I did learn how to take one apart and manipulate it to my purposes.
Even though you are a hobbyist, there is no reason why you shouldn't learn what HTML is all about, so my advice to you is STOP USING FRONTPAGE. Sorry I'm shouting, but Frontpage is horrible, IMO. Just use notepad.
Next important thing to learn is CSS, which helps you style the page and get away from table-based layouts: http://www.w3schools.com/css/
Thirdly, if you stop using Frontpage, you will eliminate a lot of extraneous code (I believe) so if you're worried about conserving space, do that first. I believe in giving credit where credit is due, and since you or I didn't write this script, it is courteous to leave in credit to the author. It will not cause you a problem to have a few extra lines of code there.
Now... no more lecturing, on to your problem
Here is where you are going to put the javascript for the slideshow:
Now you need to change two things in the javascript: the size of the window, so it will match up with your table cell and the photographs, and putting the right file names in the javascript so it knows what's what.
First part:
Change this
var slideshow_width='400px' //SET IMAGE WIDTH
var slideshow_height='320px' //SET IMAGE HEIGHT
var pause=5000 //SET PAUSE BETWEEN SLIDE (5000=5 seconds)
to this:
var slideshow_width='450px' //SET IMAGE WIDTH
var slideshow_height='300px' //SET IMAGE HEIGHT
var pause=5000 //SET PAUSE BETWEEN SLIDE (5000=5 seconds)
Make sure the photos you're going to use for the slideshow are those dimensions also, 450pxX300px.
Next, change this:
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="i/image1.jpg"
fadeimages[1]="i/image2.jpg"
fadeimages[2]="i/image3.jpg"
fadeimages[3]="i/image4.jpg"
fadeimages[4]="i/image5.jpg"
to this:
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="i/ErinBat.jpg"
fadeimages[1]="i/LoganBBat.jpg"
fadeimages[2]="i/Fielding3.jpg"
fadeimages[3]="i/Batting2.jpg"
That's it. If you have those images in a folder named i, which you've uploaded, everything should work fine.
Hi -
GIMP is free software that can be used to create art, manipulate photos and make animated .gif files - among other things. If you want a simpler route, just load your images into it as separate layers [see Grokking the Gimp for more info. about the program] and then check the speed with a preview and save as an image - .gif - animated.
To keep your visitors from being annoyed, set the layers at a really slow speed - could even add other layers for a title, info, etc. - but keep its size as small as you can [literally] - then optimize it to reduce further.
I also wanted to mention that if you're a newbie wanting
to break away into more 'independent' coding, TSW Web Coder 5 is
a really good way to do it. It's free, also.
Good luck,
El
P.S. You may want to change your photo file names to all lowercase and no spaces, just _ as needed.
Thanks Vickie. Sorry i didnt get back sooner. I thought I had this set up to email me with replies so i just checked in. Your info is a lot to absorb so i am going to chew on it for a day or two and play around with it. I think it looks like there is more to it than there is.
Thanks for your help. I will get back with you soon.
Jeff
OK vickie, go to http://www.bgbaseball.com/default1.asp this is a temp page i made for practice. It appears correctly but i get the ole red X in the top left corner. I see the hour glass every 5 seconds so i think it it working but its not showing the image.
The only thing i didnt do was make sure the images were the correct size. could that be the only problem?
I don't know if it's the size of the images, Jeff... why don't you try that and find out? Other than that I can't tell you why it's not working... the only thing I can think of is the folders aren't in the right order or something and the path is wrong.
Hi Jeff:
What happened was you probably forgot something really minor, like a semi-colon or something. Javascript is entirely unforgiving of typos! Anyway, it works now and your sons are really cute! My son plays too. I don't think you need a credit to Dynamicdrive except in the comments of the html, not on your home page.
Im sorry to sound stupid, but how do i open the html of what you have there? I tried cutting and pasting by selecting all over the photo but that didnt work.
Sorry i didnt get back to you sooner. The forum is suppose to email me when there is a reply and it hasnt done it.
Thanks for all your help!! You can send me an email if you like. Use the email in my profile.
Reply With Quote
Originally Posted by twoboysdad
Bookmarks