Javascript Gallery Help

This is a discussion on Javascript Gallery Help within the Tech Board forums, part of the Community Boards category; I have a nice little piece of code and displays a picture for a few seconds, then switchs to the ...

  1. #1
    #include <me!> Flakster's Avatar
    Join Date
    May 2005
    Location
    Canada
    Posts
    50

    Javascript Gallery Help

    I have a nice little piece of code and displays a picture for a few seconds, then switchs to the next (I believe it was written by someone on this board, props to them!). Very clean and simple, but it is a little too simple. It displays all the pictures the same size, which can cause some pictures to distort. Is there any way to get around this? Such as setting certain pictures to have a different width and height?

    Here is the script...

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- Begin
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 2000;
    // Duration of crossfade (seconds)
    var crossFadeDuration = 1;
    // Specify the image files
    var Pic = new Array();
    // to add more images, just continue
    // the pattern, adding to the array below
    
    Pic[0] = 'images/1.jpg'
    Pic[1] = 'images/2.jpg'
    Pic[2] = 'images/3.jpg'
    Pic[3] = 'images/4.jpg'
    Pic[4] = 'images/5.jpg'
    Pic[5] = 'images/6.jpg'
    Pic[6] = 'images/7.jpg'
    Pic[7] = 'images/8.jpg'
    Pic[8] = 'images/9.jpg'
    Pic[9] = 'images/10.jpg'
    
    // do not edit anything below this line
    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.images.SlideShow.style.filter="blendTrans(duration=2)";
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
    document.images.SlideShow.filters.blendTrans.Apply  ();
    }
    document.images.SlideShow.src = preLoad[j].src;
    if (document.all) {
    document.images.SlideShow.filters.blendTrans.Play(  );
    }
    j = j + 1;
    if (j > (p - 1)) j = 0;
    t = setTimeout('runSlideShow()', slideShowSpeed);
    }
    //  End -->
    </script>
    
    <body onLoad='"runSlideShow()">
    Thanks.

  2. #2
    Amazingly beautiful user.
    Join Date
    Jul 2005
    Location
    If you knew I'd have to kill you
    Posts
    254
    There are several problems with your code. First off, the code which would cause the image to be restrained to size would be in your creation of the image "SlideShow", which you have not even pasted. Perhaps you do not have this, in which cause it should not be working at all. Second off, "<body onLoad" has an apostrophy which it should not. Note, I tested this in Firefox, not Internet Explorer, so your motion may vary. Anyway, here is some code which works, picture changing size and all.

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- Begin
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 2000;
    // Duration of crossfade (seconds)
    var crossFadeDuration = 1;
    // Specify the image files
    var Pic = new Array();
    // to add more images, just continue
    // the pattern, adding to the array below
    
    Pic[0] = 'images/1.jpg'
    Pic[1] = 'images/2.jpg'
    Pic[2] = 'images/3.jpg'
    Pic[3] = 'images/4.jpg'
    Pic[4] = 'images/5.jpg'
    Pic[5] = 'images/6.jpg'
    Pic[6] = 'images/7.jpg'
    Pic[7] = 'images/8.jpg'
    Pic[8] = 'images/9.jpg'
    Pic[9] = 'images/10.jpg'
    
    // do not edit anything below this line
    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.images.SlideShow.style.filter="blendTrans(duration=2)";
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
    document.images.SlideShow.filters.blendTrans.Apply    ();
    }
    document.images.SlideShow.src = preLoad[j].src;
    if (document.all) {
    document.images.SlideShow.filters.blendTrans.Play(    );
    }
    j = j + 1;
    if (j > (p - 1)) j = 0;
    t = setTimeout('runSlideShow()', slideShowSpeed);
    }
    //  End -->
    </script>
    
    <body onLoad="runSlideShow()">
    <html>
    <body>
    <img src="images/1.jpg" name="SlideShow">
    </body>
    </html>
    Enjoy your day.
    Programming Your Mom. http://www.dandongs.com/

  3. #3
    Super Moderater.
    Join Date
    Jan 2005
    Posts
    374
    This link should provide you with more than enough
    information to get you started.

    http://www.dynamicdrive.com/dynamicindex14/index.html

  4. #4
    #include <me!> Flakster's Avatar
    Join Date
    May 2005
    Location
    Canada
    Posts
    50
    Thanks guys.

  5. #5
    #include <me!> Flakster's Avatar
    Join Date
    May 2005
    Location
    Canada
    Posts
    50
    Ok I went to dynamicdrive.com and got this script...

    Code:
    <script language="JavaScript1.2">
    
    var variableslide=new Array()
    
    //variableslide[x]=["path to image"]
    
    variableslide[0]=['price001.png']
    variableslide[1]=['price002.png']
    variableslide[2]=['price003.png']
    
    //configure the below 3 variables to set the dimension/background color of the slideshow
    
    var slidewidth='800px' //set to width of LARGEST image in your slideshow
    var slideheight='600px' //set to height of LARGEST iamge in your slideshow, plus any text description
    var slidebgcolor='#F3F3F3'
    
    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=3000
    
    ////Do not edit pass this line////////////////
    
    var ie=document.all
    var dom=document.getElementById
    
    for (i=0;i<variableslide.length;i++){
    var cacheimage=new Image()
    cacheimage.src=variableslide[i][0]
    }
    
    var currentslide=0
    
    function rotateimages(){
    contentcontainer='<center>'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
    contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='</a>'
    contentcontainer+='</center>'
    if (variableslide[currentslide][2]!="")
    contentcontainer+=variableslide[currentslide][2]
    
    if (document.layers){
    crossrotateobj.document.write(contentcontainer)
    crossrotateobj.document.close()
    }
    else if (ie||dom)
    crossrotateobj.innerHTML=contentcontainer
    if (currentslide==variableslide.length-1) currentslide=0
    else currentslide++
    setTimeout("rotateimages()",slidedelay)
    }
    
    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
    
    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
    if (document.layers)
    document.slidensmain.visibility="show"
    rotateimages()
    }
    
    if (ie||dom)
    start_slider()
    else if (document.layers)
    window.onload=start_slider
    
    </script>
    
    <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>
    I need to make sure that the pictures do not exceed 800px by 600px on screen, how can I do this without having all the pictures be 800 by 600 (Which would cause some to distort)?

    Code:
    var slidewidth='800px' //set to width of LARGEST image in your slideshow
    var slideheight='600px' //set to height of LARGEST iamge in your slideshow, plus any text
    That code doesn't do it.

  6. #6
    Super Moderater.
    Join Date
    Jan 2005
    Posts
    374
    I need to make sure that the pictures do not exceed 800px by 600px on screen, how can I do this without having all the pictures be 800 by 600 (Which would cause some to distort)?
    I don't think it would distort the image. The information for the script says it provides a slideshow where the user needn't worry about the size of their pictures. Distortion shouldn't be an issue here.



    Second, remember this is just a template. So once you've managed to get your slideshow working you may have a problem incorporating it into your current web page. For example, how do you get the slideshow to sit just after your menu bar or whatever?

    A solution to this work be to open up a web editor, such as microsoft frontpage, and then play around with the code. In most circumstances this should be enough however, by changing the code you may encounter other problems with the rest of your script. For example, your changes could affect the way other dynamic elements of your website are displayed.

    Third, if you intend to actually use this on the net, be aware that just because the script looks ok in your browser and on your operating system, doesn't necessarily mean it will look the same for everyone else. Lots of people use Firefox as an alternative to IE, be aware of the differences exhibited when using these browsers.


    If you're serious about web design, may you might want to start from scratch- get a book on HTML or whatever. That way you will be able to create whatever you want where everything can sit on your page as you have envisaged. If not, it's probably gonna be a lot of trial and error, and more 'I hope this works' as opposed to 'I know this is gonna work.'


Popular pages Recent additions subscribe to a feed

Similar Threads

  1. JavaScript book recommendations
    By neandrake in forum Tech Board
    Replies: 2
    Last Post: 04-05-2009, 01:27 PM
  2. Replies: 2
    Last Post: 03-10-2009, 09:36 PM
  3. Javascript question
    By Hesacon in forum Tech Board
    Replies: 2
    Last Post: 06-05-2005, 09:39 AM
  4. Javascript: Error in FTP access
    By alphaoide in forum Tech Board
    Replies: 2
    Last Post: 05-10-2005, 08:13 AM
  5. JavaScript grafic
    By Zahl in forum A Brief History of Cprogramming.com
    Replies: 18
    Last Post: 11-11-2002, 08:02 AM

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21