Javascript Image Display and Delete DYNAMICALLY

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

30 Replies - 10075 Views - Last Post: 15 April 2011 - 09:30 AM

#1 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Javascript Image Display and Delete DYNAMICALLY

Posted 11 April 2011 - 04:10 PM

How do I dynamically display images in javascript without hardcoding it. I cannot use php or any other language. My teacher said it is doable in javascript. so right now I have it hardcoded in:

 
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(); 



I have multiple categories of images so not just these two. I don't want to have to type in fountain# etc and stuff like that.
I hope someone can seriously help me solve this problem I've had for about two weeks now, and not tell me to use some other language besides javascript.

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Image Display and Delete DYNAMICALLY

#2 LaughingBelly  Icon User is offline

  • D.I.C Head

Reputation: 47
  • View blog
  • Posts: 103
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 11 April 2011 - 06:23 PM

If you have an array of place and and a count of images for each place, it is possible to just loop through them.

Here is a snippet that shows how to generate the image names based on a list of places and count of images for each place. All you need to do is populate an array that holds objects - each object holding the name of the place and the number of images related to that place.
for(i=0;i<placelist.length;i++)
{
    for(j=0;j<placelist[i].numImages;j++)
        ImageArray[i][j]= placelist[i].PlaceName+(j<9?'0':'')+(j+1)+'.jpg'
}


An improvement would be to generate the name of the image dynamically when you need it rather than generate the whole list upfront. You don't need the whole list anyway, unless you are preloading images using some technique.

Edit: just noticed that your pictures start with 01 and not at 00 like I assumed - corrected code to reflect that.

This post has been edited by LaughingBelly: 11 April 2011 - 06:24 PM

Was This Post Helpful? 0
  • +
  • -

#3 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 11 April 2011 - 08:44 PM

Hi, Thank you so much for the reply. I am extremely new to javascript and I tried implementing your code snippet but it doesn't seem to work.

This is my galleries page that I have:


<!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"><!--

/*this is the code you provided..I didn't take out the hardcoded stuff cause when i did nothing worked*/
for(i=0;i<placelist.length;i++)
	{
	    for(j=0;j<placelist[i].numImages;j++)
	        ImageArray[i][j]= placelist[i].PlaceName+(j<9?'0':'')+(j+1)+'.jpg'
	}

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>




I'm confused. If I use your code, how would I call it on the page for it to show like 6 or 8 of the images in that specific category? Also, how would I code the drop down box to get the specific category to work?
Thanks again.
Was This Post Helpful? 0
  • +
  • -

#4 LaughingBelly  Icon User is offline

  • D.I.C Head

Reputation: 47
  • View blog
  • Posts: 103
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 11 April 2011 - 10:15 PM

That did not work because that code snippet was written making a lot of assumptions. The context in your original post was not enough to assess the problem you are trying to solve.

Now that you gave more information on what you expect, I made a test page. I removed all the javascript/php references as I don't have them. You would have to adapt this to fit in with your pagination scheme. You would need to set the attribute count of each option with the total number of images that category has.


<!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>

</head>

<body>

<select id="catDropDown" onchange="javascript:ShowGallery()">
            <option value="-" selected="selected">Select a Category</option>
            <option value="bellTower" count="15">Bell Tower</option>
            <option value="fountain" count="18">Fountain</option>
	    <option value="mountain" count="2">Mount Si</option>
        </select>

<div id="ImageContainer"></div>
    
