SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating customized slideshow?

    I would like to create a slideshow like what most wedding sites have but I would like to have some fancy transitions like "Random dissolve, checkerboard, spiral" e.t.c, how can I add any of those to my slideshow, this is a regular fade slideshow I have:

    Code:
     var speed=40;       /* this is the image fade speed - higher value=slower, lower value=faster */
       var timer=4000      /* this is the time that each image is static - 4000=4 seconds */
    
       var pics=new Array();
           pics[0]='images/autumn.jpg';
           pics[1]='images/lace.jpg';
           pics[2]='images/lotus1.jpg';
           pics[3]='images/lotus.jpg';
           pics[4]='images/apple.jpg';
           pics[5]='images/apple4.jpg';
           pics[6]='images/girl.jpg';
           pics[7]='images/clouds.jpg';
           pics[8]='images/blood.jpg';
           pics[9]='images/buddha.jpg';
    
    /****************** these links are optional and can be removed if not required ******************/
    
       var links=new Array();
           links[0]='http://www.google.com/';
           links[1]='http://www.guardian.co.uk/crossword/';
           links[2]='http://www.htmlforums.com/';
           links[3]='http://www.w3schools.com/';
           links[4]='http://www.alistapart.com/';
           links[5]='http://news.bbc.co.uk/';
           links[6]='http://validator.w3.org/';
           links[7]='http://en.wikipedia.org/';
           links[8]='http://tools.dynamicdrive.com/gradient/';
           links[9]='http://www.hoogerbrugge.com/';
    
    /*************************************************************************************************/
    
       var topop=100;
       var botop=0;
       var topnum=0;
       var botnum=1;
       var test=0;
    
    function init() { 
    
      objt=document.getElementById('top');
    
    if(document.getElementById('link')) {
      objl=document.getElementById('link'); 
     }
    else {
      objl=document.getElementById('container');
     }
    
      bimg=document.createElement('img');
      bimg.setAttribute('id','bot');
      bimg.setAttribute('src',pics[1]);
    
      objl.appendChild(bimg);
    
      objb=document.getElementById('bot');
              
      fader=setTimeout(function(){fadeout()},timer);
     }
    
    function fadeout() {
    
    if(document.getElementById('link')) {
       objl.href='#';                       
       objl.style.cursor='default';  
     }
    
    
       test==0?(topop--,botop++):(topop++,botop--);
    
    if(objt.filters) {
       objt.style.filter='alpha(opacity='+topop+')';
       objb.style.filter='alpha(opacity='+botop+')';
    
     }
    else {
       objt.style.opacity=topop/100;
       objb.style.opacity=botop/100;
     }
    if(topop==0){
       test=1;
       topnum+=2;
    if(topnum==pics.length+1) {
       topnum=1;
     }  
    if(topnum==pics.length){
       topnum=0;
     }
       objt.src=pics[topnum];
       clearTimeout(fader);
       return stop();
     }
    if(topop==100){
       test=0;
       botnum+=2;
    
    if(botnum==pics.length) {
       botnum=0;
     } 
    if(botnum==pics.length+1){
       botnum=1; 
     }
       objb.src=pics[botnum];
       clearTimeout(fader);
       return stop();
     }
       setTimeout(function(){fadeout()},speed);
     }
    
    function stop(){
    if(document.getElementById('link')) {
       objl.style.cursor='pointer'; 
     }
    
    if(test==0){
       objl.href=links[topnum];
       topop=100;
       botop=0;
     }
    if(test==1){
    if(document.getElementById('link')) {
       objl.href=links[botnum];
     }
    
       topop=1;
       botop=99;
     }
       setTimeout(function(){fadeout()},timer);
     }
    
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry guys, I had posted this same post in my other thread on "animation" by mistake. Ok, let me add that I don't really need the script posted above as I don't know how modern that script is so I can use any other slideshow script such as this:

    JavaScript Kit- RadialWipe Transition

    but what I am getting at is this, I would like one script but be able to change only the transition effects when needed, can anyone recommend the best way to do this please?

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I do have a great tutorial here:

    Make a Javascript Slideshow | Webmonkey*| Wired.com

    which gives the basic features needed BUT again, my problem is how to incorporate "any" transition effects I should need within this same script? Is there one piece of coding I would need to change or would I have to change up the entire script for each and any transition effect?

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, let me ask a basic question while I build this slideshow, according to the tut found here:

    Make a Javascript Slideshow | Webmonkey*| Wired.com

    This is from that page:

    The random_display variable tells the script whether we want our slide show to display our images in a random or sequential order. In this case, 0 is equal to sequential, 1 is equal to random.

    I don't understand, if 1 is equal to random then shouldn't the code be:

    var random_display = 1;

    instead of

    var random_display = 0;

    ???

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikehende View Post
    I don't understand, if 1 is equal to random then shouldn't the code be:

    var random_display = 1;

    instead of

    var random_display = 0;

    ???
    They're not going to allow random order from the start. They say in the "Make a Features List" section that they're going to have them as sequential, but allow you to use random if you're feeling frisky.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, this is the entire script I have put together from that tut but it is not working on my end, can any of you guys try it on yours and let me know please?

    Code:
    <script type="text/javascript" >
    var interval = 1500;
    var random_display = 0;
    var imageDir = "Test";
    
    var imageNum = 0;
    imageArray = new Array();
    imageArray[imageNum++] = new imageItem(Test + "firstcar.gif");
    imageArray[imageNum++] = new imageItem(Test + "secondcar.gif");
    imageArray[imageNum++] = new imageItem(Test + "thirdcar.gif");
    
    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)
    }
    
    function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    
    function getNextImage() {
    if (random_display) {
    imageNum = randNum(0, totalImages-1);
    }
    else {
    imageNum = (imageNum+1) % totalImages;
    }
    
    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 switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }
    
    <img name="slideImg" src="27.jpg" width=500 height=375 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>
    
    
    
    </script>
    
     </head>
    
    <body onLoad="switchImage('slideImg')">
    
    
    </body>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    First up, you have some html tags inside your scripting code.

    But after that's resolved, Test is not a known variable. Perhaps you meant imageDir instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are these the html tags you're referring to? If so, do you mean that these items should go inside the Body?

    Code:
    <img name="slideImg" src="27.jpg" width=500 height=375 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>
    Also, I replaced imageDir with "Test" because I had thought that the script was asking for the location of the images for the slideshow which is in a folder on my C drive named Test, will replace with imageDir

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikehende View Post
    Are these the html tags you're referring to? If so, do you mean that these items should go inside the Body?
    What I mean is that they should not be inside a script tag.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have adjusted the script to what's below but now I am only seeing the slideshow menu: play slide show pause previous next

    Code:
    <script type="text/javascript" >
    var interval = 1500;
    var random_display = 0;
    var imageDir = "Test";
    
    var imageNum = 0;
    imageArray = new Array();
    imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");
    
    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)
    }
    
    function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    
    function getNextImage() {
    if (random_display) {
    imageNum = randNum(0, totalImages-1);
    }
    else {
    imageNum = (imageNum+1) % totalImages;
    }
    
    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 switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }
    
    </script>
    
     </head>
    
    <body onLoad="switchImage('slideImg')">
    <img name="slideImg" src="27.jpg" width=500 height=375 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>
    
    </body>

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    What do you think will be the result of this?

    imageDir + "firstcar.gif"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed them from within the body and placed back within the HEAD but outside of the script tags, same result:


    Code:
    <script type="text/javascript" >
    var interval = 1500;
    var random_display = 0;
    var imageDir = "Test";
    
    var imageNum = 0;
    imageArray = new Array();
    imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");
    
    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)
    }
    
    function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    
    function getNextImage() {
    if (random_display) {
    imageNum = randNum(0, totalImages-1);
    }
    else {
    imageNum = (imageNum+1) % totalImages;
    }
    
    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 switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }
    
    </script>
    <img name="slideImg" src="27.jpg" width=500 height=375 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>
     </head>
    
    <body onLoad="switchImage('slideImg')">
    
    
    </body>

  13. #13
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    What do you think will be the result of this?

    imageDir + "firstcar.gif"
    I was following the instructions as stated here?

    Code:
    Then just copy and paste that line, change the image names for each one, and we’ve got ourselves an array.
    1	imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");
    2	 
    3	imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");
    4	 
    5	imageArray[imageNum++] = new imageItem(imageDir + "04.jpg");
    6	 
    7	imageArray[imageNum++] = new imageItem(imageDir + "05.jpg");

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikehende View Post
    I was following the instructions
    Go back even further. What are the instructions where the imageDir variable is assigned?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I am understanding your question, this will be the images path name?

    var imageDir = "my_images/";

    If so, I am thinking that since the images are located in the 'Test' folder that I should replace "my_images/" with "Test" or should it be "my_images/Test"? If the latter still doesn't work on my end.

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikehende View Post
    If so, I am thinking that since the images are located in the 'Test' folder that I should replace "my_images/" with "Test" or should it be "my_images/Test"? If the latter still doesn't work on my end.
    What is the location where you have the images stored. Start from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Paul, I am not getting this solved, I have my images [firstcar.gif, secondcar.gif and thirdcar.gif] stored in a folder name "Test" on my C drive so I have reflected that here

    var imageDir = "Test";

    and my images I have reflected that here:

    var imageNum = 0;
    imageArray = new Array();
    imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikehende View Post
    Sorry Paul, I am not getting this solved, I have my images [firstcar.gif, secondcar.gif and thirdcar.gif] stored in a folder name "Test" on my C drive so I have reflected that here

    var imageDir = "Test";

    and my images I have reflected that here:

    var imageNum = 0;
    imageArray = new Array();
    imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
    imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");
    imageDir equals "Test" so what does imageDir + "firstcar.gif" equal?

    It equals *drumroll*
    .
    .
    .
    "Testfirstcar.gif"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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