Solved

thumnails images onclick event show larger images

Posted on 2009-03-30
25
413 Views
Last Modified: 2012-05-06
i have made a php program of uploads the images as thumbnail in a thumbnail folder, now i want that on the front end when my thumnails will be shown, then on clicking the thumnail its larger image should be shown?
0
Comment
Question by:designersx
  • 15
  • 10
25 Comments
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24027346
Do you mean you want to click the thumbnail and the full sized image will open?

<a href="images/myimage.jpg"><img src="thumbs/myimage.jpg" /></a>

or are you trying to do something more complicated with javascript/css overlays etc.?

Olly.
0
 

Author Comment

by:designersx
ID: 24027479
i am implementing an image gallery having lots of parts. see this link, i am working on this.

http://www.vistaprint.com/vp/ns/studio3.aspx?pf_id=064&combo_id=4298&gallery_id=64&category_id=11&referer=http%3a%2f%2fwww.vistaprint.com%2fvp%2fns%2fdefault.aspx%3fGP%3d3%252f31%252f2009%2b6%253a54%253a11%2bAM&rd=2
This is the complete url, this is only the subpart i am asking u. it is complicated. i am giving authority to the admin user that from the back end, he will write the theme name, font color, font size, font family and upload images and then after clicking the submit button, a css wil be generated and their thumbnails are generated and are stored in a thumbnail folder, so i was thinking i will fetch all the thumbnails from the thumbnail folder and then i will show on the front end. After that i want that on clicking of a image,

1) first, its css should be loaded.
2)larger image should be seen.

this is a very larger concept. if u find it a problem, u just tell me on clicking of a thumnail image, how larger image can be shown and  how its css can be loaded.

kind regards
yogesh
0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24027545
Have a look at this tutorial: http://www.alistapart.com/articles/imagegallery
The script intercepts your clicking on a link (could be a thumbnail img of course) and inserts the full sized image into the page content using js.
Hope this is heading in the right direction.

Olly.
0
 

Author Comment

by:designersx
ID: 24028821
buddy thanks for this , but yaar this is static.

firstly see and try to understand what exactly i am doing:- i want to do like this-----

1) make the image thumbnail , upload it in the thumbnail folder and bigger image in the images folder   (done)
2) i am using the glob function to fetch all the thumbnail images from the thumbnail folder and then show in the line to show as if there is a gallery. (done)
3) Now i want that when i click on any image , its corresponding larger image should be seen, only then my task will be completed. (i am not interacting with database, so please don't go that way.)

hope u will be able to help me out in this.

kind regards
yogesh
 
0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24029303
Ah! I am starting to see (I think).

Here is a simple (I hope) way to do it. You have 2 directories (folders): we will call them "images" and "images/tn" to match the directories in your other post*.
We also have a list of filenames from the thumbs directory from your glob() function.
Make sure the image and the thumbnail have the same name (or a name with a known difference like "myimage.jpg" and "myimage_thumb.jpg").
When you specify your image link, just put the other path (and/or the difference) in the link uri.

* see http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_24276570.html

Olly.
<?php

$docroot = rtrim('C:/wamp/www/','/');

$images = trim('testing/file_write/images/','/');

$thumbs = trim('testing/file_write/images/tn/','/');

$mask = '*.jp*g';
 

foreach(glob("$docroot/$thumbs/$mask") as $filename)

{

  $filename = basename($filename);

  echo "<a href=\"/$images/$filename\"><img src=\"/$thumbs/$filename\" alt=\"$filename\" /></a>\n";

}         //          ^---Images path for link        ^---Thumbs path for display

?>

Open in new window

0
 

Author Comment

by:designersx
ID: 24030132
buddy don't take it other way, ha ha ..ok
0
 

Author Comment

by:designersx
ID: 24036212
thanks for this script, working fine.

1) on the click of a thumbnail image , larger image is shown but what happens is on clicking the thumbnail image big image is shown and thumbnails are gone because page is posted.

since i am doing the image gallery concept, i don't want the thumbnails to be disappeared when clicking on the thumbnails.

kind regards
yogesh
0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24036828
Yeah. That will happen.
There isn't much you can do about that without javascript (see http://www.alistapart.com/articles/imagegallery that I suggested earlier).
In fact the example at Alistapart is very good for what I think you are trying to do, because it still provides functionality for users without js.

Now I think about it, you could just put a target attribute in your link (code follows). That would make the image appear in a new window (or tab).

Olly.
<?php

$docroot = rtrim('C:/wamp/www/','/');

$images = trim('testing/file_write/images/','/');

$thumbs = trim('testing/file_write/images/tn/','/');

$mask = '*.jp*g';

 

foreach(glob("$docroot/$thumbs/$mask") as $filename)

{

  $filename = basename($filename);

  echo "<a href=\"/$images/$filename\" target=\"_blank\"><img src=\"/$thumbs/$filename\" alt=\"$filename\" /></a>\n";

}         //          ^---Images path for link        ^---Thumbs path for display

?>

Open in new window

0
 

Author Comment

by:designersx
ID: 24037447
ok yeah Alistapart is very good example, but that one is static and by this we can't do the way i want, so i will have to store all the images in a database and then fetch from the database so as to  implement image gallery concept.

otherwise thanks for this, i will ask from my boss whether it will work or change the concept.

again thanks , i will quickly assign points to u and let u know the status after some time.

kind regards
yogeh
0
 

Author Comment

by:designersx
ID: 24074704
yes it clicked and it is fine , now what we are doing is

1) Fetching images fromthe folder and on the click of thumbnails we are showing the larger images.

Now i want this concept to change a liitle. If i would say i am creating a dynamic css and want to apply that css on the click of those thumbnails . can we do that? my css would be like that

.abc
        { font-family:arial;
         color:red;      
          font-size:8;
          background-image:url(sunset.jpg);    
        }

so that means when this css is applied the background image should also be loaded in the background.
0
 

Author Comment

by:designersx
ID: 24074970
buddy, please reply me whether u have got my point or not?



yogesh
0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24075460
Hi Yogesh,
What do you mean by "dynamic css". To make css or html dynamic, you need client-side scripting (like Javascript). I thought you didn't want to use JS.

Another solution springs to mind though. We can pass the clicked image location back to the script using the GET method. Amended code follows.

Olly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

</head>

<body>

	<ul><?php

$docroot = rtrim('C:/wamp/www/','/');

$images = trim('testing/file_write/images/','/');

$thumbs = trim('testing/file_write/images/tn/','/');
 

$mask = '*.jp*g';
 

foreach(glob("$docroot/$thumbs/$mask") as $filename)

{

  $filename = basename($filename);

  echo "\n\t\t<li><a href=\"?image=".htmlspecialchars("$filename")."\" title=\"$filename\"><img src=\"/$thumbs/$filename\" alt=\"$filename\" /></a></li>";

}

?>

	</ul>

<?php

	// We want to find out if they have clicked a thumbnail, and if they have, we display the big version

	if(isset($_GET['image']))

	{

		echo "<img id=\"bigimage\" src=\"/$images/{$_GET['image']}\" alt=\"\" />";

	}

	else

	{

		echo "<img id=\"bigimage\" src=\"/images/blank.jpg\" alt=\"\" />";

	}

?>	
 
 

</body>

</html>

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:designersx
ID: 24075500
respected sir,

please look at this page.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_24297366.html

run this code and then let me know, u will understand what i want to say.

kind regards,
yogesh


[style.css]
 
 

.final1 

	{ font-family:arial;

	  font-color:red;	

	  font-size:8;

	  background-image:url(sunset.jpg); 	

	}

.final2 

	{ font-family:arial;

	  font-color:red;	

	  font-size:8;

	  background-image:url(sunset.jpg); 	

	}

.final3 

	{ font-family:arial;

	  font-color:red;	

	  font-size:8;

	  background-image:url(sunset.jpg); 	

	}

Open in new window

0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24075805
So is it a theme or skin management system you are designing? I am still not sure. Can you find an example of the kind of thing you are trying to do on the web and post me a link?

Olly.
0
 

Author Comment

by:designersx
ID: 24075878
sure sir,

http://www.vistaprint.com/vp/ns/studio3.aspx?pf_id=064&combo_id=4298&gallery_id=64&category_id=11&referer=http://www.vistaprint.com/vp/ns/default.aspx%3fGP%3d4%252f6%252f2009%2b6%253a27%253a56%2bAM&rd=2

open this link, actually i am implementing this thing from the last 1 month. i have done all the ajax part in this. i am having the problem in since i am a fresher, i tried all the ways by which i could do but atlast i get stuck at one or the other point. now i have updated my files and i am posting the code here for you.


see this line of code.

<img src=\"/$thumbs/$filename\" onclick="document.getElementById('try').classname='<?php echo $_POST['image'] ?>'"/>; tell me sir whether i am right.