<script type="text/javascript"><!--
	
	function ShowGallery()
	{
		// get parent for image container and remove image container
		var parentcontainer = document.getElementById("ImageContainer").parentNode;
		parentcontainer.removeChild(document.getElementById("ImageContainer"));

		// get current image gallery information from dropdown
		var dropdown = document.getElementById("catDropDown");
		var selectedoption = dropdown.getElementsByTagName("option")[dropdown.selectedIndex];
		var count = parseInt(selectedoption.getAttribute("Count"));

		// if there are not images in the category, return - "select a category" falls into this case as well
		if(count<=0)
		    return;

		// populate images in image elements
		var container = document.createElement("div");
		container.setAttribute("id","ImageContainer");
		for(var i=0;i<count;i++)
		{
		    var img=document.createElement("img");
                    img.setAttribute("src","images/mytest/"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    img.setAttribute("alt","images/mytest/"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    container.appendChild(img);

		}

		// Insert new image container back with new contents
		parentcontainer.appendChild(container);
		
	}
	
	
-->
</script>

</body>
</html>


Was This Post Helpful? 1
  • +
  • -

#5 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 11 April 2011 - 11:02 PM

THANK YOU SO MUCH, that worked! I'm soo happy. You Rock! I've been stuck on this for over two weeks now and was about to just give up on the project cause no one else seemed to be able to solve my problem.
Also, thank you for including comments so I understand what you were doing. :bigsmile:

I just have a few small questions now. For the images being name 01,02...20 or so. In the code, if the number goes past 09, it also adds a 0 in front of my 10 so = 010.jpg. How do I remove the zero in front of the double digit numbers?

Also, I will go back and play around with the pagination and stuff but I was also wondering: I need to also implement Lightbox2, which means that I also need to be able to open the regular images..? Would I just implement some kind of extra code into the one you've given me to let it open the regular sized images?
my images are in folders like so: for thumbnails, its images/th/thumb_
for regular, its images/regular/(also uses the 01 to 25)

my code as of now:
<!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 />
	<select id="catDropDown" onchange="javascript:ShowGallery()">
            <option value="-" selected="selected">Select a Category</option>
            <option value="bellTower" count="15">Bell Tower</option>
            <option value="fountain" count="18">Fountain</option>
    </select>
   <br />
<div id="ImageContainer"></div>
<br />
    
<script type="text/javascript"><!--
	
	function ShowGallery()
	{
		// get parent for image container and remove image container
		var parentcontainer = document.getElementById("ImageContainer").parentNode;
		parentcontainer.removeChild(document.getElementById("ImageContainer"));

		// get current image gallery information from dropdown
		var dropdown = document.getElementById("catDropDown");
		var selectedoption = dropdown.getElementsByTagName("option")[dropdown.selectedIndex];
		var count = parseInt(selectedoption.getAttribute("Count"));

		// if there are not images in the category, return - "select a category" falls into this case as well
		if(count<=0)
		    return;

		// populate images in image elements
		var container = document.createElement("div");
		container.setAttribute("id","ImageContainer");
		for(var i=0;i<count;i++)
		{
		    var img=document.createElement("img");
                    img.setAttribute("src","images/th/thumb_"+dropdown.value+(i<20?"0":"")+(i+1)+".jpg");
		    img.setAttribute("alt","images/th/thumb_"+dropdown.value+(i<20?"0":"")+(i+1)+".jpg");
		    container.appendChild(img);

		}

		// Insert new image container back with new contents
		parentcontainer.appendChild(container);
		
	}
	
	
-->
</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>

Thanks again!


Was This Post Helpful? 0
  • +
  • -

#6 LaughingBelly  Icon User is offline

  • D.I.C Head

Reputation: 47
  • View blog
  • Posts: 103
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 11 April 2011 - 11:43 PM

View Postpsk102, on 11 April 2011 - 11:02 PM, said:

I just have a few small questions now. For the images being name 01,02...20 or so. In the code, if the number goes past 09, it also adds a 0 in front of my 10 so = 010.jpg. How do I remove the zero in front of the double digit numbers?

That's because you changed the code.. replaced 9 with 20, so all numbers from 0 to 20 get an extra 0 instead of only numbers from 0 to 9 getting an extra 0.
                    img.setAttribute("src","images/th/thumb_"+dropdown.value+(i<20?"0":"")+(i+1)+".jpg");
		    img.setAttribute("alt","images/th/thumb_"+dropdown.value+(i<20?"0":"")+(i+1)+".jpg");


Here is my code
                    img.setAttribute("src","images/mytest/"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    img.setAttribute("alt","images/mytest/"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");


View Postpsk102, on 11 April 2011 - 11:02 PM, said:

Also, I will go back and play around with the pagination and stuff but I was also wondering: I need to also implement Lightbox2, which means that I also need to be able to open the regular images..? Would I just implement some kind of extra code into the one you've given me to let it open the regular sized images?
my images are in folders like so: for thumbnails, its images/th/thumb_
for regular, its images/regular/(also uses the 01 to 25)


I don't know what Lightbox2 is or how it works. But if I assume that your previous code worked with it, then the changes required are trivial.
		    var link=document.createElement("a");
		    link.setAttribute("href","images/regular/"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    link.setAttribute("rel","lightbox");
		    link.setAttribute("title","This is static description");
		    var img=document.createElement("img");
                    img.setAttribute("src","images/th/thumb_"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    img.setAttribute("alt","images/th/thumb_"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    link.appendChild(img);
		    container.appendChild(link);



Pagination should be easy to implement with this as well. You could even do fancy scroller stuff where the left most image will shrink to nothing and a next image in line will appear on the right one image at a time. Just add or remove img nodes as required.
Was This Post Helpful? 1
  • +
  • -

#7 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 12:21 AM

Haha when I loaded the page, I thought not all the images were showing so I went back to change it. Thanks for explaining. I will go try implementing those things now. I really really appreciate all the help you've given and the fast replies. You're a life-saver LaughingBelly! :clown:
Was This Post Helpful? 0
  • +
  • -

#8 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 12:34 AM

by the way, I was wondering, do you also know php? like using php and javascript together?
Was This Post Helpful? 0
  • +
  • -

#9 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 12:41 AM

because for the category drop down menu, I'm using php because I don't know if javascript can create the names dynamically based on what the user typed in to the category name section when uploading the picture

my code with php right is I can get it display the name in the drop down menu, but I don't know what to put in the value="?" section to get it be able to generate the images calling javascript? I don't know if it's even possible? Or is there a way to also dynamically generate the name in the drop down menu based on what the user uploaded into the folder?

Please let me know if I'm not explaining myself or something, my mind is all jumbled with this :helpsmilie:

my code right now for the drop down selection:

    <fieldset>
       <?php 
		// Retrieve the information from the database
                $sql = "SELECT CategoryID FROM P2Images"; 
                $getLogin = mysql_query($sql); //execute query
        ?> 
	<select id="catDropDown" onchange="javascript:ShowGallery()">
            <option value="-" selected="selected">Select a Category</option>
            //<option value="bellTower" count="15">Bell Tower</option>
            //<option value="fountain" count="18">Fountain</option>
            <!-- fetches Admins information according to Login -->
                        <?php while ($row = mysql_fetch_array($getLogin)) 
							{
						?> 
                          <!-- displays admins that sa has added into the system -->
                          <option value="???"><?php echo $row["CategoryID"]; ?></option> 
                          <?php 
                            } 
                          ?> 
    </select>
    </fieldset>



sorry for bothering you so much with this.
Was This Post Helpful? 0
  • +
  • -

#10 LaughingBelly  Icon User is offline

  • D.I.C Head

Reputation: 47
  • View blog
  • Posts: 103
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 12:59 AM

There are too many unknowns here that I don't know where to begin..

To get a better response, you will need to explain your problem a little more.

some random questions

-Is there meta data on a per image basis?
-what meta data do you collect/save for a gallery?
-what does the user provide when he is uploading an image
-what do you do when the image is uploaded? Do you rename the file he is uploading and generate a thumbnail?

Without information like this, I feel that it will be very counter productive to speculate on a solution.
Was This Post Helpful? 0
  • +
  • -

#11 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 01:56 AM

Basically, I'm suppose to create a image management system where the admin can upload, delete, edit description the images. I'm still trying to figure out how to also store the description with the image, or something like that. I used to have a script where I can upload and resize the images, but because someone in our class crashed the server and after our teacher restore our files, the script for some reason won't work anymore, so I'm trying to see what is up with it.

When the admin uploads the images, the page will include a textfield for CategoryID, textbox for description (still don't know how this works), the upload file part, and the image name. And yes, when the image is uploaded, it is renamed and also adds the 01,02..numbering at the end of the image. It uploads a regular sized and a thumbnail size image

--------------------------
User mode (Browse mode)
-Users are able to browse existing images.
-Users can browse by category meaning that they can select a category to look at and those images would then become available to view.
-Users can choose to view all images at one time regardless of category.
-The description for each image should appear as a caption somewhere for each respective image.
-Use Lightbox to display an image
-When a user clicks to view an image, use lightbox to display the image
-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
-Clicking on 'next', 'previous', or an actual number will use Javascript to change the images displayed

-------------------------------

CategoryAdmin mode
CategoryAdmins are able to browse existing images the same way a user can.
CategoryAdmins can only access images/information for their own category.
CategoryAdmins have a page to upload a new image along with additional information for that image, such as a description.
CategoryAdmins have a page to change the information for an image, such as a description.
CategoryAdmins are able to delete images.

--------------------------------

SuperAdmin mode
SuperAdmins are able to browse existing images the same way a user can.
SuperAdmins can do everything that a CategoryAdmin can. They have access to all images.
SuperAdmins can add new categories, modify, and delete categories, as well as assign CategoryAdmins to those categories.

--------------------------------

Force file download for images.
Instead of loading the image in a browser when the 'download' link is clicked, a file download dialog box should appear and force the client to save the file to their machine.
This is a feature that you will have to look up on your own. It is a fairly common task, but you will have to look for it and implement it.

I hope that answers the questions, some if not all. these are the only parts I'm still trying to figure out. javascript is a completely new language to me, and others as well since I'm new to coding and have never coded before so I'm sorry if I don't answer the questions correctly.

This is the php script for the upload and resize images. It doesn't work anymore, but something like this.

<?php

		//Initialize session data
        session_start();
        
		//statement includes and evaluates the specified file
        include("includes/openDbConn.php");

set_time_limit(300);

if($_POST["uploadFile"] !="")
{
	$fileExt = strrchr($_FILES['userfile']['name'],".");
	
	if($fileExt != ".jpg")
	{
		$_SESSION["badFileType"] = "You cannot upload a file of type .jpg";
	}else
		{
			$fileName = $_FILES['userfile']['name'];
			
			if(!is_uploaded_file($_FILES['userfile']['tmp_name']))
			{
				echo "Problem: possible file upload attack!";
				exit;
			}
		
						$counter = 01;
						$upfile = "upload/".$_POST["category"].$counter.".jpg";
						$newFileName = $_POST["category"].$counter.".jpg";
						$i = 1;
						while (file_exists($upfile)) {
							  $i++;
							  $new_counter = sprintf("%02d",$i);
							  $file_name = substr($newFileName, 0, strlen($pic_name)-6);
							  $file_extension = substr($newFileName, strlen($newFileName)-6, strlen($newFileName));
							  $frand = $file_name.$new_counter.$file_extension;
							  $upfile = "upload/".$_POST["category"].$new_counter.".jpg";
						}
						if (isset($new_counter)) {
							  $upfile = "upload/".$_POST["category"].$new_counter.".jpg";
							  $newFileName = $_POST["category"].$new_counter.".jpg";
						}
                        
		
		//this is for resize
		$img = $_POST["category"].$counter.".jpg";
		
		if(!copy($_FILES['userfile']['tmp_name'], $upfile))
		{
			echo "Problem: cannot upload file to directory.";
			exit;
		}
		
				
		$imageName                  = $_POST["login"]; 
        $billingID              = $_POST["billingID"];
        $billName               = $_POST["billName"];

		
		$sql = "INSERT INTO Images (ImageLocation, CategoryID) VALUES ('".$newFileName."', '".$_POST["CategoryID"]."')";
 	    $result = mysql_query($sql);
		$_SESSION["badFileType"] = "File uploaded successfully";	
		}
}else
	{
		$_SESSION["badFileType"] = "";
	}
	
$dir               = "./upload/";
$thdir             = "./thumb/";
                             //w..height..

resizejpeg($dir,$thdir,$img,160,120,"th_");

$_SESSION["badFileType"] .= " File resized!";

header("Location: uploadResize.php");
	
///////////////////////////////////////////////////////////
// function resizejpeg
//
//    creates a resized image based on the max width
//    specified as well as generates a thumbnail from
//    a rectangle cut from the middle of the image.
//
//    @dir    = directory image is stored in
//    @newdir = directory new image will be stored in
//    @img    = the image name
//    @max_w  = the max width of the resized image
//    @max_h  = the max height of the resized image
//    @prefix = the prefix of the resized image
//
///////////////////////////////////////////////////////////

function resizejpeg($dir, $newdir, $img, $max_w, $max_h, $prefix)
{
   // set destination directory
   if (!$newdir) $newdir = $dir;

   // get original images width and height
   list($or_w, $or_h, $or_t) = getimagesize($dir.$img);

   // make sure image is a jpeg
   if ($or_t == 2) 
   {
   
       // obtain the image's ratio
       $ratio = ($or_h / $or_w);

       // original image
       $or_image = imagecreatefromjpeg($dir.$img);

       // resize image?
       if ($or_w > $max_w || $or_h > $max_h) {

           // resize by height, then width (height dominant)
           if ($max_h < $max_w) {
               $rs_h = $max_h;
               $rs_w = $rs_h / $ratio;
           }
           // resize by width, then height (width dominant)
           else {
               $rs_w = $max_w;
               $rs_h = $ratio * $rs_w;
           }

           // copy old image to new image
           $rs_image = imagecreatetruecolor($rs_w, $rs_h);
           imagecopyresampled($rs_image, $or_image, 0, 0, 0, 0, $rs_w, $rs_h, $or_w, $or_h);
       }
       // image requires no resizing
       else {
           $rs_w = $or_w;
           $rs_h = $or_h;

           $rs_image = $or_image;
       }

       // generate resized image
       imagejpeg($rs_image, $newdir.$prefix.$img, 100);

       return true;
   } 

   // Image type was not jpeg!
   else 
   {
       return false;
   }
}
include("includes/closeDbConn.php"); //statement includes and evaluates the specified file

?>


Was This Post Helpful? 0
  • +
  • -

#12 LaughingBelly  Icon User is offline

  • D.I.C Head

Reputation: 47
  • View blog
  • Posts: 103
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 08:23 AM

I asked for it, didn't I? :bigsmile:

I do have one more question - the code you have been working on seems to be restricted to user
mode only. Is that a fair assessment?

This project sounds almost similar to the one I made for a Information Storage and Retrieval class over a decade ago. I used a combination of javascript and a CGI program written in C.

Assuming that you get lightbox and pagination sorted out, you are left with two requirements

-Users can choose to view all images at one time regardless of category.
I think the easiest way to do this using the current design is to show the user images one category after another, generating the image tags using the same logic, in a chained manner across different categories.

-The description for each image should appear as a caption somewhere for each respective image.
This is a tough one. There are several ways to get this working. One method is to send all descriptions for all categories at once when you create the page. This is however not very scaleable. Another method is to request descriptions for a specific category/image using Ajax.

About filling the value for option, you would put category there. That's what you are using to rename the images and that is what we want to use for fetching the images.
Was This Post Helpful? 0
  • +
  • -

#13 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 09:55 AM

Haha :blush:

Yes, you are right, right I've only been working on the user mode because I assumed that if I can get the user mode right, then it would be easier to implement the other modes.

I've never used Ajax before. How does it work? Like does it store the descriptions for each image? Can it be implemented into the code I have now?

Also, I did use the it to echo out category ID thinking that it would still get the images, but it doesn't...nothing shows up so I don't know what to do, I thought my logic was correct.
This is what I thought would work:
   <fieldset>
      <?php 
	// Retrieve the information from the database
               $sql = "SELECT CategoryID FROM P2Images"; 
               $getLogin = mysql_query($sql); //execute query
       ?> 
<select id="catDropDown" onchange="javascript:ShowGallery()">
           <option value="-" selected="selected">Select a Category</option>
           <!-- fetches Admins information according to Login -->
                       <?php while ($row = mysql_fetch_array($getLogin)) 
						{
					?> 
                         <!-- displays admins that sa has added into the system -->
                         <option value="<?php echo $row["CategoryID"]; ?"><?php echo $row["CategoryID"]; ?></option> 
                         <?php 
                           } 
                         ?> 
   </select>
   </fieldset>



Was This Post Helpful? 0
  • +
  • -

#14 LaughingBelly  Icon User is offline

  • D.I.C Head

Reputation: 47
  • View blog
  • Posts: 103
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 11:36 AM

Ajax is just a way to get small snippets of information on demand from the server without loading the page again. You will find that this is very useful in providing a seamless interface to the user without having to download everything in the original page. You can read more on the topic with a simple search on Ajax and read on what you like the best. There are too many to pick just one that will suit your style of learning. You will need to understand it before you can figure out how to use it in your scenario.

Using Ajax, you can fetch the descriptions of the images either one at a time or for a small group at a time. Yes, you will be able to use Ajax just fine with the code you currently have.

You have a small error in your code
<option value="<?php echo $row["CategoryID"]; ?"><?php echo $row["CategoryID"]; ?></option> 


corrected:
<option value="<?php echo $row["CategoryID"]; ?>"><?php echo $row["CategoryID"]; ?></option> 



Edit:
Also, you need to add a count attribute indicating the number of pictures there are in that category. That peice of information is critical to getting your current code working.

This post has been edited by LaughingBelly: 12 April 2011 - 11:40 AM

Was This Post Helpful? 0
  • +
  • -

#15 psk102  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 11-April 11

Re: Javascript Image Display and Delete DYNAMICALLY

Posted 12 April 2011 - 12:42 PM

It still doesn't work :helpsmilie:
   <fieldset>
      <?php 
	// Retrieve the information from the database
               $sql = "SELECT CategoryID FROM P2Images"; 
               $getLogin = mysql_query($sql); //execute query
       ?> 
<select id="catDropDown" onchange="javascript:ShowGallery()">
           <option value="-" selected="selected">Select a Category</option>

           <!-- fetches Admins information according to Login -->
                       <?php while ($row = mysql_fetch_array($getLogin)) 
						{
					?> 
                         <!-- displays admins that sa has added into the system -->
                         <option value="<?php echo $row["CategoryID"]; ?>"><?php echo $row["CategoryID"]; ?></option>  
                         <?php 
                           } 
                         ?> 
   </select>
   </fieldset>



This sucks. The value just doesn't seem to be working, though the name populates the same as if it was hardcoded? :stupid:
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3