thumnails images onclick event show larger images

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.

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

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.

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
 

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 https://www.experts-exchange.com/questions/24276570/How-to-pick-images-from-a-folder-and-show-on-the-front-end.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
?>

Select allOpen in new window

buddy don't take it other way, ha ha ..ok

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

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

Select allOpen in new window

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

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.

buddy, please reply me whether u have got my point or not?



yogesh

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>

Select allOpen in new window

respected sir,

please look at this page.

https://www.experts-exchange.com/questions/24297366/CALL-CSS-THROUGH-PHP.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); 	
	}

Select allOpen in new window

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.

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

Select allOpen in new window

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.

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.

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.

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

yogi

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.

exactly like a bussiness card,  yes  sir. can u help me out in that?

yogesh

thanks sir for ur assistence, i will let u know as quickly as possible, i had  to go out of station urgently.

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

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