so sir i am not implementing theme or skin implementation.


[form.php]
 

<form action="file_write.php" method="post" name="form"  enctype="multipart/form-data">

select theme<input name="theme" type="text"><br>

<br>
 

font-family

<select name="font-family">

	<option>arial</option>

	<option>verdana</option>

	<option>Times New Roman</option>

	<option>arial black</option>

	<option>Book Antiqua</option>	

</select><br>

<br>
 

font-color

<select name="font-color">

	<option>red</option>

	<option>blue</option>

	<option>magenta</option>

	<option>brown</option>

	<option>pink</option>	

</select><br>

<br>
 

font-size

<select name="font-size">

	<option>8</option>

	<option>9</option>

	<option>10</option>

	<option>11</option>

	<option>12</option>

	<option>14</option>

	<option>16</option>

</select><br>

<br>Please Upload image less than 90kb size<br />

<input type="file" name="image" id="image" />

<br>
 

<input type="submit">

</form>
 
 

[file_write.php]
 

<?php

//make the image thumbnail and upload/store it in the folder images/tn 
 

if ($_FILES["image"]["size"] < 900000)

  {

	$image_folder="images/";

	$filename=$_FILES['image']['name'];

	$image_to_be_uploaded=$image_folder.$filename;

		

	if(move_uploaded_file($_FILES["image"]["tmp_name"],$image_to_be_uploaded))

	{

		$thumbnail_path="images/tn/";

		$thumbnail=$thumbnail_path.$_FILES['image']['name'];

		list($swidth,$sheight)=getimagesize($image_to_be_uploaded);	

		$largeImage=imagecreatefromjpeg($image_to_be_uploaded);

		$smallImage=imagecreatetruecolor('120','120');

		imagecopyresampled($smallImage,$largeImage,0,0,0,0,120,120,$swidth,$sheight);

		imagejpeg($smallImage,$thumbnail);

	}

  }
 

//to write the css file from php again and again with fopen and fwrite.

$cssFile = fopen('style.css','a');

echo $_POST['image'];

echo $_POST['font-color'];
 

$cssClass =

'.'.$_POST['theme'].' 

	{ font-family:'.$_POST['font-family'].';

	  font-color:'.$_POST['font-color'].';	

	  font-size:'.$_POST['font-size'].';

	  background-image:'.$_POST['image'].'; 	

	}';

fwrite($cssFile, "\n". $cssClass);

fclose($cssFile);
 
 

//fetching the images from folder and display on the front end.

$docroot = rtrim('C:/wamp/www/','/');

$images = trim('testing/file_write/images/','/');

$thumbs = trim('testing/file_write/images/tn/','/');

$mask = '*.jp*g';
 

foreach(glob("$docroot/$thumbs/$mask") as $filename)

{

  $filename = basename($filename);

 ?>

  <img src=\"/$thumbs/$filename\" onclick="document.getElementById('try').classname='<?php echo $_POST['image'] ?>'"/>;

<?php 

}

?>
 

[style.css]
 

.final1 

	{ font-family:arial;

	  font-color:red;

	  font-size:8;

	  background-image:url(sunset.jpg);

	}
 
 

.new 

	{ font-family:arial;

	  font-color:red;	

	  font-size:8;

	  background-image:url(1s.jpg);	

	}

Open in new window

0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24075914
Is that the site you are working on or the site you want to copy a feature from? I need to see a site with the feature working because I don't understand what you are trying to achieve.

Olly.
0
 

Author Comment

by:designersx
ID: 24075967
i have been asked to make the similar feature like this by my boss. i want to do the exact functiong as is done in the site link u have seen. so i am applying logics to achieve that.

as the image gallery is shown in the site, i want to show large images on the click of thumbnail images and at the same time css/style is loaded so that i can on the card. these thumnails are stored in the database.

after entering the details and clicking on submit button , those details are stored in the database.
means exact functioning like that.

0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24079047
I think see where this is going now.
1.  I would start by making a static html mockup of how you want that part of your page to look. I would use inline css for the parts that will change, and put any css for layout in the <head> or a separate linked file.
2.  Replace the parts that will be your parameters with variables.
3.  Write php to update those variables with values selected from the thumbnails and other controls (you may want to store the selected settings in session variables).

I'll try to post some code tomorrow.

Olly.
0
 

Author Comment

by:designersx
ID: 24083090
respected sir,
ok sir, had u tried the above code? i think u must get to know what i want to do

