SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Thread: Category Select Image Display and Delete Dynamically

Hybrid View

  1. Apr 11, 2011 12:05 #1
    psk102
    psk102 is offline
    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]
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules