Indexhibit^TM
Index + Exhibit

http://www.julianbaker.com/photography/portraiture/

Be warned some of my content is nsfw ;)

I've tweaked the exhibit.horizontal.php file so that the images link through to hi-res versions that fill the browser window when clicked on.

Clicking again removes the hi-res image and returns to normal page view.

I've left my code in for v1 which used jquery making a dynamic div and slapping it over the top of the page, then used cursor tracking to automatically scroll the image vertically, emulating touch screen scrolling without having to click. It was always rather buggy so I didn't post it. Main problem was if the punter used the scroll bar they got to see some the underlaying page page peeking out from under the image.

So tonight I tried a solution that's been in my head for ages - replace the whole page with just a single div containing the image then swap back to a stored copy of the html.

Seems to work on my laptop. That's all the testing I've done!

I've left the v1 code in there in case any one is interested.

This version adds a hard-coded signifier to teh original image file name ('_BIG'), then checks if that image exists. If it does it replaces the page contents with the hi-res version scaled full browser width. If not it uses the same image scaled up.

It doesn't do any fancy auto-scrolling as trackpads and iphones etc do this so leaving it to them, punters can use the scroll bar! Also in all honesty because my code sucks and it was always a bit buggy so I thought, hell, just leave it out. Feel free to re-implement if your math is better than mine!

TO USE:

- Paste my appaling code in the file (after backing up of course)
- Upload any hi-res versions of images manually adding the signifier to the image name

Julian

CODE BELOW:

1. <?php if defined'SITE' exit'No direct script access allowed'

/**
* Horizontal Format
*
* Exhbition format
* Originally created for SharoneLifschitz.com
*
* @version 1.1
* @author Vaska
*/

$DO = new Horizontally;

$exhibit['exhibit'] = $DO->createExhibit();
$exhibit['dyn_css'] = $DO->dynamicCSS();

class Horizontally
{
    // PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!!
    var $picture_block_padding_right = 50;
    var $text_width = 250;
    var $text_padding_right = 75;
    var $final_img_container = 0; // do not adjust this one
    