yogi
0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24084724
You want to have a set of thumbnails and form controls to affect the appearance of some kind of preview picture (like a business card for example)?

Olly.
0
 

Author Comment

by:designersx
ID: 24086823
exactly like a bussiness card,  yes  sir. can u help me out in that?

yogesh
0
 
LVL 10

Accepted Solution

by:
ollyatstithians earned 500 total points
ID: 24095301
Right. Try this.
I have included an example "name" field with some styling parameters. You should be able to figure out how to add more fields and more parameters yourself.
I have also added a function to make getting form data and session data simpler.

Olly.
<?php 

function get_param($name, $default='')

// This function checks whether anything new has been posted, then checks if anything was previously selected, then uses a default value.

{

	if(isset($_POST[$name]))

	{

		$_SESSION[$name] = $_POST[$name];

	}

	elseif(!isset($_SESSION[$name]))

	{

		$_SESSION[$name] = $default;

	}

	return $_SESSION[$name];

}
 

session_start();

$docroot = rtrim('C:/wamp/www/','/');

$images = trim('testing/file_write/images/','/');

$thumbs = trim('testing/file_write/images/tn/','/');
 

$mask = '*.jp*g';

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

	<style type="text/css">

		#backgrounds li

		{

			display: inline;

			list-style-type: none;

		}

		#texts li

		{

			list-style-type: none;

		}

		#preview

		{

			width: 640px;

			height: 527px;

			padding: 20px;

		}

	</style>

</head>

<body>

	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

	<p>Background</p>

	<ul id="backgrounds"><?php

foreach(glob("$docroot/$thumbs/$mask") as $filename)

{

  $filename = basename($filename);

  echo "\n\t\t<li><input type=\"image\" value=\"".htmlspecialchars("$filename")."\" title=\"$filename\" name=\"background\" src=\"/$thumbs/$filename\" alt=\"$filename\" /></li>";

}
 

$background = get_param('background', 'noimage.jpg');

$name = get_param('name', 'Your name');

$namefont = get_param('namefont', 'font-family: sans-serif;');

$namesize = get_param('namesize', 'font-size: 10pt;');

$address = get_param('address', 'Address');

?>

	</ul>

	<p>Texts</p>

	<ul id="texts">

		<li>Name: <input name="name" value="<?php echo $name; ?>" />

			<select name="namefont"><!-- Selection box for font family -->

				<option value="font-family: sans-serif;"<?php if($namefont=='font-family: sans-serif;') echo ' selected="selected"'; ?>>Sans serif</option>

				<option value="font-family: serif;"<?php if($namefont=='font-family: serif;') echo ' selected="selected"'; ?>>Serif</option>

			</select>

			<select name="namesize"><!-- Selection box for font size -->

				<option value="font-size: 8pt;"<?php if($namesize=='font-size: 8pt;') echo ' selected="selected"'; ?>>8pt</option>

				<option value="font-size: 10pt;"<?php if($namesize=='font-size: 10pt;') echo ' selected="selected"'; ?>>10pt</option>

				<option value="font-size: 12pt;"<?php if($namesize=='font-size: 12pt;') echo ' selected="selected"'; ?>>12pt</option>

				<option value="font-size: 14pt;"<?php if($namesize=='font-size: 14pt;') echo ' selected="selected"'; ?>>14pt</option>

				<option value="font-size: 16pt;"<?php if($namesize=='font-size: 16pt;') echo ' selected="selected"'; ?>>16pt</option>

			</select>

		</li>

		<li>Address: <textarea name="address"><?php echo $address; ?></textarea></li>

		<li><input type="submit" value="Update" /></li>

	</ul>

	</form>

	<div id="preview" style="background: url(/<?php echo $images.'/'.$background; ?>);">

		<p style="<?php echo $namefont.$namesize; ?>"><?php echo $name; ?></p><p><?php echo nl2br($address); ?></p>

	</div>

</body>

</html>

Open in new window

0
 

Author Comment

by:designersx
ID: 24095883
thanks sir for ur assistence, i will let u know as quickly as possible, i had  to go out of station urgently.
0
 

Author Comment

by:designersx
ID: 24103867
olly, u r simply the best. good man rather fantastic.
i must give u 500 points for this. ok i will.  it worked fine.

yogesh
0
 

Author Comment

by:designersx
ID: 24104010
i want to open this question for a day, so i will let u know later about this, i was busy in some other imp. task

yogesh
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
PHP Variable into a number 3 35
html input clean up 3 32
Page showing diff display 4 22
two tables one button 11 20
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now