Hot Scripts Forums - View Single Post

job0107 · #5 (**permalink**) 10-28-09, 03:49 PM

Quote:

Originally Posted by braca86

what if i get pictures from a mysql database and the code is:

<?php do { ?>
<img src="pictures/<?php echo $row_recordset1['pic']; ?>" alt="" width="160" height="175" align="middle" />
<?php } while ($row_pictures= mysql_fetch_assoc($pictures)); ?>

where to put the code for resizing????

Well, first of all, $row_pictures and $row_recordset1 don't match.
So I doubt that you will get any output from $row_recordset1['pic'].

But just for the sake of argument,
let's say you have a table in your database called "pictures".
And in the "pictures" table you have a column called "pic".
And also in the "pictures" table you have a few records that has an image file name in the column "pic".

Then this script would do what you want.

PHP Code:


			
<html>
<head>
<script type="text/javascript">
function getTopPos(inputObj)
{
 var returnValue = inputObj.offsetTop;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetTop;}
 return returnValue;
 }
function getLeftPos(inputObj)
{
 var returnValue = inputObj.offsetLeft;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetLeft;}
 return returnValue;
 }
function show_large_image(obj)
{
 var large_image_obj = document.getElementById("image_holder");
 large_image_obj.src = obj.src;
 large_image_obj.style.left = getLeftPos(obj)+"px";
 large_image_obj.style.top = getTopPos(obj)+"px";
 large_image_obj.style.display = "block";
 }
function hide_large_image(obj)
{
 obj.style.display = "none";
 }
</script>
</head>
<body>
<?php
$host = "";          // Enter mysql host address here. //
$user = "";          // Enter mysql user name here. //
$password = "";      // Enter mysql password here. //
$db = "";            // Enter mysql database name here. //
$table = "pictures"; // Enter mysql table name here. //

mysql_connect($host,$user,$password);
mysql_select_db($db);

$sql = "select pic from $table";
$Pictures = mysql_query($sql);
while($row_Pictures = mysql_fetch_assoc($Pictures))
{
 echo "<img src='pictures/".$row_Pictures["pic"]."' alt='' width='160' height='175' align='middle' onmouseover='show_large_image(this)' />";
 }
?>
<!-- Large image holder. -->
<img id="image_holder" src="" width="320" height="350" style="position:absolute;display:none;" onmouseout="hide_large_image(this)" />
<!-- ------------------- -->
</body>
</html>

And this may be a little cleaner.
If you click on an image, the large image will be displayed.
And when you click on the large image it disappears.

PHP Code:


			
<html>
<head>
<style>
img{cursor:pointer;}
</style>
<script type="text/javascript">
function getTopPos(inputObj)
{
 var returnValue = inputObj.offsetTop;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetTop;}
 return returnValue;
 }
function getLeftPos(inputObj)
{
 var returnValue = inputObj.offsetLeft;
 while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetLeft;}
 return returnValue;
 }
function show_large_image(obj)
{
 var large_image_obj = document.getElementById("image_holder");
 large_image_obj.src = obj.src;
 large_image_obj.style.left = getLeftPos(obj)+"px";
 large_image_obj.style.top = getTopPos(obj)+"px";
 large_image_obj.style.display = "block";
 }
function hide_large_image(obj)
{
 obj.style.display = "none";
 }
</script>
</head>
<body>
<?php
$host = "";          // Enter mysql host address here. //
$user = "";          // Enter mysql user name here. //
$password = "";      // Enter mysql password here. //
$db = "";            // Enter mysql database name here. //
$table = "pictures"; // Enter mysql table name here. //

mysql_connect($host,$user,$password);
mysql_select_db($db);

$sql = "select pic from $table";
$Pictures = mysql_query($sql);
while($row_Pictures = mysql_fetch_assoc($Pictures))
{
 echo "<img src='pictures/".$row_Pictures["pic"]."' alt='' width='160' height='175' align='middle' onclick='show_large_image(this)' />";
 }
?>
<!-- Large image holder. -->
<img id="image_holder" src="" width="320" height="350" style="position:absolute;display:none;" onclick="hide_large_image(this)" />
<!-- ------------------- -->
</body>
</html>

The Following User Says Thank You to job0107 For This Useful Post:
braca86 (10-28-09)