    function createExhibit()
    {
        $OBJ =& get_instance();
        global $rs;
    
        $pages = $OBJ->db->fetchArray("SELECT *
            FROM ".PX."media, ".PX."objects_prefs
            WHERE media_ref_id = '$rs[id]'
            AND obj_ref_type = 'exhibit'
            AND obj_ref_type = media_obj_type
            ORDER BY media_order ASC, media_id ASC");

        if (!$pages) return $rs['content'];
    
        $s = ''; $a = ''; $w = 0;
        $this->final_img_container = ($rs['content'] != '') ? ($this->text_padding_right + $this->text_width) : 0;

            // JB ->
            // CONVERT INDEXHIBIT IMAGE CODE TO EASY-TO-HANDLE VARIABLE
            $bigpic = BASEURL . GIMGS . "/".$go[media_file] ;
            // WRAP IMAGE IN HREF TO RESTORE PAGE
            $a .= "";
            // JB
            $a .= "";
            // JB

<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Horizontal Format
*
* Exhbition format
* Originally created for SharoneLifschitz.com
*
* @version 1.1
* @author Vaska
*/

$DO = new Horizontally;

$exhibit['exhibit'] = $DO->createExhibit();
$exhibit['dyn_css'] = $DO->dynamicCSS();

$exhibit['lib_js'] = array('jquery.scrollTo-1.4.2-min.js','jquery.ui.effects.core.js','jquery.ui.effects.slide.js');
$exhibit['dyn_js'] = dynamicJS();
function dynamicJS()
{
global $timeout;
    return "<!--//--><![CDATA[//><!--
    
    // v2 SWAP CONTENT FOR IMAGE AND LET TRACKPAD/IPHONE HANDLE SCROLLING
    var stash = '';
    var pic = '';
    var lft = '';
    
    function stashContent(){
        stash = document.body.innerHTML;    
        lft = $(window).scrollLeft() ;
    }
    function restoreContent(){
        document.body.innerHTML = stash ;
        $(window).scrollLeft(lft) ;
    }
    function projectPic(p){
        pic = \"<div id='coverslide'>\";
        pic = pic + \"<a href='javascript:restoreContent();'><img src='\"+p+\"' alt='' width='100%' border='0' /></a>\";
        pic = pic + \"</div>\";
        document.body.innerHTML = pic ;
    }
    // v2 <-

$(function(){

    // CAPTURE INITIAL MOUSE CLICK FOR v1
    var relativeY = 0;
    $('#wrapper').click(function(e) {
        relativeY = e.pageY - this.offsetTop;
    });

    $.fn.do_coverslide = function(p) {
    
        
        // v2 METHOD USING JQUERY TO ADD DIV ON TOP OF CURRENT CONTENTS

        stashContent();
        
        var srcPathArray = p.split('/');
        var imgFile = srcPathArray[srcPathArray.length-1];
        var imgArray = imgFile.split('.');
        var imgName = imgArray[0];
        var imgExt = imgArray[1];
        var srcPath = p.split(imgFile , 1);
        // MANUALLY UPLOAD HI-RES VERSION APPENDING A SIGNIFIER, MINE IS '_BIG.'
        var biggerImg = srcPath + imgName+'_BIG.'+ imgExt;

        $.ajax({
        url:biggerImg,
        type:'HEAD',
        error:
        function(){         
                        projectPic(p);                    
        },
        success:
        function(){
                    projectPic(biggerImg);
    }
        });

//        v1 METHOD USING JQUERY TO ADD DIV ON TOP OF CURRENT CONTENTS
//        
//        $('#coverslide').remove();                                // Remove any old instances left by error        
//        div = $('<div>').attr( 'id', 'coverslide').html('');    // Make a div called coverslide
//        div.hide();                                                // Hide the div
//        $('#wrapper').prepend(div);
//        $('#coverslide').addClass('coverclass');
//        $('<img/>').attr({'src': p, 'class': '', 'id': 'currentphoto'}).appendTo('#coverslide');    
//        $('#coverslide').fadeIn();
//        
//        $('#coverslide').click(function() {
//            $('#coverslide').remove();
//            restoreContent();
//        });
//                
//        bg_img_resize();
//
//        $('#coverslide').mousemove(function(e) {
//            var offscrn = $('#coverslide img').attr('height') - $(window).height();
//            var mv = e.pageY - relativeY ;
//            
//            if (mv < offscrn) {
//                $('#coverslide').css({'margin-top' : -(mv) });
//            }
//            if (mv < 0) {
//                $('#coverslide').css({'margin-top' : 0 });
//            }
//        });

    };

    function bg_img_resize(e){
        var w = $(window).width();
        var h = $(window).height();
        var iw = $('#coverslide img').attr('width');
        var ih = $('#coverslide img').attr('height');
        var rw = iw / ih;
        var rh = ih / iw;
        var sc = h * rw;
        if (sc >= w) {
            nh = h;
            nw = sc;
        } else {
            sc = w * rh;
            nh = sc;
            nw = w;
        }
    
        $('#coverslide img').css({height: nh, width: nw});

        sl = $(window).scrollLeft() + 'px';
        
        $('#coverslide').css({ 'margin-left' : sl });
    }    
    
    $(window).resize(function(){ bg_img_resize(); });
    $(window).scroll(function(){ bg_img_resize(); $('#coverslide').css({ 'top' : 0 }); });

});
//--><!]]>";
}

class Horizontally
{
    // PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!!
    var $picture_block_padding_right = 50;
    var $text_width = 250;
    var $text_padding_right = 75;
    var $final_img_container = 0; // do not adjust this one
    
    function createExhibit()
    {
        $OBJ =& get_instance();
        global $rs;
    
        $pages = $OBJ->db->fetchArray("SELECT *
            FROM ".PX."media, ".PX."objects_prefs
            WHERE media_ref_id = '$rs[id]'
            AND obj_ref_type = 'exhibit'
            AND obj_ref_type = media_obj_type
            ORDER BY media_order ASC, media_id ASC");

        if (!$pages) return $rs['content'];
    
        $s = ''; $a = ''; $w = 0;
        $this->final_img_container = ($rs['content'] != '') ? ($this->text_padding_right + $this->text_width) : 0;

        foreach ($pages as $go)
        {
            $title = ($go['media_title'] == '') ? '' : "<div class='title'>‘" . $go['media_title'] . "’ ";
            $title .= ($go['media_caption'] == '') ? '' : "" . $go['media_caption'] . "</div>";
        
            $temp_x = $go['media_x'] + $this->picture_block_padding_right;
            $this->final_img_container += ($go['media_x'] + $this->picture_block_padding_right);
        
            $a .= "<div class='picture_holder' style='width: {$temp_x}px;'>\n";
            $a .= "<div class='picture' style='width: {$go[media_x]}px;'>\n";

            // JB ->
            // CONVERT INDEXHIBIT IMAGE CODE TO EASY-TO-HANDLE VARIABLE
            $bigpic = BASEURL . GIMGS . "/".$go[media_file] ;
            // WRAP IMAGE IN HREF TO RESTORE PAGE
            $a .= "<a href='javascript:$().do_coverslide(\"$bigpic\");'>";
            // JB <-
            
            $a .= "<img src='" . BASEURL . GIMGS . "/$go[media_file]' width='$go[media_x]' height='$go[media_y]' alt='" . BASEURL . GIMGS . "/$go[media_file]' />\n";

            // JB ->
            $a .= "</a>";
            // JB <-

            $a .= "<div class='captioning'>$title</div>\n";
            $a .= "</div>\n";
            $a .= "</div>\n\n";
        }

        $s .= "<div id='img-container'>\n";
        if ($rs['content'] != '') $s .= "<div id='text'>" . $rs['content'] . "</div>\n";
        $s .= $a;
        $s .= "<div style='clear: left;'><!-- --></div>";
        $s .= "</div>\n";
        
        return $s;
    }

    function dynamicCSS()
    {
        return "#img-container { width: " . ($this->final_img_container + 1) . "px; }
#img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
#img-container #text p { width: " . $this->text_width . "px; }
#img-container .picture_holder { float: left; }
#img-container .picture { /* padding-top: 10px; */ }
#img-container .captioning .title { margin-top: 12px; font-size:0.75em;}
#img-container .captioning .caption { }

.coverclass {background-color:#000000; z-index:5; width:100%; height:100%;}";

    }
}

Thanks for sharing... Clever indeed. I've seen something similar but I can't say more...

One thing though: would you care to post a link with the exhibit?
Uploaded it in a dropbox/rapidshare/what-ever-share server and post the link here.
Non-coders will be asking questions since the code brakes in the forum... Cheers...

Pretty cool, but the clicked images fits the browser with their width (not great for vertical/french/portrait format, or even for square ones)…
Click the first pic to see what I'm talking about.

Posted it on Snipplr, hope that's useable for everyone

http://snipplr.com/view/39642/zoom-image-hack-for-exhibithorizontalphp/

@lemathieu - yeah that some major suckage, I did warn that it's a hack. It needs some more refined elegance to del with image/window proportions.

My trig is crap ; )