Login   Register  
PHP Classes
elePHPant
Icontem

File: demo_photoinclude.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Joseph Rubenstein  >  Photo Show and Hide  >  demo_photoinclude.php  >  Download  
File: demo_photoinclude.php
Role: Example script
Content type: text/plain
Description: A demo page with instructions
Class: Photo Show and Hide
Output page with dynamically expansible thumbnails
Author: By
Last change: The script does not behave properly for image file names that begin with a number - to work, files must have a letter as their first character.
Thanks to those that pointed this out.
Date: 10 years ago
Size: 5,167 bytes
 

Contents

Class file image Download
<!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-&gt;size_image();<br>
  <br>
  The other is to display the image:<br>
  $photoplace-&gt;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>