Posted By

Tagged

Versions (?)

Zoom image hack for exhibit.horizontal.php

/ Published in: PHP

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

Expand | Embed | Plain Text

<?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'>&lsquo;" . $go['media_title'] . "&rsquo; ";
			$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%;}";
 
 
	}
}

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Zoom image hack for exhibit.horizontal.php

Related snippets

Choose a language for easy browsing: