Page 1 of 1

display image in div

Posted: Sun Jan 02, 2011 8:32 am
by DuBz
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.

Code: Select all

function imgGallery(){
	
	$imgPath = "imgs/";
	$thumbsPath = "thumbs/";
	
	$thumbDir = openDir( $thumbsPath );
	
        
        $filname = $imgInfo['filname'];
			
	//while not the end of the directories
	echo "<table align=\"center\">";
	echo "<tr>";
	while ( False !== ($thumbDirContents = readDir( $thumbDir ))){
		$imgInfo = pathInfo( $thumbsPath . $thumbDirContents );
	      	
		if (strtolower( $imgInfo['extension']) == 'jpg'){	
		        echo "<td><a href=\"{$imgPath}{$thumbDirContents}\"\>";
			echo "<img src=\"{$thumbsPath}{$thumbDirContents}\" />";
			echo "</a></td>";
		$counter += 1;
                 if ( $counter % 4 == 0 ) { $output .= "</tr><tr>"; }
		
		}
           }
           echo "</tr>";
           echo "</table>";
     		
			echo "<div id=\"lrgWrapper\">";
	        	//echo "<img src=\"{$imgPath}{$thumbDirContents}\" />";
                        echo "</div>";
		
	       
           closeDir ( $thumbDir );
           
           
}[syntax=php]
[/syntax]

Re: display image in div

Posted: Sun Jan 02, 2011 9:35 am
by jankidudel
use javascript

Re: display image in div

Posted: Sun Jan 02, 2011 1:31 pm
by DuBz
I do not know javascript could you guide me to a place to learn the code needed to do this?

Re: display image in div

Posted: Sun Jan 02, 2011 2:46 pm
by jankidudel
<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';
}

// end of javascript -->
</script>
</head>
<body>
<img id='yourimg' onclick='getNormalSize();' src='http://profile.ak.fbcdn.net/hprofile-ak ... 2807_q.jpg' />


</body>
</html>

is this that you want ?

Re: display image in div

Posted: Sun Jan 02, 2011 3:02 pm
by DuBz
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



Thank you for the feedback

Re: display image in div

Posted: Sun Jan 02, 2011 3:14 pm
by jankidudel
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';

Re: display image in div

Posted: Sun Jan 02, 2011 3:20 pm
by DuBz
Should I create a var to hold the src to the original img since I do not know which mg will be clicked?
on the line: id.src = ('myVarToOriginalImg');

Something like this

function switchImg(){

var newDiv = document.getElementById( 'lrgWrapper' );
var imgSrc = document.getElementById( 'imgSrc' );

newDiv.src = ( 'imgSrc' );

}

Re: display image in div

Posted: Sun Jan 02, 2011 3:43 pm
by jankidudel
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.

Re: display image in div

Posted: Sun Jan 02, 2011 3:48 pm
by DuBz
I pm you with the entire script if you need anything else let me know.

The code that is posted here is pretty much it. The only other piece is the function that creates and writes the thumbnails to designated folder.

Re: display image in div

Posted: Sun Jan 02, 2011 5:28 pm
by jankidudel
Ok, i'll send you finished code tomorrow.

Re: display image in div

Posted: Mon Jan 03, 2011 12:04 am
by DuBz
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 :D

Code: Select all


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