www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Need Help!

  1. #1
    Join Date
    Apr 2005
    Posts
    33

    Need Help!

    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

  2. #2
    Join Date
    Jan 2005
    Location
    California
    Posts
    135
    Quote Originally Posted by twoboysdad
    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

  3. #3
    Join Date
    Nov 2004
    Location
    las vegas, nevada
    Posts
    18

    Try this... it looks harder than it is :)

    Hi:

    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...

    You can see the slideshow in action on my page:

    http://www.indiconv.com/ecknevada/da...emplation.php3

    HTH

    Vickie

    <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

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:a lpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:a lpha(opacity=10);-moz-opacity:10"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

    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)
    // -->
    //]]>

    </script>

  4. #4
    Join Date
    Apr 2005
    Posts
    33
    Thanks Gorky. I will try that if all else fails!

  5. #5
    Join Date
    Apr 2005
    Posts
    33
    Vicky,

    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

    %>

    <html>

    <head>
    <title>.:: BGBaseBall ::.</title>
    <STYLE>.ivanC11027763885753{position:absolute;visibility:hidden;}</STYLE>
    </head>

    <body vlink="#0000FF" alink="#0000FF">

    <center>
    <table border="0" bgcolor="#000000" cellspacing="1" cellpadding="0">
    <tr>
    <td width="100%" bgcolor="#FFFFFF">
    <table border="0" width="750" height="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top">
    <table border="0" height="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td height="50%" width="212" background="images/left_1.jpg" valign="top">
    <p><img border="0" src="images/5.jpg" width="212" height="141"></p>

    <!-- Left Menu Content (Start) -->

    <% call left_menu %>

    <!-- Left Menu COntent (End) -->

    </td>
    </tr>
    <tr>
    <td height="49%" width="212" background="images/left_1.jpg" valign="top">
    &nbsp;<!-- 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-->

    </td>
    </tr>
    </table>
    </td>
    <td valign="top">
    <table border="0" height="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td background="images/top_1.jpg" height="72">
    <p align="center"><a href="default.asp"><img border="0" src="images/logo_1.gif" width="302" height="72"></a></td>
    <td background="images/right_2.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td background="images/top_2.jpg" height="1">
    <p align="center"><b><font face="Verdana" size="4" color="#FFFFFF">Welcome
    to the 2005 <br>
    BG Baseball website</font></b></td>
    <td background="images/right_3.jpg" width="108"><img border="0" src="<%= rs_selected_picture("picture_path") %>" width="108" height="72"></td>
    </tr>
    <tr>
    <td background="images/top_3.jpg" height="20">&nbsp;</td>
    <td background="images/right_2.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td width="450" height="300"><img border="0" src="images/Score_board.jpg" width="450" height="300"></td>
    <td background="images/right_3.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td align="center" height="20" background="images/top_3.jpg">&nbsp;

    </td>
    <td background="images/right_3.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td align="center" valign="top">&nbsp;

    <table border="0" width="400" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100%">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td width="1%"><img border="0" src="images/Box_Green/upper_1.jpg" width="32" height="47"></td>
    <td width="98%" background="images/Box_Green/upper_2.jpg" nowrap>
    <p align="left"><b><font face="Verdana" size="3" color="#FFFFFF">News
    Alert</font></b></p>
    </td>
    <td width="1%"><img border="0" src="images/Box_Green/upper_3.jpg" width="91" height="47"></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td width="100%">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td width="1%" height="100%"><img border="0" src="images/Box_Green/left_1.jpg" width="19" height="100%"></td>
    <td width="98%">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td width="1%" valign="top"></td>
    <td width="99%" valign="top"><p align="justify"><b><font size="2" face="Verdana"><%= checkEmailLink(rs("news")) %></font></b></p></td>
    </tr>
    </table>
    </td>
    <td width="1%"><img border="0" src="images/Box_Green/right_1.jpg" width="34" height="100%"></td>
    </tr>
    <tr>
    <td width="1%"><img border="0" src="images/Box_Green/lower_1.jpg" width="27" height="32"></td>
    <td width="98%"><img border="0" src="images/Box_Green/lower_2.jpg" width="100%" height="32"></td>
    <td width="1%"><img border="0" src="images/Box_Green/lower_3.jpg" width="34" height="32"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    &nbsp;

    </td>
    <td background="images/right_3.jpg">&nbsp;</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td width="100%" colspan="2" background="images/bottom_1.jpg" nowrap>
    <a href="http://easy-hit-counters.com/stats.php?site=jeffm" target="_top"><img border="0" alt="Free Counters" src="http://beta.easyhitcounters.com/counter/index.php?u=jeffm&s=scoreboard" ALIGN="middle" HSPACE="4" VSPACE="2"></a><script src=http://beta.easy-hit-counters.com/counter/script.php?u=jeffm></script>
    <br><a href="http://easy-hit-counters.com/" target="_top"><font color="#666666">Site Counter</font></a> <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td width="33%"></td>
    <td width="33%">
    <p align="center"><b><font size="2" face="Verdana">Copyright 2004</font></b></td>
    </center>

    <td width="34%">
    <p align="right"><font size="1" face="Verdana"><b><a href="admin/admin_section.asp" target="_blank">BGBB</a></b></font></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    </body>

    </html>

    <%

    rs_selected_picture.close
    set rs_selected_picture = nothing

    rs.close
    set rs = nothing

    db.close
    set db = nothing

    %>

    Thanks again Vicky or anyone else that wants to give it a shot!
    Jeff
    Last edited by twoboysdad; 04-25-2005 at 06:04 AM.

  6. #6
    Join Date
    Nov 2004
    Location
    las vegas, nevada
    Posts
    18

    Re: image slideshow

    Hi Jeff:

    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.

    I think the w3c schools are excellent place to start:
    http://www.w3schools.com/html/

    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:

    <tr>
    <td width="450" height="300"><img border="0" src="images/Score_board.jpg" width="450" height="300"></td>
    <td background="images/right_3.jpg">&nbsp;</td>
    </tr>

    <tr>
    <td width="450" height="300">Javascript cut n paste goes here</td>
    <td background="images/right_3.jpg">&nbsp;</td>
    </tr>

    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.

    Vickie

  7. #7
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    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.
    Last edited by LJK; 04-25-2005 at 05:11 PM.

  8. #8
    Join Date
    Apr 2005
    Posts
    33
    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

  9. #9
    Join Date
    Apr 2005
    Posts
    33
    Thanks El for the info. Do you have links to this free software you mentioned? I would love to check it out further.
    Jeff

  10. #10
    Join Date
    Apr 2005
    Posts
    33
    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?

    Thanks for your help so far!
    Jeff

  11. #11
    Join Date
    Nov 2004
    Location
    las vegas, nevada
    Posts
    18
    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.

    Vickie

  12. #12
    Join Date
    Apr 2005
    Posts
    33
    yeah, i changed the size of the images and tried couple of extentions to see if i had it wrong and nothing seems to work.

    Thanks for your help. Ill keep at it
    Jeff

  13. #13
    Join Date
    Nov 2004
    Location
    las vegas, nevada
    Posts
    18
    Hi Jeff: go here and cut and paste this exactly:

    http://www.indiconv.com/jeff/baseball.html

    Vickie

  14. #14
    Join Date
    Nov 2004
    Location
    las vegas, nevada
    Posts
    18
    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.

    Glad I could help,

    Vickie

  15. #15
    Join Date
    Apr 2005
    Posts
    33
    Vickie,

    Thanks it looks great!

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles