Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating a slideshow program

    Hey everyone, I am writing a Javascript program which requires several different functions to be assigned to buttons, and an array created as the source of images in the program. I have written/looked at/worked on it for hours and hit a wall. Can't make heads or tails of it anymore, and I would really appreciate any insight on where to go or points of weakness in my code! If anyone is willing to help me out, let me know and I will post.

    Again any help or knowledge would be MUCH appreciated!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Post what code you have so far so we can decide how much effort it will take to help you.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's the code that I have written so far.

    <!DOCTYPE html>

    <html>
    <head>

    <style type="text/css">body{background-color:#FFF1CC;}
    img {padding:1px; border:1px solid;}
    </style>
    <title>photoviewer</title>

    </head>

    <body>

    <body onload = "main()">

    <form>

    <h1><u>Photo Viewer</u></h1>

    <br><h2><img id="theImage" src="umcp/InitialImage.jpg" alt="viewerImg" /></h2>

    Photos' Folder:<input type="text" id=folderName" value="umcp/" /></br>

    <br>Common Name:<input type="text" id="myTextField" value="college" /></br>
    <br>Start Photo Number:<input type="text" id="startNumber" value="2" />
    End Photo Number:<input type="text" id="endNumber" value="4" /></br>

    /*user entry*/

    <br>Photo Being Displayed:<input type="text" id="displayedPhoto" value="Initiallimage.jpg" /><br>

    <input type="button" id="loadPhotosButton" value="Load Photos" />
    <input type="button" id="nextPhotoButton" value="Next Photo" />
    <input type="button" id="previousPhotoButton" value="Previous Photo" />
    <input type="button" id="firstPhotoButton" value="First Photo" />

    </form>


    <script type="text/javascript">

    /*global variables*/

    var photosArrayGlobal;
    var photoIndexGlobal;

    /*main function*/

    function main(){

    var f = "umcp/";
    var c = "photosArrayGlobal";
    var x= ("f + c + imageNumber + (".jpg"));

    var buttonElement1 = document.getElementById("loadPhotosButton")
    buttonElement1.onclick = loadPhotos;

    var buttonElement2 = document.getElementById("nextPhotoButton");
    buttonElement2.onclick = next;
    (k = 0; k <= limit; k++)

    var buttonElement3 = document.getElementById("previousPhotoButton");
    buttonElement3.onclick = previous;

    var buttonElement4 = document.getElementById("firstPhotoButton");
    buttonElement4.onclick = firstPhoto;

    /*displayPhoto code, use getsetattribute ezxample*/
    /*also, displayedPhoto is not a button. how to make it function??*/

    var photoTextName = document.getElementById("displayedPhoto");
    buttonElement2.onclick = displayPhoto; /*how do the displayedPhoto and nextPhoto elements share the same button?
    DO they share the same button??? not described in video*/

    /*<.getElementById("displayedPhoto").value idk if this works or where it came from, try again after
    photoTextName on line 72>*/

    }

    /*update photo display*/

    function displayPhoto(photo){

    var photoTextName = document.getElementById("displayedPhoto");
    var currentPhoto = photoTextName.getAttribute("src");

    var showPhoto = (photosArrayGlobal + photoTextName);
    displayedPhotoValue.onclick = displayPhoto;

    /*when someone writes a particular value in the associated text field, it should return the photo
    they request as associated with its name. via array or folder itself??*/

    // DO NOT PUT ()
    }

    /*start number and end number*/

    function validNumbers(startNumber,endNumber){

    var startNumber=0;
    var endNumber=0;

    This function will return true if startNumber is less than or equal to endNumber, and false otherwise

    if (startNumber<=Endnumber);

    return "true";

    else (return="false");
    }


    /* ARRAY*/

    function createArray(startNumber,endNumber){

    var idx=0;

    while (idx < numberOfEntries) {
    data[idx] = photoIndexGlobal;
    idx++;
    }

    var startNumber=;
    var endNumber=;

    photosArrayGlobal=newArray();

    for (var idx = 0; idx < photosArrayGlobal.length; idx++) {
    photosArrayGlobal[idx] = idx;

    var totalImages=photosArrayGlobal.length;

    return= /*document.getElementById?*/

    }

    /*Load Photos Button*/

    function loadPhotos(){

    var imageElement = document.getElementById("theImage")
    var currentPhoto = imageElement.getAttribute("src");

    /* This function will be called when the "Load Photos" button is selected.The function will read the folder's name,common's name, start photo number, and end photo number and initialize the photosArrayGlobal array with the names of photos that belong to the specified number range. The first photo in the range will be displayed and the "Photo Being Displayed" text field will display the full name of the photo*/

    var photoToDisplay = document.getElementById ()
    imageElement.setAttribute("src",photoToDisplay);

    /*how to associate here with button, if necessary*/
    }

    /*First Photo*/

    function firstPhoto{

    /*This function will be called when the "First Photo" button is selected.
    It will display the first photo in the array. It is assumed that the
    loadPhotos function has already being called.
    The "Photo Being Displayed" text field needs to be updated accordingly*/

    /*sends viewer back to first photo in array*/

    }

    /*next*/

    function next{

    /* This function will be called when the "Next Photo" button is selected.
    It will display the next photo in the array. If the last photo is being
    displayed, then the first one should be displayed. It is assumed that the
    loadPhotos function has already being called.
    The "Photo Being Displayed" text field needs to be updated accordingly*/

    var imageElement = document.getElementById("theImage" + photoIndexGlobal);
    var currentPhoto = imageElement.getAttribute("src" + photoIndexGlobal); // retrieving value of src atrribute

    var photoToDisplay = imageElement.setAttribute("src" + imageElement);/*photosArrayGlobal.value; Not sure how to write this so that only the specified value is shown*/

    }

    /*previous*/

    function previous{

    /*This function will be called when the "Previous Photo" button is selected.
    It will display the previous photo in the array. If the first photo is being
    displayed, then the last one should be displayed. It is assumed that the loadPhotos
    function has already being called. The "Photo Being Displayed"
    text field needs to be updated accordingly*/

    var imageElement = document.getElementById("theImage");
    var currentPhoto = imageElement.getAttribute("src"); // retrieving value of src atrribute

    var photoToDisplay = photosArrayGlobal.value;
    imageElement.setAttribute("src", photoToDisplay);

    }

    </script>
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    again, please excuse any open-endedness or nonsensical notes.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    You may run into a number of problems when you let the user enter the folder name as well as then photo number when there is no indication of how many photos are available not what other folders names are possible (especially if they are a poor typist or capitalize when the entries are case sensitive).

    I appears that you are looking for a simple gallery to display images.
    I would suggest starting simple and building upon some working (and modifiable) code.

    See if this script, or a modified version of the code, will meet your needs.
    (Below is a modified version of a submission I made to: http://www.javascriptsource.com/imag...e-gallery.html )

    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Simple Slide Gallery </title>
    <script type="text/javascript">
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    imgArray = [
      '11.jpg','21.jpg','31.jpg','41.jpg','51.jpg',
      '12.jpg','22.jpg','32.jpg','42.jpg','52.jpg',
      '13.jpg','23.jpg','33.jpg','43.jpg','53.jpg',
    ]
    var slide=0;
    
    function slideshow(slide_num) {
      slide= slide_num;
      document.getElementById('mypic').src=baseURL+imgArray[slide_num];
    }
    
    function slideshowUp() {
      slide++;
      slide = slide % imgArray.length;
      slideshow(slide);
    }
    
    function slideshowBack() {
      slide--;
      if (slide < 0) {slide=imgArray.length-1;}
      slide = slide % imgArray.length;
      slideshow(slide);
    }
    
    window.onload = function () {
      slideshow(0);
    }
    
    </script>
    
    </head>
    <body>
    
    <div style="text-align: center">
      <!--  Place the first image here  -->
      <img src="" id="mypic" alt="information" border="0" height="150" width="100">
      <br>
      <a href="#" onclick="slideshow(0); return false;">First</a> |
      <a href="#" onclick="slideshowBack(); return false;">« Previous</a> |
      <a href="#" onclick="slideshowUp(); return false;"> Next »</a>
      <a href="#" onclick="slideshow((imgArray.length-1)); return false;">Last</a>
    </div>
    
    </body>
    </html>
    It is easy enough to add some CSS to make it prettier.

    BTW: You should add [ code] and [ /code] tags (without the spaces) to make
    your script easier to analyze, copy and comment upon by the members of the forum.

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you! I will try and incorporate this into what I have so far. it looks so much more clear. I really appreciate it!

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, I completely agree with your ideas about allowing users to enter data. This is for a class and the professor is very particular, even if the program is somewhat impractical.

  • #8
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey Robert, here is how I modified what I have done so far based on jmrker's code. Thank you for taking the time to look!


    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
        
        <style type="text/css">body{background-color:#FFF1CC;}
                                img {padding:1px; border:1px solid;}
                                </style>
        <title>photoviewer</title>
        
    </head>
    
    <body>
        
     <body onload = "main()">
        
            <form>
                
                <h1><u>Photo Viewer</u></h1>
                
                <br><h2><img id="theImage" src="umcp/InitialImage.jpg" alt="viewerImg" /></h2>
                
                Photos' Folder:<input type="text" id=folderName" value="umcp/" /></br>
                
                <br>Common Name:<input type="text" id="myTextField" value="college" /></br>
                <br>Start Photo Number:<input type="text" id="startNumber" value="2" />
                End Photo Number:<input type="text" id="endNumber" value="4" /></br>
                
                /*user entry*/
                
                <br>Photo Being Displayed:<input type="text" id="displayedPhoto" value="Initiallimage.jpg" /><br>
                
                <input type="button" id="loadPhotosButton" value="Load Photos" />
                <input type="button" id="nextPhotoButton" value="Next Photo" />
                <input type="button" id="previousPhotoButton" value="Previous Photo" />
                <input type="button" id="firstPhotoButton" value="First Photo" />
            
            </form>
        
        
        <script type="text/javascript">
        
        /*global variables*/
        
        
        var photoIndexGlobal = 0;
        var photosArrayGlobal =  ['college1.jpg', 'college2.jpg', 'college3.jpg', 'college4.jpg','college5.jpg',
                                    'college6.jpg','college7.jpg','college8.jpg','college9.jpg','college10.jpg',
                                    'college11.jpg','college12.jpg','college13.jpg','college14.jpg',
                                    'college15.jpg','college16.jpg'];/*"the array will have no values assigned", so is this wrong?*/
        
        /*main function*/
        
        function main(){
            
            var f = "umcp/";
            var c = "photosArrayGlobal";
            var x= ("f + c + imageNumber + (".jpg"));
            
                    var buttonElement1 = document.getElementById("loadPhotosButton")
                     buttonElement1.onclick = loadPhotos; 
                    
                    var buttonElement2 = document.getElementById("nextPhotoButton");
                    buttonElement2.onclick = next;
                    
                     var buttonElement3 = document.getElementById("previousPhotoButton");
                    buttonElement3.onclick = previous;
                    
                     var buttonElement4 = document.getElementById("firstPhotoButton");
                    buttonElement4.onclick = firstPhoto;
                    
                    /*displayPhoto code, use getsetattribute ezxample*/
                    /*also, displayedPhoto is not a button. how to make it function??*/
                    
                     var photoTextName = document.getElementById("displayedPhoto");
                    buttonElement2.onclick = displayPhoto; /*how do the displayedPhoto and nextPhoto elements share the same button?
                                                   DO they share the same button??? not described in video*/
                    
                    /*<.getElementById("displayedPhoto").value idk if this works or where it came from, try again after
                    photoTextName on line 72>*/
                
        }
        
        /*update photo display*/
        
        function displayPhoto(photo){
            
            
            photoIndexGlobal = document.getElementById("displayedPhoto");
            
           var currentPhoto = document.getAttribute("src");
           var buttonElement = document.getElementById ("loadPhotosButton");
                 
            var showPhoto = (photoIndexGlobal + currentPhoto);
            buttonElement.onclick = showPhoto;
                 
             /*var photoTextName  = document.getElementById("displayedPhoto");*/    
                 
            /*when someone writes a particular value in the associated text field, it should return the photo
             they request as associated with its name. via array or folder itself??*/
           
                    // DO NOT PUT ()  
        }


  •  

    Tags for this Thread

    Posting Permissions

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