PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!
I am trying to display a full size image into an html div using php. I have posted my existing code below. The div at the bottom of the script with the id lrgWrapper is where I want to display the full image when thumb is clicked. any input would be appreciated.
<html>
<head>
<script type="text/javascript">
<!-- begin
function getNormalSize()
{
alert('Please wait, the image is large');
var id = document.getElementById('yourimg');
id.src = 'http://www.clubradiolive.de/BeanAlt.jpg';
}
Yes this is on the right path, except I need the original image (not thumb) to display in lrgWrapper div instead of a new tab I am looking at the href rather than the img src. the img src is going to lead me to the thumb not the original img.
Sudo:
if img is clicked
display original img in div id lrgWrapper
i see, you want the large image to show in another place , just change this line to the div id where you want the large image to appear
function getNormalSize()
{
alert('Please wait, the image is large');
var id = document.getElementById('this_is_your_div_id_where_you_want_the_large_image_to_appear');
id.src = 'http://www.clubradiolive.de/BeanAlt.jpg';
The easiest way to do this is probably to pass your image src to function. I you can't handle this , just c write me a letter at jankidudel@gmail.com with all your script or PM me and I'll help you.
Thanks to jankidudel I was able to resolve this issue using jquery library. I have posted the code that was kindly provided by jankidudel. Thank you again
<html>
<head>
<!-- to show you a good and easy way to solve your problem, I've done it with jquery, javascript library(framework), it's very powerful and easy to learn(in case you need something in the future), if something remains not as you want, PM me and i'll help you -->
<!--you can download jquery.js(compressed better, because of the size) file from jquery.com and put it in your folder and link it or just link to external file as i've done here 1 line below -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <!-- of course, if your internet connection will brake, you won't have this link working, so you'd rather download it -->
<script type="text/javascript">
$(function(){
$('.smallie').click(function(){
alert('An image will be resized');
var url = $(this).attr("src");
alert("The url is "+url);
url = url.replace("thumbs", "imgs"); // i assume your image names in thumbs and imgs folders are the same, hence I change just folder name
document.images.biggie.src = url;
});
});
</script>
</head>
<body>
<img class='smallie' />
<?php
function imgGallery(){
$imgPath = "imgs/";
$thumbsPath = "thumbs/";
$thumbDir = openDir( $thumbsPath );
//while not the end of the directories
echo "These are your thumbs<br />";
echo "<table border='1' align=\"center\">";
echo "<tr>";
$counter = 0;
while ($thumbDirContents = readDir( $thumbDir )){
$imgInfo = pathInfo( $thumbsPath . $thumbDirContents );
if (strtolower( $imgInfo['extension']) == 'jpg'){
//echo "<td>/<a href=\"{$imgPath}{$thumbDirContents}\"\>";
echo "<td>";
echo "<img class='smallie' src=\"{$thumbsPath}{$thumbDirContents}\" />";
//echo "</a></td>";
echo "</td>";
$counter += 1;
if( $counter % 4 == 0 )
{
echo "</tr><tr>";
}
}
}
echo "</tr>";
echo "</table>";
closeDir ( $thumbDir );
}
?>
<h3>This is big image</h3>
<img id='big_img' name='biggie' /> <!-- here will be large image -->
</body>
</html>