Posted By

flatearthcomms on 08/28/10


Tagged

indexhibit


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
  1. <?php if (!defined('SITE')) exit('No direct script access allowed');
  2.  
  3. /**
  4. * Horizontal Format
  5. *
  6. * Exhbition format
  7. * Originally created for SharoneLifschitz.com
  8. *
  9. * @version 1.1
  10. * @author Vaska
  11. */
  12.  
  13. $DO = new Horizontally;
  14.  
  15. $exhibit['exhibit'] = $DO->createExhibit();
  16. $exhibit['dyn_css'] = $DO->dynamicCSS();
  17.  
  18.  
  19.  
  20. $exhibit['lib_js'] = array('jquery.scrollTo-1.4.2-min.js','jquery.ui.effects.core.js','jquery.ui.effects.slide.js');
  21. $exhibit['dyn_js'] = dynamicJS();
  22. function dynamicJS()
  23. {
  24. global $timeout;
  25. return "<!--//--><![CDATA[//><!--
  26.  
  27. // v2 SWAP CONTENT FOR IMAGE AND LET TRACKPAD/IPHONE HANDLE SCROLLING
  28. var stash = '';
  29. var pic = '';
  30. var lft = '';
  31.  
  32. function stashContent(){
  33. stash = document.body.innerHTML;
  34. lft = $(window).scrollLeft() ;
  35. }
  36. function restoreContent(){
  37. document.body.innerHTML = stash ;
  38. $(window).scrollLeft(lft) ;
  39. }
  40. function projectPic(p){
  41. pic = \"<div id='coverslide'>\";
  42. pic = pic + \"<a href='javascript:restoreContent();'><img src='\"+p+\"' alt='' width='100%' border='0' /></a>\";
  43. pic = pic + \"</div>\";
  44. document.body.innerHTML = pic ;
  45. }
  46. // v2 <-
  47.  
  48.  
  49. $(function(){
  50.  
  51. // CAPTURE INITIAL MOUSE CLICK FOR v1
  52. var relativeY = 0;
  53. $('#wrapper').click(function(e) {
  54. relativeY = e.pageY - this.offsetTop;
  55. });
  56.  
  57.  
  58.  
  59. $.fn.do_coverslide = function(p) {
  60.  
  61.  
  62. // v2 METHOD USING JQUERY TO ADD DIV ON TOP OF CURRENT CONTENTS
  63.  
  64. stashContent();
  65.  
  66. var srcPathArray = p.split('/');
  67. var imgFile = srcPathArray[srcPathArray.length-1];
  68. var imgArray = imgFile.split('.');
  69. var imgName = imgArray[0];
  70. var imgExt = imgArray[1];
  71. var srcPath = p.split(imgFile , 1);
  72. // MANUALLY UPLOAD HI-RES VERSION APPENDING A SIGNIFIER, MINE IS '_BIG.'
  73. var biggerImg = srcPath + imgName+'_BIG.'+ imgExt;
  74.  
  75. $.ajax({
  76. url:biggerImg,
  77. type:'HEAD',
  78. error:
  79. function(){
  80. projectPic(p);
  81. },
  82. success:
  83. function(){
  84. projectPic(biggerImg);
  85. }
  86. });
  87.  
  88.  
  89.  
  90. // v1 METHOD USING JQUERY TO ADD DIV ON TOP OF CURRENT CONTENTS
  91. //
  92. // $('#coverslide').remove(); // Remove any old instances left by error
  93. // div = $('<div>').attr( 'id', 'coverslide').html(''); // Make a div called coverslide
  94. // div.hide(); // Hide the div
  95. // $('#wrapper').prepend(div);
  96. // $('#coverslide').addClass('coverclass');
  97. // $('<img/>').attr({'src': p, 'class': '', 'id': 'currentphoto'}).appendTo('#coverslide');
  98. // $('#coverslide').fadeIn();
  99. //
  100. // $('#coverslide').click(function() {
  101. // $('#coverslide').remove();
  102. // restoreContent();
  103. // });
  104. //
  105. // bg_img_resize();
  106. //
  107. // $('#coverslide').mousemove(function(e) {
  108. // var offscrn = $('#coverslide img').attr('height') - $(window).height();
  109. // var mv = e.pageY - relativeY ;
  110. //
  111. // if (mv < offscrn) {
  112. // $('#coverslide').css({'margin-top' : -(mv) });
  113. // }
  114. // if (mv < 0) {
  115. // $('#coverslide').css({'margin-top' : 0 });
  116. // }
  117. // });
  118.  
  119. };
  120.  
  121.  
  122. function bg_img_resize(e){
  123. var w = $(window).width();
  124. var h = $(window).height();
  125. var iw = $('#coverslide img').attr('width');
  126. var ih = $('#coverslide img').attr('height');
  127. var rw = iw / ih;
  128. var rh = ih / iw;
  129. var sc = h * rw;
  130. if (sc >= w) {
  131. nh = h;
  132. nw = sc;
  133. } else {
  134. sc = w * rh;
  135. nh = sc;
  136. nw = w;
  137. }
  138.  
  139. $('#coverslide img').css({height: nh, width: nw});
  140.  
  141. sl = $(window).scrollLeft() + 'px';
  142.  
  143. $('#coverslide').css({ 'margin-left' : sl });
  144. }
  145.  
  146. $(window).resize(function(){ bg_img_resize(); });
  147. $(window).scroll(function(){ bg_img_resize(); $('#coverslide').css({ 'top' : 0 }); });
  148.  
  149. });
  150. //--><!]]>";
  151. }
  152.  
  153.  
  154.  
  155.  
  156.  
  157. class Horizontally
  158. {
  159. // PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!!
  160. var $picture_block_padding_right = 50;
  161. var $text_width = 250;
  162. var $text_padding_right = 75;
  163. var $final_img_container = 0; // do not adjust this one
  164.  
  165. function createExhibit()
  166. {
  167. $OBJ =& get_instance();
  168. global $rs;
  169.  
  170. $pages = $OBJ->db->fetchArray("SELECT *
  171. FROM ".PX."media, ".PX."objects_prefs
  172. WHERE media_ref_id = '$rs[id]'
  173. AND obj_ref_type = 'exhibit'
  174. AND obj_ref_type = media_obj_type
  175. ORDER BY media_order ASC, media_id ASC");
  176.  
  177. if (!$pages) return $rs['content'];
  178.  
  179. $s = ''; $a = ''; $w = 0;
  180. $this->final_img_container = ($rs['content'] != '') ? ($this->text_padding_right + $this->text_width) : 0;
  181.  
  182. foreach ($pages as $go)
  183. {
  184. $title = ($go['media_title'] == '') ? '' : "<div class='title'>&lsquo;" . $go['media_title'] . "&rsquo; ";
  185. $title .= ($go['media_caption'] == '') ? '' : "" . $go['media_caption'] . "</div>";
  186.  
  187. $temp_x = $go['media_x'] + $this->picture_block_padding_right;
  188. $this->final_img_container += ($go['media_x'] + $this->picture_block_padding_right);
  189.  
  190. $a .= "<div class='picture_holder' style='width: {$temp_x}px;'>\n";
  191. $a .= "<div class='picture' style='width: {$go[media_x]}px;'>\n";
  192.  
  193. // JB ->
  194. // CONVERT INDEXHIBIT IMAGE CODE TO EASY-TO-HANDLE VARIABLE
  195. $bigpic = BASEURL . GIMGS . "/".$go[media_file] ;
  196. // WRAP IMAGE IN HREF TO RESTORE PAGE
  197. $a .= "<a href='javascript:$().do_coverslide(\"$bigpic\");'>";
  198. // JB <-
  199.  
  200. $a .= "<img src='" . BASEURL . GIMGS . "/$go[media_file]' width='$go[media_x]' height='$go[media_y]' alt='" . BASEURL . GIMGS . "/$go[media_file]' />\n";
  201.  
  202. // JB ->
  203. $a .= "</a>";
  204. // JB <-
  205.  
  206. $a .= "<div class='captioning'>$title</div>\n";
  207. $a .= "</div>\n";
  208. $a .= "</div>\n\n";
  209. }
  210.  
  211. $s .= "<div id='img-container'>\n";
  212. if ($rs['content'] != '') $s .= "<div id='text'>" . $rs['content'] . "</div>\n";
  213. $s .= $a;
  214. $s .= "<div style='clear: left;'><!-- --></div>";
  215. $s .= "</div>\n";
  216.  
  217. return $s;
  218. }
  219.  
  220.  
  221. function dynamicCSS()
  222. {
  223. return "#img-container { width: " . ($this->final_img_container + 1) . "px; }
  224. #img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
  225. #img-container #text p { width: " . $this->text_width . "px; }
  226. #img-container .picture_holder { float: left; }
  227. #img-container .picture { /* padding-top: 10px; */ }
  228. #img-container .captioning .title { margin-top: 12px; font-size:0.75em;}
  229. #img-container .captioning .caption { }
  230.  
  231. .coverclass {background-color:#000000; z-index:5; width:100%; height:100%;}";
  232.  
  233.  
  234. }
  235. }

Report this snippet  

You need to login to post a comment.