Brucies Butterfly page

Anyone lead me to Brucies CSS example page that he created using butterfly
thumbnails?
thanks
wayne

WayneandMaureen

WayneandMaureen wrote:

> Anyone lead me to Brucies CSS example page that he created using butterfly
> thumbnails?

Brucies own page:
http://butterflies.bruciesusenetshit.info/
another format on another person's page (I think), but still
brucie's work:
http://www.porjes.com/butterflies/

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

WayneandMaureen wrote:
> Anyone lead me to Brucies CSS example page that he created using
> butterfly thumbnails?

Sourc code:

<?
/*---------------------------------------------------------------------
this file was originally written in reply to a question in alt.html to
demonstrate that the use of EVIL frames or EVIL pop-ups are not required
to display thumbnail images and their larger counterparts.

features:
* search engine friendly URIs.
* cache friendly.
* 5 colors.
* 3 styles including a plain text version for crappy browsers
if that browser doesn't allow CSS to be turned off or the user
doesn't know how. media="all" hack is used for NS4.x

brucie © 2003
---------------------------------------------------------------------*/

/* return a 304 if the same page is requested again so the browser
retrieves the page from its cache rather than the server having
to generate and send the same page again. it will depend on the
browser and/or its cache settings if it bothers to check to see
if the file its requesting has changed from the one in its cache.
*/
$if_modified_since = preg_replace('/;.*$/', '', $HTTP_IF_MODIFIED_SINCE);
$mtime = filemtime($SCRIPT_FILENAME);
$gmdate_mod = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
if ($if_modified_since == $gmdate_mod) {
header('HTTP/1.1 304 Not Modified');
exit;
} // exit here after 304 is sent.

// if not a 304 continue ...

// gzip pages
ob_start('ob_gzhandler');

// headers to be sent with the pages
header('Author: brucie © 2003');
header('Content-Language: en');
header('Last-Modified:'.$gmdate_mod);
header('Cache-Control: public');
header('Content-Type: text/html; charset=iso-8859-1');

$abspath='http://usenet.alt-html.org/brucies/'; // absolute path
$imgpath='images/'; // path to the images
$thisfile='butterflies'; // name of the script file

/* the below entry in a .htaccess file forces 'butterflies' to be parsed
as a php file so the file extension .php is not needed

<Files butterflies>
ForceType application/x-httpd-php
</Files>

if the above isn't used the URIs would look like (example):

http://usenet.alt-html.org/brucies/b...s.php/01/01/01

which should be fine but some search engines may choke on
the '.' in the URI. (google did a few years ago)

because $PATH_INFO is used to pass the variables absolute URIs need to be
used
throughout the markup. if they weren't relative URIs would end up looking
like
(example):

butterflies/01/01/01/butterflies/01/01/02

and just get worse each time a link is clicked

butterflies/01/01/01/butterflies/01/01/02/butterflies/01/01/03

*/

// if $PATH_INFO contains goodies seperate them into the style, color and
butterfly
if(isset($PATH_INFO)){
list($style,$color,$butterfly)=explode('/', substr($PATH_INFO,1));}

// if the $PATH_INFO doesn't contain goodies use these:
else{
$style=01; // slant style
$color=01; // pink
$butterfly=00;} // the intro image

// display appropriate intro image for the color selected
switch($color){
case 1: $introimage='intro01.png'; break; // pink
case 2: $introimage='intro02.png'; break; // maroon
case 3: $introimage='intro03.png'; break; // black
case 4: $introimage='intro04.png'; break; // green
case 5: $introimage='intro05.png'; break; // red
default:$introimage='intro01.png'; // pink
}

// butterfly image to use or default to the intro image if none
switch($butterfly){
case 1: $image='butterfly01.jpg'; $alttext='Mr. John Butterfly.'; break;
case 2: $image='butterfly02.jpg'; $alttext='Ms. Paula Butterfly'; break;
case 3: $image='butterfly03.jpg'; $alttext='Mr. Samuel Butterfly'; break;
case 4: $image='butterfly04.jpg'; $alttext='Ms. Farica Butterfly'; break;
case 5: $image='butterfly05.jpg'; $alttext='Ms. Hailey Butterfly'; break;
case 6: $image='butterfly06.jpg'; $alttext='Ms. Dani Butterfly'; break;
case 7: $image='butterfly07.jpg'; $alttext='Mr. Ian Butterfly'; break;
case 8: $image='butterfly08.jpg'; $alttext='Ms. Camilla Butterfly'; break;
case 9: $image='butterfly09.jpg'; $alttext='Mr. Tallis Butterfly'; break;
case 10: $image='butterfly10.jpg'; $alttext='Mr. Wade Butterfly'; break;
case 11: $image='butterfly11.jpg'; $alttext='Mr. Nate Butterfly'; break;
case 12: $image='butterfly12.jpg'; $alttext='Mr. Adam Butterfly'; break;
case 13: $image='butterfly13.jpg'; $alttext='Ms. Naomi Butterfly'; break;
case 14: $image='butterfly14.jpg'; $alttext='Ms. Emma Butterfly'; break;
case 15: $image='butterfly15.jpg'; $alttext='Mr. Owen Butterfly'; break;
case 16: $image='butterfly16.jpg'; $alttext='Ms. Ursula Butterfly'; break;
default: $image=$introimage; $alttext='Click thumbs to see my
beautiful butterflies'; $butterfly=0;
}

