<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CLASS: Photo_show/hide</title>
<link href="photo_include.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {
color: #FF0000;
font-weight: bold;
}
-->
</style>
</head>
<body>
<p class="textinbody"><?
// Written by Joseph E Rubenstein
// Creative Digital Design Ltd.
// Beijing China
// email: joe@cddstudio.com
// this is the OOP Class that sizes and displays the image.
include "class_photoinclude.php";
// Variables of the image, passed to the code
// Get photo dimensions of Large and Small Images
$photoplace = new ImageInclude;
$photoplace->path = "http://www.cddstudio.com/classes/photo_showhide/";
$photoplace->photo_file = "chaoyangparkBeijing";
$photoplace->file_extension = ".jpg";
$photoplace->float = "R";
$photoplace->thumbnail_width = 100;
$photoplace->size_image();
?>
Welcome to my very first contribution to PHPClasses.ORG...<br>
<br>
Many thanks to those of you who have contributed to this site - on many occasions, I have found your scripts helpful and hopefully, you find the following useful as well.<br>
<br><?
// show image
$photoplace->display_image();
?><br>
CLASS_photo-show-hide:<br>The purpose of this class is to combine some CSS tricks, scripting, and some PHP magic into an OOP class that accomplishes the task of adding images into text blocks where the text flows around the image. This can easily be accomplished with CSS and PHP - what I needed to do was to not only embed the thumnail but to make it expandable, to reflow the text and to do this without having to reload the page... It needed to be clean code, fast, and flexible and be able to accomodate more than one image (which mean unique and dynamic DIV ID tags). <br>
<br>
I needed to have some control over where the image was located. This text is after the image 'marker' and will run around the image.. text before the call to the image_display function within the class will stay above it. Text after the call will flow around it... see the CSS file to control the flow around the image... <br>
<br>
boximage_R is the container for the right floating images.<br>
boximage_L is the container for the left floating images.<br>
</p>
<p class="textinbody"><span class="style1">NOTICE: </span>Due to a way the script handles the image, the filename of the image must have at least one letter as its first character - not a number. </p>
<p class="textinbody"> There are two calls made - one to lookup the information about the image and to set the size of the thumbnail. <br />
$photoplace->size_image();<br>
<br>
The other is to display the image:<br>
$photoplace->display_image();<br>
<br />
This class is designed to allow the easy insertion of one or more thumbnails into a page. Once moused over, the larger image appears, inline as an object on the page. This can be changed to a mouse click - see the file 'class_photoinclude' - change the 'onmouseover' to 'onmouseclick' - why a mouse over? Well, figured that people wouldn't naturally know to click the thumbnail image and that it would expand. </p>
<p class="textinbody">
<?
// Get photo dimensions of Large and Small Images
$photoplace = new ImageInclude;
$photoplace->path = "http://www.cddstudio.com/classes/photo_showhide/";
$photoplace->photo_file = "metalsculpture";
$photoplace->file_extension = ".jpg";
$photoplace->float = "L";
$photoplace->thumbnail_width = 100;
$photoplace->size_image();
?>
This page relies heavily on CSS and a little JS script trick to show and hide DIV tags by ID -
<?
// show image
$photoplace->display_image();
?>
The real trick is that it allows you to dynamically embed images into a page, in the body of text as a thumbnail.<br>
<br>
This is designed to be extremely flexible -<br>
You can specify file path, file name and type - plus request a float left or right, AND set the size of each thumbnail.<br>
<br>
The need for this class arose from a site that required placement of many images onto a page with a lot of text content and for some content - the thumbnail - to be shown but after an event for new content to replace it... a show hide function.<br>
<br>
The LICENSE for this class is for FREE USE on the understanding that if you find this useful that you email me to <a href="mailto:joe@cddstudio.com?subject=feedback from class Photo_ShowHide">joe@cddstudio.com</a> with comments, and provide a link to where you were able to implement it into your sites.<br>
<br>
Hope that you find this useful and again thanks to other contributors for sharing. <br>
<br>
Best regards,<br>
Joseph Rubenstein<br>
Creative Digital Design Ltd.<br>
Beijing, China </p>
<p class="textinbody">CLASS DEMO: <a href="http://www.cddstudio.com/classes/photo_showhide/demo_photoinclude.php%20">LINK</a><br>
<br>
SEPT 10, 2004
</p>
</body>
</html>
|
Stumble It!
Bookmark in del.icio.us
Download
