Brucies Butterfly page

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Anyone lead me to Brucies CSS example page that he created using butterfly

Re: Brucies Butterfly page

WayneandMaureen wrote:

Quoted text here. Click to load it

Brucies own page: /
another format on another person's page (I think), but still
brucie's work: /


Sonhos vem. Sonhos vo. O resto imperfeito.
                              - Renato Russo -

Re: Brucies Butterfly page

WayneandMaureen wrote:
Quoted text here. Click to load it

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.

          * 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 here after 304 is sent.

// if not a 304 continue ...

// gzip pages

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

$abspath=' /'; // 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

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

   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
  throughout the markup. if they weren't relative URIs would end up looking


  and just get worse each time a link is clicked



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

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

// display appropriate intro image for the color selected
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
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"

/* 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

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

/* if the intro image discard the original alt text after the image is used
   and change it to 'please' and 'welcome'. if not the intro image seperate
the alt
   text into seperate parts for later use. */

" ">


/* 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

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

// insert style name
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
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</style>'; echo "\r\n";

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

<div id="small-butterflies">


// generate the 16 thumb links
$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)
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";


// 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
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

// 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";?>


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

Site Timeline