/* size of the selected image
size[1] = image height
size[3] = height="x" width="x"
*/
$size=getimagesize($imgpath.$image);

/* 300px high <div> (large-butterflies) minus image height divided by 2
gives the top margin
for the image to center vertically in the large-butterflies <div>. not
always a whole number
but it doesn't matter. if the large images were all the same size the top
margin could
just be hard coded in the css
*/
$margin=((300-$size[1])/2);

/* combine all the image parts together (used on line 201) */
$showimage='<img src="'.$abspath.$imgpath.$image.'" '.$size[3].'
alt="'.$alttext.'">';

/* if the intro image discard the original alt text after the image is used
above
and change it to 'please' and 'welcome'. if not the intro image seperate
the alt
text into seperate parts for later use. */
if($butterfly==0){$name[1]='Please';$alttext='Welcome';}else{$name=explode("
",$alttext);}

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<title>Butterflies</title>

<?
/* a search engine may get upset indexing pages with identical content (just
the CSS changes)
so only the default style with the default color can be indexed. all
other pages contain the below <meta>
*/
if(($style!=1)||($color!=1)){echo '<meta name="robots" content="noindex,
follow">'; echo "\r\n";}

// if the style is not plain text (6) select the appropriate css files
if($style!=6){

// first part of the <link> element for the style css
echo '<link rel="stylesheet" href="'.$abspath;

// insert style name
switch($style){
case 1: echo 'style01'; break; // slant
case 2: echo 'style02'; break; // square
//case 3: echo 'style03'; break; // reserved for future use
//case 4: echo 'style04'; break; // reserved for future use
//case 5: echo 'style05'; break; // reserved for future use
default: echo 'style01'; $style=1; // slant
}

// end part of <link> element for the style css
echo '.css" type="text/css" media="all">'; echo "\r\n";

// first part of the <link> element for the color css
echo '<link rel="stylesheet" href="'.$abspath;

// insert color name
switch($color){
case 1: echo 'color01'; break; // powerful pink
case 2: echo 'color02'; break; // clam cream
case 3: echo 'color03'; break; // stark black
case 4: echo 'color04'; break; // minty green
case 5: echo 'color05'; break; // randy red
default: echo 'color01'; $color=1; // powerful pink
}

// end part of <link> element for the color css
echo '.css" type="text/css" media="all">'; echo "\r\n";

// top margin to vertically center the selected image in the
large-butterflies <div>
echo '<style type="text/css" media="all">#large-butterflies
img{margin-top:'.$margin.'px;}</style>'; echo "\r\n";
}
?>

<h1><span id="logo01"></span><span id="logo02">Brucies
Butterflies</span></h1>

<div id="small-butterflies">

<?

// generate the 16 thumb links
$count=1;
while($count<=16){
$count=str_pad($count,2,"0",STR_PAD_LEFT); // pad the numbers with 0 so
they're double digits if not already (just makes it neater)
$style=str_pad($style,2,"0",STR_PAD_LEFT);
$color=str_pad($color,2,"0",STR_PAD_LEFT);
echo '<a href="'.$abspath.$thisfile.'/'.$style.'/'.$color.'/'.$count.'"
id="b'.$count.'"><img src="'.$abspath.$imgpath.'butterfly'.$count.'s.jpg " ';
//image dimensions for the thumbs are set in the css so only use html
'width' and 'height' for plain text version (6).
if($style==6){echo'width="80" height="40" ';}
echo 'alt="Butterfly '.$count.'"></a>'; echo "\r\n";
$count++;}
?>
</div>

<h2><?

// display the first name of the butterfly (or 'please')
echo $name[1];?></h2>

<div id="large-butterflies"><?

//display the selected image
echo $showimage;?></div>

<div id="information">
<?

// if style 2 stick in a big div so the text wraps around the images area
if($style==2){ echo '<div id="float01"></div>'; echo "\r\n"; }

// display the full name of the butterfly at the top of the main text (or
'welcome')
echo '<h3>'.$alttext.'</h3>'; echo "\r\n";

// a small <div> used with style 1 so the text wraps around the thumbs that
overlap the main text
if($style==1){ echo '<div id="float01"></div>'; echo "\r\n"; }

// include the html file with all the text (that has the first name of the
butterfly e.g. john.html)
require strtolower($name[1].'.html'); echo "\r\n";

/* the source file that contains the links for different styles/colors
that is included with the butterfly named files is
http://usenet.alt-html.org/brucies/style-links.phps
*/

// go back to the intro image page (keep selected style and color)
echo '<p><a href="'.$abspath.$thisfile.'/'.$style.'/'.$color.'/00">Home
page</a></p>';echo "\r\n";?>

</div>

<? echo '<p id="view-source"><a href="'.$abspath.'butterflies.phps">View
Source</a></p>';?>