SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Category Select Image Display and Delete Dynamically

    I have search for about a week and still no luck.
    I need to dynamically display mutliple images using javascript, no hardcoding. The images have different categories. For ex. bellTower01.jpg, bellTower02.jpg...and fountain01.jpg, fountain02.jpg....up to 100. I don't want to hardcode bellTower01,02,etc.

    -Use JavaScript to display several images and scroll through them
    To display multiple thumbnails, arrange them into a small quantity (no more than 8 per page)
    Provide pagination

    I really really really need help. I have never done javascript before, so I'm still learning. I seriously checked out many threads and links but nothing works or is what I want. I hope someone can help me out and hopefully also allow me to become better at coding this kind of stuff.

    I am not allowed to code in php for this project. I can only use javascript to display the images. Also, I don't really need anything fancy, like slideshows or rotations, I just the image to appear when I select that specific category. I want to get the images from my folder/directory.

    Right now, I have it working as it just being hardcoded.
    Below is my code for my galleries page:

    Code:
    <?php 
    
    //creates a session..initializes session data 
    session_start ();
    
    echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Scenes of Purdue</title>
    <!-- Styling of the Webpage -->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
    
    <link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
    
    </head>
    
    <body>
    <div id="shadowContainer">
    <div id="mainContainer">
    <div id="mainHeader"></div>
    <div id="topNav">
    <ul>
    
    <li><a href="index.php">Home</a></li>
    <li><a href="galleries.php">Galleries</a></li>
    </ul>
    </div><div id="content">
    <br />
    <div class="clearfix"><h1>Select a Category to View</h1>
    <br />
    
    <div class="paginationBar" id="paginationBar">
    <select id="catDropDown" onchange="javascript:getCategory()">
    <option value="-" selected="selected">Select a Category</option>
    <option value="bellTower">Bell Tower</option>
    <option value="fountain">Fountain</option>
    </select>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br />
    
    <ul id="pagination">
    </ul>
    
    <div id="r1c1"></div>
    <div id="r1c2"></div>
    <div id="r1c3"></div>
    
    <div id="r2c1"></div>
    <div id="r2c2"></div>
    <div id="r2c3"></div>
    
    
    <script type="text/javascript"><!--
    var bellTowerArray = new Array();
    
    bellTowerArray[0] = "bellTower01.jpg";
    bellTowerArray[1] = "bellTower02.jpg";
    bellTowerArray[2] = "bellTower03.jpg";
    bellTowerArray[3] = "bellTower04.jpg";
    bellTowerArray[4] = "bellTower05.jpg";
    bellTowerArray[5] = "bellTower06.jpg";
    bellTowerArray[6] = "bellTower07.jpg";
    bellTowerArray[7] = "bellTower08.jpg";
    bellTowerArray[8] = "bellTower09.jpg";
    bellTowerArray[9] = "bellTower10.jpg";
    bellTowerArray[10] = "bellTower11.jpg";
    bellTowerArray[11] = "bellTower12.jpg";
    bellTowerArray[12] = "bellTower13.jpg";
    bellTowerArray[13] = "bellTower14.jpg";
    bellTowerArray[14] = "bellTower15.jpg";
    bellTowerArray[15] = "bellTower16.jpg";
    
    var fountainArray = new Array();
    
    fountainArray[0] = "fountain01.jpg";
    fountainArray[1] = "fountain02.jpg";
    fountainArray[2] = "fountain03.jpg";
    fountainArray[3] = "fountain04.jpg";
    fountainArray[4] = "fountain05.jpg";
    fountainArray[5] = "fountain06.jpg";
    fountainArray[6] = "fountain07.jpg";
    fountainArray[7] = "fountain08.jpg";
    fountainArray[8] = "fountain09.jpg";
    fountainArray[9] = "fountain10.jpg";
    fountainArray[10] = "fountain11.jpg";
    fountainArray[11] = "fountain12.jpg";
    fountainArray[12] = "fountain13.jpg";
    fountainArray[13] = "fountain14.jpg";
    fountainArray[14] = "fountain15.jpg";
    fountainArray[15] = "fountain16.jpg";
    fountainArray[16] = "fountain17.jpg";
    fountainArray[17] = "fountain18.jpg";
    
    var currentArray = new Array();
    
    function getCategory()
    {
    if(document.getElementById("catDropDown").selectedIndex == 1)
    {
    currentArray = bellTowerArray;
    }
    else if(document.getElementById("catDropDown").selectedIndex == 2)
    {
    currentArray = fountainArray;
    }//if/else
    if(document.getElementById("catDropDown").selectedIndex > 0)
    {
    displayImages(0);
    doPagination();
    }
    }
    
    function displayImages(start)
    {
    //r1c1
    if(!(start > currentArray.length-1))
    document.getElementById("r1c1").innerHTML = "<a id=\"r1c1_a\" href=\"images/regular/" + currentArray[start] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start] + "\" id=\"r1c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
    else
    document.getElementById("r1c1").innerHTML = "";
    
    //r1c2
    if(!(start+1 > currentArray.length-1))
    document.getElementById("r1c2").innerHTML = "<a id=\"r1c2_a\" href=\"images/regular/" + currentArray[start+1] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+1] + "\" id=\"r1c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
    else
    document.getElementById("r1c2").innerHTML = "";
    
    //r1c3
    if(!(start+2 > currentArray.length-1))
    document.getElementById("r1c3").innerHTML = "<a id=\"r1c3_a\" href=\"images/regular/" + currentArray[start+2] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+2] + "\" id=\"r1c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
    else
    document.getElementById("r1c3").innerHTML = "";
    
    //r2c1
    if(!(start+3 > currentArray.length-1))
    document.getElementById("r2c1").innerHTML = "<a id=\"r2c1_a\" href=\"images/regular/" + currentArray[start+3] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+3] + "\" id=\"r2c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
    else
    document.getElementById("r2c1").innerHTML = "";
    
    //r2c2
    if(!(start+4 > currentArray.length-1))
    document.getElementById("r2c2").innerHTML = "<a id=\"r2c2_a\" href=\"images/regular/" + currentArray[start+4] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+4] + "\" id=\"r2c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
    else
    document.getElementById("r2c2").innerHTML = "";
    
    //r2c3
    if(!(start+5 > currentArray.length-1))
    document.getElementById("r2c3").innerHTML = "<a id=\"r2c3_a\" href=\"images/regular/" + currentArray[start+5] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+5] + "\" id=\"r2c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>";
    else
    document.getElementById("r2c3").innerHTML = "";
    }
    
    function doPagination()
    {
    var numpages = (currentArray.length / 6) +1;
    var numleft = currentArray.length % 6;
    
    document.getElementById("pagination").innerHTML = "";
    
    for(i=0; i<numpages-1; i++)
    {
    document.getElementById("pagination").innerHTML += "<span onclick='displayImages("+ i*6 +")'>"+ (i+1) + "<"+"/span> ";
    }
    
    if(numpages <=1)
    {
    document.getElementById("pagination").innerHTML = "";
    }
    }
    
    document.getElementById("catDropDown").selectedIndex = 0;
    
    -->
    </script>
    
    </div>
    </div>
    </div>
    <div id="footer"><a href="readme.php">Readme</a><br />
    <div class="clearfix">
    <div style="float: left"><a href="adminLogin.php" title="Admin Login" class="adminLoginAjax">Admin login</a></div>
    
    </div>
    </div>
    </div>
    
    </div>
    
    </body>
    </html>
    Last edited by ScallioXTX; Apr 11, 2011 at 16:00. Reason: wrapped code in [code]...[/code]


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
  •