designersx
asked on
thumnails images onclick event show larger images
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?
ASKER
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
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.
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.
ASKER
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
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.
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
?>
ASKER
buddy don't take it other way, ha ha ..ok
ASKER
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
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.
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
?>
ASKER
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
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
ASKER
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(sunse t.jpg);
}
so that means when this css is applied the background image should also be loaded in the background.
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(sunse
}
so that means when this css is applied the background image should also be loaded in the background.
ASKER
buddy, please reply me whether u have got my point or not?
yogesh
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.
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>
ASKER
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
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);
}
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.
Olly.
ASKER
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.getEleme ntById('tr y').classn ame='<?php echo $_POST['image'] ?>'"/>; tell me sir whether i am right.
so sir i am not implementing theme or skin implementation.
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\"
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);
}
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.
Olly.
ASKER
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.
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.
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.
ASKER
respected sir,
ok sir, had u tried the above code? i think u must get to know what i want to do
yogi
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.
Olly.
ASKER
exactly like a bussiness card, yes sir. can u help me out in that?
yogesh
yogesh
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks sir for ur assistence, i will let u know as quickly as possible, i had to go out of station urgently.
ASKER
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 must give u 500 points for this. ok i will. it worked fine.
yogesh
ASKER
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
yogesh
<a href="images/myimage.jpg">
or are you trying to do something more complicated with javascript/css overlays etc.?
Olly.