display image in div

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!

Moderator: General Moderators

Post Reply
DuBz
Forum Newbie
Posts: 6
Joined: Sun Jan 02, 2011 8:24 am

display image in div

Post 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]
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: display image in div

Post by jankidudel »

use javascript
DuBz
Forum Newbie
Posts: 6
Joined: Sun Jan 02, 2011 8:24 am

Re: display image in div

Post by DuBz »

I do not know javascript could you guide me to a place to learn the code needed to do this?
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: display image in div

Post 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 ?
DuBz
Forum Newbie
Posts: 6
Joined: Sun Jan 02, 2011 8:24 am

Re: display image in div

Post 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
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: display image in div

Post 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';
DuBz
Forum Newbie
Posts: 6
Joined: Sun Jan 02, 2011 8:24 am

Re: display image in div

Post 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' );

}
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: display image in div

Post 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.
DuBz
Forum Newbie
Posts: 6
Joined: Sun Jan 02, 2011 8:24 am

Re: display image in div

Post 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.
jankidudel
Forum Commoner
Posts: 91
Joined: Sat Oct 16, 2010 4:30 pm
Location: Lithuania, Vilnius

Re: display image in div

Post by jankidudel »

Ok, i'll send you finished code tomorrow.
DuBz
Forum Newbie
Posts: 6
Joined: Sun Jan 02, 2011 8:24 am

Re: display image in div

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