Brucies Butterfly page

Discussion in 'HTML' started by WayneandMaureen, Feb 25, 2004.

  1. Anyone lead me to Brucies CSS example page that he created using butterfly
    thumbnails?
    thanks
    wayne
     
    WayneandMaureen, Feb 25, 2004
    #1
    1. Advertising

  2. WayneandMaureen

    Els Guest

    Els, Feb 25, 2004
    #2
    1. Advertising

  3. WayneandMaureen

    Nico Schuyt Guest

    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/butterflies.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>';?>
     
    Nico Schuyt, Feb 25, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Samy
    Replies:
    0
    Views:
    544
  2. Eric
    Replies:
    0
    Views:
    555
  3. richard

    Brucies original stuff anyone?

    richard, Oct 10, 2006, in forum: HTML
    Replies:
    19
    Views:
    523
  4. sunny
    Replies:
    1
    Views:
    327
    Vladimir S. Oka
    Feb 26, 2006
  5. Replies:
    0
    Views:
    576
Loading...

Share This Page